Chip Lift To User Pill
Chip Lift To User Pill 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
- ~5.0s (150f@30fps)
- Energy
- Medium (the selection moment is the hard hit; everything after is unhurried growth and typing)
- Styles
- 1
Recipe notes
The target chip in the grid hard-cuts to inverted black-on-white over 3 frames, the other chips fade out and shrink staggered by their Manhattan distance from it; the black chip grows rightward anchored at its left edge into a pill, typing out a name character by character and lighting a green dot, then a 1px connector line pulls over to a circular badge
When to use it
The "pick one out of a crowd and expand it" interaction chain; feature demos for collaboration/contacts/inbox-type products; selected → detail transitions
Intent
Give "selection" **two completely different textures**: the selection instant is hard (3-frame stepped inversion, like the real UI's `:active`), and what follows is soft (pill growth, character-by-character typing, the green dot lighting up). The other chips fading out staggered by distance tells the viewer "attention starts converging here" — distance ordering matters more than time ordering because it gives spatial causality.