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.
17 components
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.