Gradient Transition
Gradient Transition is a transitions 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
- Transitions
- Duration
- ~6.0s (180f@30fps; linear 0–2.4s · radial 2–4.2s · conic 4–6s)
- Energy
- Low (pure background motion, yielding to the foreground content)
- Styles
- 1
Recipe notes
Background smoothly transitions among the three CSS gradient types linear, radial, and conic — angle, color stops, center, and radius each interpolate parameter-by-parameter, with short cross-fades between segments when switching types
When to use it
Continuous variations of an ambience/section background color; giving static typography sections a "living" background layer
Intent
A gradient is not a static texture but an animatable parameter set: any parameter inside the same gradient type can interpolate into a silky-smooth change, while cross-type switches are joined by a short cross-fade. Used as a background layer, it gives a section with "no subject motion" one continuous low-speed energy.