Getting Started
Templates
Components
Special Effects
Animations
Text Animations
Backgrounds
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"<AnimatedThemeToggler />Use variant to change the clip-path shape of the view transition (circle, square, triangle, diamond, rectangle, hexagon, or star):
<AnimatedThemeToggler variant="star" />Expand from the viewport center instead of the button with fromCenter:
<AnimatedThemeToggler variant="hexagon" duration={600} fromCenter />The preview at the top of this page uses the default circle reveal. Below, each variant has its own isolated preview so you can test one shape at a time.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional classes for the button |
duration | number | 400 | Duration of the theme transition animation in milliseconds |
variant | TransitionVariant | "circle" | Shape used for the view-transition clip-path reveal |
fromCenter | boolean | false | If true, the clip expands from the viewport center instead of the button |
Export TransitionVariant from the same module when you need typed props or menus.