How to recreate a website animation from a video with AI
Screenshots can’t carry motion, and “make it animate like this” gives a builder nothing to work with. To recreate an animation, you have to describe it the way a motion designer would: what moves, when, for how long, and with what easing.
1. Break the video into moments
Scrub through the clip and note each state change with a timestamp. Sampling a frame every half second or so is usually enough to catch every beat of a hero animation. For each moment, write what’s on screen and what just changed.
2. Write it as a timeline
For each change, give the builder four things:
- When: start and end times, or a delay after the previous step.
- What: the property that changes (opacity, position, scale, blur, clip-path).
- How much: from and to values (“translateY 40px → 0”).
- How it feels: the easing curve, such as
cubic-bezier(0.22,1,0.36,1)for a soft settle.
3. Say what triggers it
On load, on scroll into view, on hover, or on click. The same motion feels completely different depending on its trigger, and builders can’t infer it from a recording.
4. Ask for smooth, 60fps motion
Tell the builder to animate only transform and opacity where possible, to pre-blur images instead of animating blur filters, and to respect “reduced motion” settings. That keeps the rebuild smooth on real devices.
Recast writes the timeline for you
Drop a video or screen recording (up to 60 seconds) into Recast. Your browser samples the frames (the video itself never uploads) and Recast writes the motion into the prompt. This excerpt is real, from a 6-second space-exploration hero.
Motion and timeline
The intro plays once on load. After that, every dive is triggered by a click.
Intro, then Mars resting:
- 0.0–1.2s:
- The Mars fly-through video plays: camera forward and tilting up, ending on the horizon still.
- The counter counts 0→100 with ease-out (it is at ~49 at 0.3s and ~71 at 0.7s).
- 1.05–1.35s: the counter fades to 0 opacity and moves translateY 8px (300ms ease-in).
- 1.1–1.9s: the logo travels from the centre to the top-left.
- It uses translate plus scale 1.6→1, with
cubic-bezier(0.65,0,0.35,1). - It passes ~(474,347) at 1.2s.
- It uses translate plus scale 1.6→1, with
- 1.4–1.8s: the preview card and Next label appear.
- The card goes from scale 0.2 to 1 and opacity 0→1 over 500ms with
cubic-bezier(0.22,1,0.36,1), from the card's centre. - The label fades in with a 100ms delay.
- The card goes from scale 0.2 to 1 and opacity 0→1 over 500ms with
- 1.8–2.4s (together):
- The nav slides down: translateY −12px→0 with an opacity fade, 450ms.
- The planet list items stagger in: translateX −12px→0 plus opacity, 40ms apart.
- The planet name rises, starting from translateY 40px.
- It crossfades from a statically pre-blurred copy (blur 12px, rendered once) to the sharp copy over 600ms with
cubic-bezier(0.22,1,0.36,1). - It is blurry at 2.2s.
- It crossfades from a statically pre-blurred copy (blur 12px, rendered once) to the sharp copy over 600ms with
- The data table rows stagger in with the same crossfade and translateY 10px, 80ms apart.
Dive on click (the frames show it at ~2.4s):
- +0–0.3s:
- The card scales 1→1.05.
- The Next label, planet name and table fade to 0 (250ms).
Common questions
Can AI builders recreate animations from a video?
Not from the video directly, but they can from a precise description: a timeline with timings, properties, from/to values, easing, and triggers.
How many frames do I need from a video?
About two per second is usually enough to catch each state of a short hero animation; add more around fast transitions.
Is my video uploaded when I use Recast?
No. Your browser samples still frames from the video and only those frames are sent. The video file never leaves your device.
More guides
Try it on your own design.
Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.
Join the waitlist