Beautiful, smooth animations for theme switching in React applications.
Built with TypeScript and powered by the View Transition API.
Click any toggle below to experience the theme switch animations
Smooth expanding circle transition
Circle with elegant blur effect
Scanning line sweeps left to right
Optimized for high-resolution displays with smooth 60fps animations
Circle, blur circle, and QR scan effects with more coming soon
Works perfectly across all device sizes and screen resolutions
Respects prefers-reduced-motion and provides fallback experiences
Get started with just a few lines of code
import { useModeAnimation, ThemeAnimationType } from 'react-theme-switch-animation'
function ThemeToggle() {
const { ref, toggleSwitchTheme, isDarkMode } = useModeAnimation({
animationType: ThemeAnimationType.CIRCLE
})
return (
<button ref={ref} onClick={toggleSwitchTheme}>
{isDarkMode ? '🌙' : '☀️'}
</button>
)
}