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.
npx shadcn@latest add https://ui.aryank.space/r/flow-field-text.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 |
|---|---|---|---|
| items | FlowFieldItem[] | string[] | string | themed BLANK editorial copy | Columns of copy ({ text, title?, subtitle?, author?, label?, isNew?, url? }); hover and onSelect match by url. |
| onSelect | (url, item, index) => void | undefined | Fired when a column is tapped (a pointer press released without a drag). |
| background / textColor / accentColor | string | "#ffffff" / "#111111" / "#f0341f" | Field background, base glyph color, and hover accent. |
| monoFamily / serifFamily | string | Next Mono stack / Century Schoolbook stack | Field + badge monospace family (keeps glyphs on the grid) and the header serif family. |
| fontSize / lineHeight | number | 10 / 1.3 | Type metrics for the sampled grid. |
| speed / magnitude | number | 1 / 1800 | Drift time multiplier and peak displacement in pixels. |
| itemWidth / gutter / headerHeight | number | ~300 snapped / 10.4 / 265 | Column pitch, body left-indent, and the serif header band height (canvas starts below it). |
| hoverHighlight | boolean | true | Accent the column under the pointer and enable grab-cursor scroll. |
itemstextareaEditorial columns ({ text, title, subtitle, author, label, url }) tiled left to right. A bare string renders one column.
textColor / accentColor / backgroundcolorBase glyph color, hovered-column accent, and field background.
speed / magnitudetupleField drift multiplier and peak pixel displacement (source uses 1800).