Skew Char Header
Headlines that assemble character by character, skewed and thrown in from the right. The stagger is keyed to each character's index within its own line rather than its index in the whole heading, so every line starts its ripple at the same moment and multi-line copy reads as several parallel waves instead of one long queue. Three modes on the same component: play on mount, play once on entry, and scrub against scroll.
npx shadcn@latest add https://ui.aryank.space/r/skew-char-header.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | SkewCharSection[] | Three BLANK sections | Heading plus a mode of load, enter, or scrub, and the section's background and text colors. |
| stagger / duration | number | 0.05 / 0.65 | Delay between characters within a line, and how long each takes to arrive. |
| embedded | boolean | true | Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll. |
sectionstextHeading, animation mode, and colors per section.
stagger / durationtextPer-character delay and travel time.
gsaplenis