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 https://ui.aryank.space/r/scatter-letter-intro.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

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