Click anywhere and the other view spreads out as a circle from that exact point, chased by two thin rings. Built for theme switches and before and after toggles.
npx shadcn@latest add https://hyperblur.dev/r/transition-ripple-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-ripple-reveal.tsx.
import { TransitionRippleReveal } from "@/components/hyperblur/transition-ripple-reveal"
<TransitionRippleReveal label="Toggle dark mode" from={<LightCard />} to={<DarkCard />} />| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | built-in scene | The first view, shown while active is false. You can also pass two children instead of from and to. |
| to | ReactNode | built-in scene | The second view, shown while active is true. |
| active | boolean | Controlled state. False shows from, true shows to. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called whenever the view switches, including switches made by autoPlay. | |
| autoPlay | boolean | false | Switch back and forth by itself. Stops when the user prefers reduced motion. |
| interval | number | 2400 | Milliseconds between switches when autoPlay is on. Autoplay cycles through preset origins. |
| duration | number | 900 | Reveal time in milliseconds. |
| interactive | boolean | true | Toggle on click, Enter or Space. The frame becomes a button with aria-pressed. |
| label | string | "Switch view" | Accessible name of the frame when interactive. |
| accent | string | "#2f7bff" | Color of the rings and the tap dot. |