Components / Dot Field Loader
Dot Field Loader
The working state of a surface that is loading or generating content — the Brand bento asset folders and the content generation cards. A muted dot matrix with a soft band of lit dots sweeping top to bottom: a scanner moving over work in progress, not a glow blob.
import { DotFieldLoader } from '@layers/ui/dot-field-loader'Rendered stock
House rules
- Every instance runs the identical sweep IN PHASE — no randomization, no per-tile desync (founder call 2026-08-06): the formation is the point.
- It draws dots, not a background — give it a surface to sit on (the Brand bento and the generation card both use the card plane). Two knobs, and only the knobs: --dot-field-ink re-inks both layers together (theme --foreground by default), and --dot-field-align re-registers both lattices together (center by default; the generation card anchors top left inside its 8px frame). Never set background-position on one layer — that misregisters the lit sweep dots from the base grid.
- It is a surface treatment, not a status signal: it says "being worked on", never how far along. Narration and percentages belong to the surface around it (a footer status line, a step label).
- Sized by its container (size-full): pass a className only to bound the box (min-h-56), never to restyle the dots. Its own unlayered position: relative outranks Tailwind position utilities — a host that needs the field absolutely positioned owns that in its stylesheet (see .post-preview).
- Reduced motion freezes the band at the field center rather than removing it.