ComponentsReveal
Slice reveal
The title arrives in offset horizontal slices.
Installation
$ npx shadcn@latest add @textlab/slice-revealNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { SliceReveal } from "@/components/textlab/slice-reveal/slice-reveal";
<SliceReveal as="h2" variant="8" text="Registered" />Variants
538Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "3" | "5" | "8" | "5" | Number of horizontal slices. |
| offset | number | 0.35 | Starting distance of each slice as a share of the width. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| stagger | number | 0.05 | Seconds between parts. |
| duration | number | 0.8 | Seconds each part takes. |
| ease | EaseName | [number, number, number, number] | "emphasized" | Easing token or cubic bezier. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Bold single-line display type, posters and title cards.
- Brands with a print or editorial feel.
Skip it
- Text that wraps onto several lines; slices are cut across the whole block.
- Small sizes where slices are thinner than a stroke.
Accessibility and motion
Accessibility
- The slices are aria-hidden copies; screen readers read the text once.
- An invisible copy reserves the exact size, so nothing shifts.
Motion
- Slices alternate direction and start 50 ms apart.
- Opacity resolves early so the shape reads before the slices align.
Reduced motion. Shows the line whole and still.
Performance
- N copies of the text, each with a static clip-path and a transform.