Can I use my own images?

Yes, presets that compare states take your own uploads, decoded locally.

Does the hotspot layout adapt to vertical?

Positions are set in percentages, so they hold their relative place in every aspect ratio.

Spotlight and before-after: direct the viewer's eye

Updated September 18, 20263 min read

How do you compare before and after in a video?

Use a before-after wipe: place both images or clips in the preset, set the wipe direction and speed, and let the line travel across the frame. A spotlight or magnifier does the same job for a single detail inside one image.

Attention is the product. These presets spotlight a region, drop hotspots on a layout, magnify a detail and wipe between before and after states, with your own labels.

Five spotlight & focus presets to start from

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

Spotlight Tour
10s
The screen dims and a circular spotlight glides between points you choose, labelling each stop. Ideal for product walkthroughs.
Hotspots
7.5s
Pulsing dots ping at each feature and label chips pop in one by one. Great for product shots and UI callouts.
Before / After
7.5s
A comparison divider with a draggable-style handle swings across the frame under Before and After labels.
Magnifier
7.5s
A magnifying glass pops in and inspects each point in turn with a caption above the lens.
Feature Checklist
7.5s
Features slide in and get ticked one by one with a drawn check mark. Clean for pricing, launches and recaps.

All spotlight & focus

How to make one in the browser

01Open a spotlight & focus presetBrowse the Spotlight & Focus 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

Keep the two states identical apart from the change you are showing.
Let the wipe stop in the middle for a beat before completing it.
Label both sides so the comparison survives being screenshotted.

Frequently asked

Can I use my own images?: Yes, presets that compare states take your own uploads, decoded locally.
Does the hotspot layout adapt to vertical?: Positions are set in percentages, so they hold their relative place in every aspect ratio.

Device Mockups
Device mockups: show an app without filming a phone
Use a device mockup preset, upload a screenshot, and let the phone, laptop or browser frame animate around it. The result is a clean product shot with no glare, no hand and no camera, exported as MP4 or transparent WebM.
Read the guide
Shop & Ecommerce
Product promos: carts, price drops and ratings that sell
Three beats do most of the work: the price drop, the social proof, and the call to action. An add-to-cart animation, a star rating and a promo code give a viewer the reason, the reassurance and the next step in under ten seconds.
Read the guide
Education & Explainers
Explainer graphics: quizzes, steps and definitions
Structure beats decoration. A step sequence shows where the viewer is, a definition card fixes a term, a quiz creates a pause, and a flashcard flip rewards attention. Each one gives the narration something to land on.
Read the guide