Flux
A word slot that cycles by melting — the outgoing word sags through a bright white heat-blur while the incoming word solidifies from the same blur, with a hairline neutral underline that stretches to each new width like drawn wire.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/fluxManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | Words or short phrases to cycle through. | |
| interval | number | 2600 | Milliseconds each word holds before smelting into the next. |
| transitionDuration | number | 0.7 | Seconds the melt/solidify crossfade takes. |
| loop | boolean | true | Restart from the first word after the last. |
| paused | boolean | false | Freeze cycling on the current word. |
| onIndexChange | (index: number) => void | Fired whenever a new word becomes current. | |
| heatColor | string | soft white | Halo the outgoing/incoming glyphs glow with mid-transition. |
| underlineColor | string | neutral-400 | Hairline underline color. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"span">, "children"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.