Scatter Letter Intro
A landing sequence where a wordmark assembles, counts itself in, then scatters. The letters rise into place on a stagger, a three two one counter steps a single strip by exactly one line height per beat, and when it lands the type blows up to fifteen percent of the frame while six black panels wipe away in a random order to expose the video behind. In the same instant each letter is thrown to its own hand-authored vertical offset, so the wordmark comes apart into a composition rather than dispersing evenly. The letters use mix-blend-mode difference, so they invert against whatever the footage puts behind them.
npx shadcn@latest add https://ui.aryank.space/r/scatter-letter-intro.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 |
|---|---|---|---|
| wordmark / movements | string / number[] | FPKPXTF / 7 offsets | One movement entry per character. A shorter array leaves the trailing letters in place. |
| blockCount | number | 6 | Panels that wipe away in a random order to expose the video. |
| tagline / links / copyright | string / string[] / string | BLANK copy | Chrome that fades in after the scatter lands. |
wordmarktextLetters that assemble and scatter.
letterColorcolorLetter colour before blending.
gsap