Installation
Usage
import { AnimatedThemeToggler } from "@/components/ruixen/animated-theme-toggler";
export default function Header() {
return <AnimatedThemeToggler />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
sound | boolean | true | Enable switch-click audio on toggle |
Features
- Sun↔moon SVG morph — center circle swells while a mask carves the crescent
- 8 rays shrink and rotate away with spring physics on dark toggle
- Whole icon rotates 40° during transition for organic feel
- Spring button scale — hover inflates, tap compresses
- Switch-click audio — 6ms sine+noise burst for tactile feedback
- CSS custom property ink adapts to light/dark automatically
- Unique SVG mask IDs via
useId— safe for multiple instances - No shadcn, no lucide — only
motion/react