Text enters with a quiet preset: fade, blur, slide, or scale. Split by character, word, line, or the whole string.
Quiet motion, one piece at a time.
420ms
35ms
tsx
import { Reveal } from "@/components/motion/reveal"export function Example() { return ( <Reveal animation="blur-up" by="character" duration={420} stagger={35} className="text-2xl font-medium tracking-wide text-foreground sm:text-3xl" > Quiet motion, one piece at a time. </Reveal> )}Installation
npx @arctis-sh/@arctis-sh/ui@latest add revealUsage
import { Reveal } from "@/components/motion/reveal"<Reveal animation="blur-up" by="character"> Quiet motion, one piece at a time.</Reveal>API Reference
Reveal
| Prop | Type | Default |
|---|---|---|
| text | string | — |
| children | ReactNode | — |
| animation | fade, blur, blur-up, slide-up, slide-left, scale | blur-up |
| by | character, word, line, text | character |
| duration | number | 420 |
| stagger | number | 35 |
| delay | number | 0 |
| play | number | 0 |
| startOnView | boolean | true |
| once | boolean | true |
| as | ElementType | p |
| segmentClassName | string | — |
| className | string | — |
Also accepts the other native element attributes for as. duration and stagger are in milliseconds. Pass string children or text. Bump play to replay.