Chip Grid Single Select Blackout
Chip Grid Single Select Blackout 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-low (the only pop is that single gray flash; everything else is pulling back)
- Styles
- 1
Recipe notes
Five option chips, arranged 3+2 and centered, fade in one by one; at the selected frame a single gray press frame is inserted, then over a few frames the background flips pure black, the text flips white, and there's a very light 1→1.04→1 bounce-back, while the other chips dim to 18% with their positions locked; the remaining items then go to zero, the black chip lifts and narrows, and a calculation row fades in below
When to use it
Interactive demos of single-select / plan / tier selection; "what happens after you pick this" causal shots; price/parameter settlement-style flows
Intent
One gray flash plus three frames of inversion-to-black splits the real UI's `:active → :selected` two-level state into a performance. The viewer sees "finger pressed down" then "system confirms", not one gradient. The other chips drop to 18% but **never move position**: the moment they reflow, the viewer thinks the page refreshed and the "single-select" semantics are lost.