PRO

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.

Component

©2026

Scroll to explore

F

P

K

P

X

T

F

3
2
1

For 20 years we have been providing technical support services for large scale events

Install
npx shadcn@latest add @compronents/scatter-letter-intro

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
API
PropTypeDefaultDescription
wordmark / movementsstring / number[]FPKPXTF / 7 offsetsOne movement entry per character. A shorter array leaves the trailing letters in place.
blockCountnumber6Panels that wipe away in a random order to expose the video.
tagline / links / copyrightstring / string[] / stringBLANK copyChrome that fades in after the scatter lands.
Customize
wordmarktext

Letters that assemble and scatter.

letterColorcolor

Letter colour before blending.

Dependencies
gsap