TypographyGenerated from the public API
ScrambleText
Reveal prose line by line as it enters the viewport, including the scramble variant.
@luc/ui/motionLive preview
Both modes reduce to an instant swap under `prefers-reduced-motion`; the text never ends up half-drawn.
MarketsrepriceinsecondsMarkets reprice in seconds
<ScrambleText text="Markets reprice in seconds" duration={0.9} />Usage
import { ScrambleText } from "@luc/ui/motion";<ScrambleText text="Markets reprice in seconds" duration={0.9} />API
| Export | Kind | Signature |
|---|---|---|
ScrambleText | 3 documented props | ({ className, text, duration: total, charset, ...props }: ScrambleTextProps) => import("@types/react").JSX.Element |
TextReveal | 6 documented props | ({ className, text, mode, delay, step, whenVisible, as, style, ...props }: TextRevealProps) => import("@types/react").JSX.Element |
ScrambleText props
Type: ScrambleTextProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
charset? | string | undefined | — | Characters used while scrambling. |
duration? | number | undefined | — | Length of the decode, in ms. |
text | string | — |
TextReveal props
Type: TextRevealProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
as? | "div" | "h2" | "h3" | "p" | "span" | "h1" | undefined | — | Element used for the wrapper. |
delay? | number | undefined | — | Seconds to wait before the first element enters. |
mode? | TextRevealMode | undefined | — | |
step? | number | undefined | — | Seconds between units, for `word`/`char`. |
text | string | — | The text to reveal. A plain string so it can be split deterministically. |
whenVisible? | boolean | undefined | — | Wait until the element scrolls into view instead of animating on mount. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Typography
Words that arrive, resolve or count themselves into place.
Related