Motion for the components you already have

import { Button } from "@wunderui/react"

<Button className="wm wm-halo-ring">Pro plan</Button>

An effect class on its own still animates, but it will not obey the trigger attribute and it will not stop for prefers-reduced-motion. Use both.

{/* entrances, data and feedback play once and hold their end state */}
<Card className="wm wm-dialog-lift">…</Card>

{/* ambient effects, rims and loaders loop */}
<Badge className="wm wm-sweep-rim">Live</Badge>

{/* opt into the loop for an effect that plays once */}
<Card className="wm wm-bar-rise" data-wm="loop">…</Card>

{/* runs only while hovered or keyboard-focused */}
<Button className="wm wm-comet-rim" data-wm="hover">Hover me</Button>

{/* an effect on a part runs while its control is hovered */}
<Button data-wm-trigger>Download <Download className="wm wm-arrow-fall" data-wm="hover" /></Button>

{/* one pass of any effect, then it holds its end state */}
<Card className="wm wm-prism-card" data-wm="once">…</Card>

Played once, an effect ends on its visible end state — the dialog stays open, the bars stay up. A state effect (a hover lift, a pressed button, a tab underline) is a transition between states you set, so it follows your component instead of a clock. data-wm-loop on a wrapper makes everything inside loop, which is what a style guide or a page like this one wants.

hover removes the animation rather than pausing it. A paused animation rests wherever it happened to be, which reads as a rendering bug; removing it puts the element back in its own base state.

• Tailwind CSS v4 is not required. The effects are plain CSS and work in any stylesheet. The import line above uses the Tailwind entry point only because that is where the WunderUI tokens already are.
• A handful of effects need a little JavaScript. The ones marked CSS + a few lines read pointer coordinates into two custom properties, or step a glyph timer. The code is on the effect's own page — it is not hidden in a package.
• Motion for React is an optional peer. Nothing in this package imports it. It earns its place when an animation has to be interruptible mid-flight, follow a gesture, or survive a layout change — a CSS keyframe cannot do any of those. Everything catalogued here can be done without it.
• Reduced motion is handled for you. Under prefers-reduced-motion: reduce every wm effect stops, and every effect’s base state is its visible end state: the dialog is open, the chart is drawn, the tick is ticked, a rim keeps its gradient and stops turning. Nothing is hidden and no state is lost. Loaders keep a slow opacity pulse instead of freezing, because a frozen loader reads as a hang.

Support checked September 2026.