Segmented Thumb Hero
Segmented Thumb Hero is a interaction & feature demo 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
- Interaction & Feature Demo
- Duration
- ~3.5s (demo 110f: float-in 18f + cursor 24f + click + 8f slide + icon pop + hold)
- Energy
- Medium (micro-interaction close-up, refined rather than explosive)
- Styles
- 1
Recipe notes
A segmented control's thumb displacement takes the hero close-up — an oversized capsule segmented control springs in, an outlined-arrow cursor slides in from off-frame and presses, the white thumb slides to the other segment in 8f ease-out, and at the moment it lands a new icon springs out while the old icon retracts
When to use it
Announcement shots for "mode switch / pick one of two" features (Ask→Computer, Chat→Agent style); a close-up style where one UI micro-interaction carries an entire shot
Intent
The usual way to shoot a product switching to a new mode is replacing the whole interface. This card does the opposite: blow the segmented control up to 1080px wide in close-up, and **those 8 frames of thumb displacement are themselves the narrative** — "we moved from A to B". No page context at all; the control is the stage. The causal chain is complete: cursor slides in (someone arrived) → press + ripple (a decision was made) → thumb slides (the world responds) → new icon pops out (a new identity is established). All four beats are indispensable: without the cursor, the UI moves on its own; without the icon pop, the switch has no reward.