Value Stagger Gradient
Value Stagger Gradient is a ui entrance & showcase 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
- UI Entrance & Showcase
- Duration
- ~5.0s (150f@30fps)
- Energy
- Medium-high (the first beat is a continuous spread; the second beat's center pulse is a clear single peak)
- Styles
- 1
Recipe notes
16 bars' entrance delay is temporal staggering, while height/hue/displacement/blur each lay out a numerical gradient from first to last; a second beat switches the stagger origin to the center, re-spreading with the pulse amplitude largest at the center
When to use it
technique demonstration and parametrization-capability showcase; also directly usable as the entrance for data/spectrum/equalizer-type interfaces
Intent
Stagger is usually only used to offset time. This card's point is that it can also offset **values** — the same index decides both "when it moves" and "how far it moves". The two beats are a controlled comparison: the first beat's origin sits at the first position (gradient spread monotonically left to right), the second beat's origin moves to the center (gradient spread symmetrically from the middle). The viewer sees not two animations but one recipe with one parameter changed. The on-screen code caption swaps to the corresponding stagger call in sync, saying this explicitly.