An app demo for Penny, a friendly budgeting app. A cursor taps Add expense, types Coffee and 4.50, and the new card slides into the list with a whoosh. The monthly balance counts down, a success chime plays when it saves, and it ends on the Penny logo with a sonic logo. Clean and modern, mint green and white, on a phone screen.

FORMAT
1920 × 1080 pixels (16:9), 60 fps.
12 seconds long.

STYLE
Punchy. Fast, confident motion with sharp ease-outs and tight timing: things arrive quickly, land hard and hold, and every beat hits crisply, often on a rhythm. Short anticipation, strong contrast, big type, no floaty drifts. It should feel energetic and precise, like a great launch video.

SOUND
Add music and sound effects. Music: write a short original music bed in code that suits the mood and style: a steady tempo, a few chords, a bass line and light percussion. Choose the tempo so the key moments land on beats, time the cuts and big moves to the beat, build toward the main moment, and end on a clean final note (or loop seamlessly if the piece loops). Sound effects: give the key moments their own sound, timed to the frame: soft clicks and taps when something is pressed or toggled, quick whooshes on fast moves and transitions, a light pop or chime when something lands or succeeds, and one bigger hit for the main moment. Match the character of the sounds to the style (crisp and subtle for a polished product video, bouncy and cartoony for a playful one), and leave quiet moments quiet. Turn the music down slightly whenever an important effect plays, so the effects cut through.
Make every sound in code with the Web Audio API (oscillators, filtered noise and envelopes): no audio files. Drive the sound from the same timeline as the picture, so each sound starts on the exact frame of the action it belongs to, and loop it with the picture. Browsers block sound until the viewer interacts, so show a small, unobtrusive “Sound on” button that starts it in sync. Mix it like a finished video: nothing clips or distorts, the important sounds are clearly audible, and the loudest moment is still comfortable. Also define window.motion.audio(sampleRate), which renders the soundtrack for one full play-through with an OfflineAudioContext and resolves to the AudioBuffer, so the video export can include the sound. If you deliver a video file instead, render the same soundtrack in code and add it to the file as an AAC audio track. Before you finish, check that the soundtrack isn't silent or clipping and that every sound lines up with its action.

TECHNIQUES
The linked phrases above mean exactly this:
- Whoosh: A short rush of air that rises and falls as something moves fast across the frame or the scene changes, loudest at the moment of fastest motion.
- “counts down” means Number count-down: A number decreases from a start value to zero, often shown as a timer with its digits updating each second.
- Success chime: A short, bright tone or pair of rising notes that plays when something succeeds, such as a payment going through or a task finishing.
- Sonic logo: A short, distinctive sound or melody that belongs to a brand and plays with its logo, so people recognise the brand by ear.

QUALITY BAR
This will sit next to work by professional motion designers. A correct but mechanical result counts as a failure. Make it feel alive, intentional and physically believable, the way a skilled animator would deliver it; deciding what that takes is your job.

OUTPUT
Build it as an artifact: one self-contained HTML file with an inline <canvas> animation, well-known libraries such as GSAP or three.js loaded from cdnjs or jsDelivr are fine, but no outside images. It should play automatically and loop. Also define window.motion = { duration, fps: 60, render(t) }, where render(t) draws the frame at t seconds from t alone, so the animation can be exported to video frame by frame.

CHECK YOUR WORK
If you can run code (for example in Claude Code), render a contact sheet of frames by calling window.motion.render(t) at evenly spaced times, look at it as an animator would, and revise anything that feels mechanical, cramped, rushed or unclear. Repeat until you would be proud to show it.