How to Animate UI Interactions for a Product Demo

Step by step

1. 1

   Pick the interaction

   Choose by what the viewer should understand. Button Press Success fits a call to action being completed, Toggle Switch fits a setting changing state, and Toast Notification fits a result arriving after the action, such as a payment or a saved file. Cursor Click goes over your own screen recording.

2. 2

   Write your own labels and colors

   On Button Press Success, type the label in Title, then set Primary for the button and Secondary for the checkmark state. Toggle Switch uses Title for the on label and Subtitle for the off label. Toast Notification adds Icon and Direction. Match Font and Corner radius to your real interface.

3. 3

   Set the size and the target

   Every UI preset starts at 3 seconds and can run to 5, and its press, morph and exit stretch together with the clip. Use Scale and Position to place the element, raising Scale on a 9:16 cut. On Cursor Click, Target X and Target Y set where the pointer ends up.

4. 4

   Keep the transparency

   These presets start on a transparent background, so the element can sit on a mockup or a recording. Export WebM with alpha for CapCut, Resolve or a web page, and a PNG sequence for Premiere Pro or After Effects. MP4 needs a solid background first, since it stores no alpha.

5. 5

   Sync it to the recording

   In Premiere Pro, choose File > Import, click the first PNG frame, tick Image Sequence and drag the clip above your screen recording. Line the press up with the moment the recording changes state. In CapCut, import the WebM onto an overlay track and do the same.

Where it is used

• Feature launch videos

  A launch video made before the feature is finished. A switch flips on, a toast confirms the result, and the voiceover explains the change without the camera ever visiting a half-built screen.

• Help and onboarding clips

  Help-center clips where Cursor Click sits over a recording of the product, and its clicks lead the eye to the one control the narrator is describing at that moment.

• Vertical app ads

  Short vertical ads where Card Flip In turns over to reveal a plan name and one feature line, placed between two shots of someone using the app on a phone.

Presets

5

Default duration

3 seconds, up to 5

Best export

WebM with alpha, or PNG sequence for Premiere Pro

Aspect ratios

16:9, 9:16, 1:1, 4:5

Which format should you export?

MP4 at full frame. A fabricated interface is a shot, and it compresses better without an alpha channel.

Format

MP4 · WebM · PNG sequence

Alpha

WebM or PNG sequence

Resolution

720p to 8K

Aspect

16:9 · 9:16 · 1:1 · 4:5

License

Commercial use included

Three tips that make it look intentional

• One interaction per clip: press, then toast, as separate beats.
• Match the corner radius to your real product so it reads as yours.
• Keep cursor movement short; long travel looks like a tutorial.

Three things people get wrong

• Moving the cursor at a constant speed. Real pointers accelerate, overshoot slightly and settle.
• Showing a toast and the click that caused it at the same instant.
• Filling the mock interface with lorem ipsum, which tells the viewer the product is not real.

Frequently asked