Blur & Rotate
Blur goes from blurry to sharp and Rotate turns an element from -90° into place: two emphatic presence motions.
Same API as Fade (visible, appear, unmountOnExit, duration…). Blur uses the blur-md filter; Rotate uses the rotate property and turns the other way in RTL. Use them to swap an icon in place (play/pause) or to bring in an illustration once it has loaded.
Blur
Rotate
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Blur, Rotate } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Swapping icons with Rotate
Two Rotates stacked in one grid cell: the old icon rotates out while the new one rotates in.
幽玄 — a deep, quiet beauty that is hard to put into words.
Blur on appear
appear + duration="slow" so large text comes into focus gradually.
Usage
Do
- Use them sparingly: one motion accent per view.
- Keep the duration at fast when swapping an icon inside a button.
Don't
- Don't blur text people need to read right away.
- Don't rotate large elements or elements with a lot of text.
Props
| Prop · Type | Default | Description |
|---|---|---|
| visibleboolean | Default: — | true runs the enter motion; false runs the exit motion. |
| appearboolean | Default: false | Runs the enter motion on the first render (when visible = true). |
| unmountOnExitboolean | Default: false | Removes the element from the DOM once the exit finishes. When false, the element is hidden (visibility: hidden). |
| duration"faster" | "fast" | "normal" | "gentle" | "slow" | Default: "normal" | Enter duration, mapped to the --durationFaster … --durationSlow tokens; easing --curveDecelerateMid. |
| exitDuration"faster" | "fast" | "normal" | "gentle" | "slow" | Default: = duration | Exit duration; easing --curveAccelerateMid. |
| onMotionFinish(direction: "enter" | "exit") => void | Default: — | Called when a motion phase ends. |
| childrenReactElement | Default: — | A single element. It receives the motion classes through Slot. |
| animateOpacityboolean | Default: true | Fades as well (both Blur and Rotate). |