Icon Performance Moves
Icon Performance Moves is a light & emphasis Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Light & Emphasis
- Duration
- A 3–4s / B 4–5s
- Energy
- A climactic accent / B charging intro
- Styles
- 2
Recipe notes
Icon performance, two variants — pop-burst-confirm confirmation burst (checkmark builds, pops big, explodes particles + spreading ring) and attention-bounce attention-seeking bounce (icon bounces higher in sequence + landing squash + camera drawn in)
When to use it
Half-screen icon close-up segments; A as the punctuation mark for "complete/success", B for introducing new features
Intent
The library's first batch in the icon-animation category: an icon is a performer being shot close-up, not a micro-interaction in a UI corner. A is the triple-burst of a confirmation moment — the big checkmark first contracts to 0.6x to build 3f, pops to 1.35x overshoot and settles back, and on the same frame 10 short line particles shoot from the center plus a ring outline spreads to 2.5× diameter and fades — "deploy success" isn't drawn, it's detonated; B is the macOS Dock vocabulary — the app icon hops in place 4 times, each higher (0.5→1.2× icon height), squashing on every landing (width 1.2x height 0.8x) + dust specks, and on the highest hop the camera pushes 8% toward it (drawn in), then a function panel pops open on settling — cutting "user attention" into the narrative.