Can I put my own button label in?

Yes, labels, colors and corner radius are editable on every UI preset.

Is this a replacement for a demo video?

It is best for highlights, launch posts and ads. A full walkthrough still wants a real recording.

UI animations: product demos without a screen recording

Updated September 18, 20263 min read

How do you show a product interaction without recording the app?

Use a UI preset: a button press, a toggle, a cursor click, a card flip or a toast. Type your own labels, set your product colors, and export transparent WebM. The interaction reads clearly even when the real app is still in design.

Screen recordings are noisy and date quickly. A clean UI beat shows the same idea in two seconds with your own copy and color, and it never shows a build number you did not mean to ship.

Five ui animations presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

Button Press Success
3s
A button gets pressed with a ripple, morphs into a circle and confirms with a checkmark. Pure product-demo polish.
Toggle Switch
3s
An iOS-style switch flicks on and off with a stretchy knob and color change, labeled with your states.
Cursor Click
3s
A cursor glides along natural arcs, clicking stops on its way to your target. Drop it over any screen recording.
Card Flip In
3s
A product card rises and flips from its branded back to reveal the content side. Great for features and offers.
Toast Notification
3s
A sleek toast slides in with an icon, message and countdown bar, then glides away on its own.

All ui animations

How to make one in the browser

01Open a ui animations presetBrowse the UI Animations category and open the preset closest to what you need. It loads in the editor with every control unlocked.
02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format: MP4 H.264 · WebM VP9
Alpha: Transparent WebM
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.

Frequently asked

Can I put my own button label in?: Yes, labels, colors and corner radius are editable on every UI preset.
Is this a replacement for a demo video?: It is best for highlights, launch posts and ads. A full walkthrough still wants a real recording.

Animated Frames
Animated frames: borders that focus the shot
Use a frame when you need to separate inserted content from the main shot: a photo, a quote, a webcam, a product. Corner brackets and chasing borders draw the eye to a region, and a transparent export lets the footage stay visible inside.
Read the guide
Badges & Stickers
Sale badges: stickers that make an offer land
Pick a badge preset, type the offer, set the colors, and export a transparent WebM. Drop it in a corner over your product shot and trim it to a couple of seconds. A pop or slam entrance reads better than a fade for anything price related.
Read the guide
Captions & Subtitles
Animated captions: keep viewers watching on mute
Most social video is watched without sound, so captions carry the message. Word-by-word styles also hold attention by giving the eye something to follow, which lifts retention on Shorts, Reels and TikTok compared with a static subtitle block.
Read the guide