Effects
Effect - Theme switch
A day/night toggle that sweeps the palette in on a growing gradient instead of hard-cutting. Keeps its own local theme state.
- Gradient reveal
- Web Animations clip-path
- Self-contained theme
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
A day/night toggle changes the palette, but instead of cutting instantly it sweeps the new theme in behind a growing gradient. The reveal is driven by a Web Animations clip-path that expands across the surface, and the component holds its own local theme state so it works as a self-contained demo.
When to use it
- A theme or dark-mode toggle where the switch itself should feel polished
- A settings or appearance control that benefits from a smooth animated transition
- Any place you want changing the palette to feel like a deliberate, designed moment
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 2 options
startStarting theme - 200-900ms
speedReveal speed
Related components
Using this block
Buy it, then copy components/blocks/theme-switch/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.