Theme Switch Moves
Theme Switch Moves 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
- A 3–4s / B 5–6s
- Energy
- A Medium / B Medium-high (the combo piece has a complete causal chain)
- Styles
- 2
Recipe notes
Theme switching in two variants — theme-sweep, a diagonal sweep (the interface reskins in place where the boundary passes), and palette-ripple, the combo piece (the ⌘K palette shrinks to a point and a ripple spreads from that point to reskin)
When to use it
Narrative passages for dark mode/theme features; the same UI "changing color before your eyes" rather than cutting to a new scene
Intent
Two ways to shoot a light/dark mode switch. A (the Notion/Figma/Linear staple): a 15° diagonal boundary with a bright line sweeps from top-left to bottom-right, and the light theme reskins **in place** as the boundary passes, with both themes coexisting for an instant in the same layout — the viewer sees "the same UI reskinned", not a transition. B (combo variant): the ⌘K palette types "dark" and presses Enter, the palette shrinks into a single bright point, and a dark ripple **spreads outward from that point** across the whole UI — the "command causes the reskin" causal chain reads completely. Combo linchpin: the ripple's center must be the palette's shrink point, and its start frame must be the shrink-completion frame.