127+ Primitives
Animated Theme Toggler
ButtonsUltra-smooth theme toggler utilizing the modern View Transitions API with fluid liquid, wave, and organic curve reveal transitions, viscous Apple-inspired easing, tactile micro-ripples, and a kinetic morphing SVG Sun/Moon icon.
View Transitions APILiquid PhysicsWave TransitionsMicro-AnimationsA11y Ready
Click icon to trigger liquid-blob liquid reveal
Multi-harmonic wave undulation with fluid decelerationSpeed:
Size:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/animated-theme-toggler.json"
Props
TypeScript props supported by <AnimatedThemeToggler />.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "liquid-blob" | "ocean-wave" | "waterfall" | "tide-sweep" | "tide-sweep-left" | "concentric-ripple" | "liquid-droplet" | "goo-melt" | "aurora-wave" | "bubble-burst" | "fluid-curtain" | "whirlpool" | "circle" | "liquid-blob" | Organic liquid, wave, or curved transition reveal pattern. |
| duration | number | 520 | Duration of the View Transition clip-path animation in milliseconds. |
| easing | string | "cubic-bezier(0.22, 1, 0.36, 1)" | CSS timing function for the transition. Defaults to fluid viscous deceleration curve. |
| fromCenter | boolean | false | When true, expands outward from the center of the viewport rather than from the button's click coordinates. |
| theme | "light" | "dark" | undefined | Controlled theme value when integrated with next-themes or state stores. |
| onThemeChange | (theme: 'light' | 'dark') => void | undefined | Callback fired when the toggle completes state change. |
| size | "sm" | "md" | "lg" | "md" | Dimensions of the circular button and inner SVG icon. |
| glow | boolean | true | Renders an ambient theme-colored halo glow behind the toggle button. |
| className | string | undefined | Additional CSS classes merged via cn utility. |
Key Features
- 12 organic liquid and wave transitions: Liquid Blob, Ocean Wave, Waterfall, Tide Sweep (Left/Right), Concentric Ripple, Liquid Droplet, Goo Melt, Aurora Wave, Bubble Burst, Whirlpool, and Fluid Curtain.
- Fluid multi-harmonic undulation: computes 36-40 polygon vertices with multi-step keyframes so waves undulate, roll, and crest naturally across the screen during the transition.
- Tactile button micro-physics: spring squish on tap (stiffness: 450, damping: 16) with an expanding internal liquid ink drop on click.
- Viscous fluid easing: defaults to cubic-bezier(0.22, 1, 0.36, 1) for natural fluid inertia and soft viscous deceleration.
- Kinetic Morphing Icon: pure SVG morphing transition with animated SVG mask crescent, 8 kinetic sun rays that pop with spring physics, and twinkling stars for night mode.
- Precision percentage coordinates: uses percentage-based clip-path calculations to prevent coordinate drift across fractional Windows display scaling (125%, 150%, 175%).
- Graceful degradation: detects document.startViewTransition and user's prefers-reduced-motion, falling back cleanly to instantaneous or subtle crossfade changes on unsupported browsers.
Keyboard & Accessibility
- Semantically rendered as an accessible button with role='switch' and aria-checked attribute.
- Keyboard accessible with focus-visible rings and full Enter / Spacebar activation.
- Honors prefers-reduced-motion media query by bypassing screen-wide clip-path geometry sweeps.