Zoom Punch Cut
TransitionsA fast accelerating push-in carries a hard frame-exact cut, with the incoming scene decelerating out of an over-scaled state
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 5 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Firstfirst · string
Headline of the outgoing scene.
now: Slow
- Secondsecond · string
Headline of the incoming scene.
now: Fast
- Cut atcutAt · number
Exact frame the cut lands on. Put it on the beat.
now: 72
- Punchpunch · number
How far the outgoing scene pushes in before the cut.
now: 1.55
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A beat-driven transition: the first scene pushes in fast with increasing blur, hard cuts on the peak frame, and the second scene settles back from slightly over-scaled.
