KQ-1479 · LETTER/FIELD
Letter Field
A background of quiet capital letters in a grid, with your content on top: two slow waves with organic fronts sweep it, and where their narrow crests pass the letters roll over to new ones and glint, so a band of change travels through a page that otherwise stands still. Every few seconds a word surfaces where nothing covers it — its letters roll in on the cascade, land with a small drop on springs.recoil and take a heavier weight at full colour, hold, then break up back into the field. The pointer calms the letters near it (place on springs.glide, presence on springs.drift) and holds any word it rests on; keyboard focus on a control inside brings the calm there.
Fieldline Journal
Words worth slowing down for
Issue 14 · eleven long reads
field shifting · rate 1.0
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/letter-field
Props
- children
- React.ReactNode
- default —
- The content on top of the letters: a hero line, a heading, a call to action.
- rate
- number
- default 1
- The field's clock, 0 (held) to 2: how fast the waves of change travel and how often words surface.
- words
- "studio" | "garden" | "harbor" | "none" | readonly string[]
- default "studio"
- What surfaces: a named set of words, your own list of single words, or "none" for letters only.
- color
- "ink" | "accent" | "signal" | "ember" | string
- default "ink"
- The ink: a named token colour or any CSS colour. Idle letters are this, sunk toward the page; words are it at full strength.
- size
- number
- default 15
- Letter size, px (10 to 32).
- font
- "sans" | "mono"
- default "sans"
- The inherited sans or the mono face.
- glyphs
- string
- default "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
- The letters the field draws from.
- dim
- number
- default 0.66
- How far idle letters sink into the page, 0 (as strong as words) to 1 (barely there).
- hold
- number
- default 2400
- How long a formed word stays readable, ms of field time.
- maxWords
- number
- default 2
- Words readable at once, 0 to 4.
- avoidCovered
- boolean
- default true
- Words only surface where nothing opaque or textual in your content covers them.
- interactive
- boolean
- default true
- The pointer and keyboard focus calm the letters near them.
- pointerStrength
- number
- default 0.85
- How still the letters under the hand go, 0 to 1.
- radius
- number
- default 120
- How far the hand's calm reaches, px.
- paused
- boolean
- default false
- Hold the field and its words where they are.
- seed
- number
- default 1
- Seeds the letters, the waves and where words land.
- dpr
- number
- default 2
- Cap on the canvas's device pixel ratio, at most 2.
- onWord
- (word: string) => void
- default —
- Fires with each word once it has fully formed.
- onActiveChange
- (active: boolean) => void
- default —
- Fires when the pointer or keyboard focus starts (true) or stops (false) calming the field.
- className
- string
- default "h-full w-full"
- Sizes and shapes the box.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The content on top of the letters: a hero line, a heading, a call to action. |
| rate | number | 1 | The field's clock, 0 (held) to 2: how fast the waves of change travel and how often words surface. |
| words | "studio" | "garden" | "harbor" | "none" | readonly string[] | "studio" | What surfaces: a named set of words, your own list of single words, or "none" for letters only. |
| color | "ink" | "accent" | "signal" | "ember" | string | "ink" | The ink: a named token colour or any CSS colour. Idle letters are this, sunk toward the page; words are it at full strength. |
| size | number | 15 | Letter size, px (10 to 32). |
| font | "sans" | "mono" | "sans" | The inherited sans or the mono face. |
| glyphs | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ" | The letters the field draws from. |
| dim | number | 0.66 | How far idle letters sink into the page, 0 (as strong as words) to 1 (barely there). |
| hold | number | 2400 | How long a formed word stays readable, ms of field time. |
| maxWords | number | 2 | Words readable at once, 0 to 4. |
| avoidCovered | boolean | true | Words only surface where nothing opaque or textual in your content covers them. |
| interactive | boolean | true | The pointer and keyboard focus calm the letters near them. |
| pointerStrength | number | 0.85 | How still the letters under the hand go, 0 to 1. |
| radius | number | 120 | How far the hand's calm reaches, px. |
| paused | boolean | false | Hold the field and its words where they are. |
| seed | number | 1 | Seeds the letters, the waves and where words land. |
| dpr | number | 2 | Cap on the canvas's device pixel ratio, at most 2. |
| onWord | (word: string) => void | — | Fires with each word once it has fully formed. |
| onActiveChange | (active: boolean) => void | — | Fires when the pointer or keyboard focus starts (true) or stops (false) calming the field. |
| className | string | "h-full w-full" | Sizes and shapes the box. |