Scale
Scale grows an element from 90% to full size while fading in, for small floating surfaces.
Animates the scale transform and opacity; turn off the fade with animateOpacity={false}. Use appear to run the motion as soon as it mounts.
Small dialogScale grows from 90% while fading in.
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 { Scale } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
gentle / fast
no opacity
Enter/exit duration & animateOpacity
Enter slower than exit (gentle / fast), or scale only without changing opacity.
桜
appear
Runs the enter motion on the first mount (change key to run it again).
Usage
Do
- Use it for small surfaces that pop up: custom popovers, quick-view cards, illustrations.
- Pair it with an exitDuration shorter than duration.
Don't
- Don't scale large surfaces (pages, drawers). Use Slide.
- Don't keep scaling body text to draw attention.
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. |