React page section components
Larger layout blocks — pricing tables, changelogs, kanban boards, accordions and split panes — that structure a page rather than perform one action. Use these as the building blocks between a hero and a footer.
50 components
Indicator Rack
A plan selector built on the indicator-tablet rack of a pre-electronic cash register: four columns of ten printed tablets each, all ten always mounted, where changing the reading is a sort — the old tablet drops as the new one springs up, the two crossing mid-column 25ms apart — never a single glyph mutating in place.
Quoin Lockup
A bento grid whose only variable is pressure, not cell assignment: four quoins hold a fixed five-tile arrangement flush, pressure creeps down until a tile pies out of plane, and a quoin-by-quoin re-key — occasionally a full planer sweep — brings it back, forever.
Bobbin Lace Pricking
A decorative divider/empty-state motif: a narrow working band of pins twists thread pairs into locked crosses down a pricked grid, while a pin two rows behind the band is pulled free the moment its crossing has secured. The load-bearing, uncontested mechanic no other lattice sibling has.
Crack Polygon Order
A decorative panel fill that tiles itself the way drying mud actually cracks: widely-spaced primary cracks grow first, then two more generations nucleate inside the largest surviving cells after a 900ms stress-rebuild pause each, every new crack tip T-junctioning into an existing one at ~90 degrees instead of crossing it, until the mature tiling holds, rewets to blank, and a new unrelated cycle begins.
Cylinder Hill-and-Dale
A full-width section divider rendered as a side elevation of an Edison-style wax cylinder phonograph: a rotating cylinder carrying a static helical hill-and-dale groove, a lead-screw rail, and a stylus carriage the lead-screw advances axially in exact lockstep with rotation, one wrap of travel per one full turn, always, at any frame rate.
Delta Frame Macroblock
A quiet full-width band that visualizes a video codec's own P-frame change-detection decision: a grid of macroblocks sits mostly static, and every 220ms tick a small, capped subset is flagged changed with a brief outline flash and a slightly shifted tone while every other block is explicitly left untouched, exactly the sparse per-block change map a real codec decodes.
Edge Burnish Glaze
A full-width section divider modeled on leather-edge burnishing: a slicker sweeps back and forth along the edge on a constant-speed triangle wave, a per-cell gloss field saturating fast under its ~18px contact zone and decaying by how long it's gone unvisited, so mid-sweep cells hold the most sheen while the turnaround the stroke is heading back toward reads dullest right before it arrives. An uneven gradient, never a flat 'shiny bar.'
Equation Kidney Cam
A section divider whose midpoint tick rides a lookup table built from the real equation-of-time curve (an equation-marchante watch's kidney cam compressed to an 11s loop), sliding, slowing, and reversing direction with four unevenly-spaced zero-crossing brighten-pulses per cycle, never a symmetric back-and-forth.
Expansion Gap Breather
A full-height divider between two independently-sized layout regions, sourced from continuous-welded-rail breather switches: the seam's tapered-blade teeth interlock and slide apart as a rendered rail temperature swings the gap between 4px and 22px on a 14s cycle, actually resizing the element that sits between its neighbours rather than drawing over a fixed rule.
Millstone Furrow Flow
An ambient processing-section background modelled on a dressed millstone pair: a static bedstone furrow layer under a slowly rotating runner layer, their crossing sweeping a drifting moiré band around the stone, while grain particles spiral outward from the eye, shrinking as they grind finer, and disperse into fading meal dust at the rim.
Neon Tube Striation
A horizontal section divider rendered as the positive column of a lit glow-discharge tube: a traveling ionization-wave striation pattern drifts along its length while faint sputtering darkening deepens at both electrode ends over time.
Profilometer Trace
A section divider rendered as a live contact profilometer readout: a fixed stylus near the right edge while the measured surface's roughness-plus-waviness trace scrolls continuously beneath it, right to left, at a constant real-time rate, peaks and valleys passing under the tip forever.
Scroll Fine Register
A divider/footer band whose streaming motion is built from a real tilemap-PPU scroll: a fine register sweeps 0..cellPx-1 sub-pixel offsets across 480ms before a coarse register ticks a tile over, with both registers exposed as a live numeric coarse/fine readout beside the strip.
Warp Knit Tricot Lapping
An ambient divider/background texture whose guide bar shogs a short lateral distance every course, lapping each needle's thread diagonally across its neighbours to build a continuously-scrolling zigzag chevron field. The diagonal wale structure of warp knitting, distinct from a weft shuttle's full-width crossing.
Welt Channel Close
A full-width section divider modeled on Goodyear-welted shoe construction: a needle locks one welt stitch at a time at a single working point while, a few stitches behind it, the channel flap that exposed the last batch of stitches folds shut on a real CSS 3D hinge and hides them for good. The lockstitch is never drawn; only a plain flush seam is ever visible once a flap closes.
Arc Ladder Climb
A full-bleed section-divider background modelled on a Jacob's ladder: two rails diverge from a narrow base gap, a bright plasma arc strikes there, climbs the widening gap as it burns, dies near the top, and a fresh arc restrikes at the base almost immediately. This runs continuously, at a re-randomized ~1.6-2.2s cadence.
Divider Mosaic Split
A full-width section divider rendered in real NAPLPS 'separated mosaic' mode: the same 2-wide x 3-tall sextant sub-cell grid this registry's divider-teletext-mosaic already ships in contiguous mode, but every lit sub-cell block is drawn inset by a genuine luminance gap on all sides, so the band reads as a field of small floating tiles rather than a solid mosaic shape, painted by a left-to-right column-group write sweep.
Gravure Cell Wipe
A divider / background texture strip printed as a rotogravure cylinder: a static, seeded matrix of engraved cell depths sits under a doctor-blade band that sweeps and wraps every 20s, wiping the flooded land clean and leaving each cell's ink alpha at its depth-derived steady state, with a decaying brightness flash trailing every fresh pass.
Tray Weep
A full-bleed section-divider band built on a bubble-cap distillation column tray: a stack of trays froths continuously as vapor bubbles up through submerged caps, liquid creeps toward a weir and spills to the tray below, and any cap running short on vapor visibly weeps liquid back down through itself instead of bubbling.
Divider PETSCII VU
A full-width section divider printed as a PETSCII / C64 reverse-video VU meter band: every cell has exactly two states, paper or ink, never a density ramp, driven by a real 300ms-integrated amplitude envelope with a fast-attack/slow-decay peak-hold column and an AGC ceiling that keeps the meter legible at any input level.
Divider Telephone Cord Delam
A full-width section divider modeled on thin-film delamination buckling, a compressive-stress film debonding from its substrate and popping upward into the real 'telephone cord' morphology: a roughly constant-width ridge that telescopes side to side as its failure front advances and periodically re-forks, never a straight blister.
Divider Teletext Mosaic
A full-width section divider rendered as a real teletext / videotex ALPHAMOSAIC graphics band: each character cell is a 6-bit code across a 2-wide x 3-tall sub-cell 'sextant' grid, the actual broadcast alphamosaic addressing (distinct from this registry's 2x2 quadrant block dividers and 2x4 braille-dot components), painted row by row on a fixed cadence the way a real teletext page arrives off the broadcast signal.
Not Found Attribute Clash
A 404 built from the ZX Spectrum's real colour-cell attribute clash: each 8x8 hardware cell could carry only one ink/paper colour pair, so image detail finer than the cell budget visibly bled and blocked. This translates that as a monochrome glyph+weight budget (one glyph and one font-weight per cell), so the numerals' own curved edges snap and bleed at the seams, with a rolling scanline that re-decides a handful of rows per frame like attribute RAM racing the beam.
Night Store
A cache diagnostics rack where every key-group is a storage-heater brick holding heat: a hit charges it toward full glyph-density stipple, idle time cools it on a decay matched to its own TTL, and a real eviction contracts the rack by exactly one slot. Keys hit over and over flicker cold-hot instead of settling: the visual signature of a thrashing cache.
Cruet Settle
A checkout or invoice total settles like shaken vinaigrette: one agitated column stratifies by density into net, tax, fees and discount, each layer's height exactly its share of the sum.
Remnant Cut
A plan-change proration panel drawn as a draper cutting cloth: the used billing period dims and stays, the unused remnant slides into the new plan's row re-measured against its rate, and the cents lost to rounding render as a labelled sliver at the cut instead of vanishing into a footnote.
Weir Crest
A full-bleed pricing surface built as a spillway: three plans stand in one rising reservoir as dams of different crest heights, and the volume slider raises a single shared water level until a plan's crest is overtopped and pours, which is exactly the moment its overage starts costing money.
Brine Float
A pricing section built as one shallow tank: an SVG water line runs behind the whole tier row and each card is a hydrometer float riding it, heavier (cheaper) tiers sitting lower and the recommended tier riding highest, with the billing toggle changing the brine's density so a price change is felt as buoyancy.
Craze Rule
A section divider that arrives as a propagating, branching fracture instead of a static <hr>: a seeded random-walk SVG path with 3-5 near-perpendicular T-junction branches draws in once via IntersectionObserver on an ease-out-expo stroke-dashoffset, then keeps a faint 6s idle creep at rest.
Nomogram Edge
A two-input estimator built as a real paper nomogram: three vertical ASCII scales in Geist Mono where a straightedge stretched between draggable left and right handles crosses the middle scale at the exact computed answer, log-spaced so the crossing is mathematically exact rather than decorative. Scaled and paced as a pricing-page hero: a thick line springs into place on mount and the crossing idles through a few illustrative readings on its own before anyone touches it.
Board Kanban ASCII WIP
A kanban board drawn as box-drawing frames, each column header showing its card count against its WIP limit; going over turns the frame accent and appends the overflow count, mid-drag, before you release.
Compare Table Reach Rule
A tier comparison matrix where every feature row draws a real box-drawing rule that runs left-to-right and terminates with ┤ at the last tier that actually includes it, so the table's staircase of rule lengths is the comparison itself rather than a field of check glyphs.
FAQ Accordion
A plain FAQ accordion: real button semantics, one answer open at a time, a smooth height transition and a thin accent rail marking the open question.
Transition ASCII Dissolve
A layout transition swept by a user-driven, reversible dissolve front: outgoing content frays into a band of ASCII glyph noise ahead of the front, incoming content resolves out of that same noise behind it, and dragging the front back un-happens the transition exactly as far as you pull it.
Grid Bento ASCII
A 2x2 bento layout primitive built on its own content/seam track grid (a real vertical rule, horizontal rule and ┼ junction between the four tiles), where activating a tile re-spans it across every track, seam included, so the junction has nowhere left to be drawn.
Testimonial Wall Reflow
A masonry testimonial wall that physically reflows as you read: expanding one card's quote via 'read more' re-packs every other card into its new shortest-column slot, animated with a FLIP transform so only the cards that actually move ever animate.
Grid Bento Dense
A composable bento grid where activating a tile genuinely promotes it: the tile takes a 2x2 slot and every other tile re-packs around it via CSS grid-auto-flow: dense, FLIP-animated so the reflow reads as tiles sliding into new slots rather than jumping.
Accordion Latch
An accordion whose sections latch shut with a small SVG hasp-and-staple on each closed header: opening swings the hasp off its staple, lifts the lid 2px, then unfolds the content. Closing reverses and the hasp settles back down with a bounce.
View Toggle Rails
List/grid/board view switcher that draws a faint curved rail from every item's old slot to its new one and lets it ride that exact rail, releasing cards in reading order like cars cut loose over a classification-yard hump.
Not Found Postmark
A 404 rendered as returned mail: the failed URL addressed on an envelope that slides in, its routing history stamped hop by hop (edge, origin, router) as sequential ink postmarks, the last hop knocked down with a squash-and-settle NO SUCH ADDRESS hand-stamp and a 1px shake, then a forwarding-address label (search, home, recent pages) peels on as the real recovery page.
Transition Panel Crumble
A layout transition where the outgoing panel crumbles into a few thousand token-colored grains that fall under gravity, funnel toward the incoming panel's matching regions, and settle there while the crisp new DOM (already fully mounted and focused) shows through: conservation of matter made visible, an hourglass turn between a dashboard overview and its detail pivot.
Drawer Counterweight
Side drawer hung on a counterweight like a sash window: a thin track on the drawer's leading edge carries a weight pill that travels opposite the drag at -0.6x, and wherever it sits at release (before or past the tick) decides whether a spring pulls the drawer shut or bottoms the weight out and holds it open.
Reorder Drag Wake
Drag-to-reorder where the dragged row pushes a continuous falloff field through its neighbors: they shoulder sideways and the gap ahead widens before the card ever arrives, instead of a hard placeholder line.
Split Pane Weighted
Split-pane divider that carries real weight: drag it and the boundary trails the pointer like a counterweighted window sash, release with speed and it coasts into the nearest detent on a critically-damped spring; released slow and far from a stop, it just stays put.
Timeline Reasoning Rail
Collapsible agent-reasoning timeline: status lives entirely in the node glyph on a 1px vertical rail, steps stream in over time, and completed steps fold to a single line so a long run stays readable.
Empty State Dashed
Empty state whose dashed SVG boundary drifts like a plot marked out and not yet planted, and contracts toward the CTA on hover.
Pricing Scale
Pricing section rendered as a literal balance scale: two tier cards hang as pans from a canvas beam, billing toggle and feature checkmarks add weight, and beam-torque spring physics settles with one inertial overshoot to show which tier objectively outweighs the other.
Timeline Changelog Wave
Changelog timeline drawn as a beach strand: each release arrives as a foam crest sweeping an arc in from the now edge, breaks at its chronological position, pops a marker in with a spring, and recedes leaving an etched tide-ring. Later waves wash past older marks so ring density reads as event history.
Scroll Story Strata
Pinned scroll story: the viewport becomes a geological core cross-section and scroll drives a drill bit descending through procedurally banded strata, with content panels crossfading per band and a mono HUD ticking depth.
Not Found Knockout
404 numerals rendered as literal absence: destination-out punches the glyphs through a token surface plane to reveal a deep grain void with drifting motes, defined by a bright stencil bevel rim and an inner wall-light glow so the digits read instantly in both themes, edges springing outward near the cursor.