PRO

Flow Field Text

A rebuild of the schemasofuncertainty.com home page. Editorial columns tile across a horizontally drag- and wheel-scrollable strip: serif headers (a NEW or type badge, a byline, an uppercase title with optional subtitle) sit above each column and translate in lockstep, while the body copy is drawn as a monospace character grid where every cell reads its glyph from a position pushed by an animated 3D simplex-noise displacement field. Legible text smears, duplicates, and dissolves into scattered fragments toward the bottom, then reforms as it breathes; a quadratic vertical mask keeps the top rows sharp. The canvas never moves, it re-samples at the scroll offset, so text flows sideways as you drag. Hover a column to pull it into an accent color, tap it to fire onSelect, and because color follows the sampled character rather than the cell, the accent bleeds across a border wherever the field borrowed a neighbor's letter. Uses the exact josephg/noisejs simplex3 and displacement constants. No dependencies.

Component
NEW
Mara Ellison
MODELLING UNCERTAINTY: A Field Introduction
NEW
J. R. Okonkwo
ON NOISE AS A MEDIUM
TXT
Priya Nair
MAPS, FORECASTS, AND THE COST OF CERTAINTY
TXT
Tomas Vidal
READING AS RECONSTRUCTION
NEW
Lena Fischer
THE HONEST INTERFACE: Notes on Doubt
TXT
The BLANK Studio
LEGIBILITY IS A THRESHOLD
Install
npx shadcn@latest add https://ui.aryank.space/r/flow-field-text.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
itemsFlowFieldItem[] | string[] | stringthemed BLANK editorial copyColumns of copy ({ text, title?, subtitle?, author?, label?, isNew?, url? }); hover and onSelect match by url.
onSelect(url, item, index) => voidundefinedFired when a column is tapped (a pointer press released without a drag).
background / textColor / accentColorstring"#ffffff" / "#111111" / "#f0341f"Field background, base glyph color, and hover accent.
monoFamily / serifFamilystringNext Mono stack / Century Schoolbook stackField + badge monospace family (keeps glyphs on the grid) and the header serif family.
fontSize / lineHeightnumber10 / 1.3Type metrics for the sampled grid.
speed / magnitudenumber1 / 1800Drift time multiplier and peak displacement in pixels.
itemWidth / gutter / headerHeightnumber~300 snapped / 10.4 / 265Column pitch, body left-indent, and the serif header band height (canvas starts below it).
hoverHighlightbooleantrueAccent the column under the pointer and enable grab-cursor scroll.
Customize
itemstextarea

Editorial columns ({ text, title, subtitle, author, label, url }) tiled left to right. A bare string renders one column.

textColor / accentColor / backgroundcolor

Base glyph color, hovered-column accent, and field background.

speed / magnitudetuple

Field drift multiplier and peak pixel displacement (source uses 1800).

Dependencies
None.