React chart and data display components
Charts, sparklines, tables, KPIs, timelines and other components that render a data set or a live feed. Reach for one when the job is showing numbers or records, not collecting them.
80 components
Flying Splice
A logo ribbon whose real subject is the roll stand feeding it: one paper roll unwinds at constant web speed, so its radius falls to 0.426 of full while its RPM more than doubles (2.35x — 0.61 to 1.43 rev/s at the demo's 672x220 band), then rebuilds along the exact time-reverse of the same law and slows back down. An unbroken 22s oscillation with no reset, no pop and no second roll.
Barograph Drum Week
A card-scale status widget modelled on the aneroid barograph: a pen arm inches rightward across pre-ruled seven-day chart paper, its ink trail lengthening continuously while faint day/hour gridlines (printed on the paper, never drawn by the pen) pass beneath it, reading as "this has been running, unattended, for a long time."
Carbon Ply Fade
Activity feed rendered as a carbon-paper multi-part form: one strike lands on the top ply at full density and echoes down through 4-5 contiguous, fully-visible ply rows, each registering 90ms after the one above at 0.68x the density, matching real pressure-copy force dissipation through a stack.
Sleeper Renewal Relay
An ambient row-level 'processing/refreshing' indicator built from mechanised sleeper-renewal trains: a crawling gantry crane lifts one old sleeper clear, swings a new one into the gap, and clips the rail down before advancing to the next tie. Old-vs-new is a continuous wear gradient across the 8-row stack, not a binary flag, so it never blinks.
Turbidite Graded Bed
A card-scale ambient timeline where each irregular flow-pulse event deposits one new sedimentary bed at the top of a growing stratigraphic column: coarse grains settling first at a sharp, erosively-scoured base and fining continuously upward to a fine cap, stacking pulse by pulse forever with the oldest beds slowly compacting and scrolling off the bottom.
Termite Ventilation Shafts
A full-bleed ambient background modeling Macrotermes mound thermosiphon ventilation: a fixed network of surface ridge conduits, generated once from a central chimney and never re-grown, visibly fills and drains with flow in alternating directions over a slow 42s diurnal cycle driven by a rising and falling temperature differential.
Jominy Quench
A hardenability comparison card built on the real ASTM A255 / ISO 642 Jominy end-quench test: a water jet sprays one end of a heated steel bar continuously, a directional quench front creeps up the bar, and hardness falls off with distance from that face along a curve that is each alloy's signature, drawn beside a real numeric table so the comparison never lives only in the picture.
Bowditch Close
A geofence/traverse polygon editor built like a real closed survey traverse: the last click never auto-snaps to the first, the gap between them is drawn as the misclosure, and Balance runs the 1807 Bowditch compass rule to redistribute it across every leg in proportion to its length.
Hachure Fall
A route elevation profile drawn as 18th-century military engravers drew slope: strokes perpendicular to the profile line, hanging down the fall direction, whose length and density both derive from local grade. No colour ramp, no vertical-exaggeration slider.
Index Contour
A travel-time reach editor: one slider handle sets minutes, and the reach renders as topographic-style contour bands re-thresholded from a real per-node cost field via marching squares, with every third line heavier and labelled inline in a break in its own stroke.
Pecked Ring
A geofence radius editor whose circle is drawn in pecked chart line-work where each dash is exactly 100 metres of ground circumference, so dragging the handle outward visibly grows the dash count and the radius reads by eye with no scale legend.
Creep Span
An SLO error-budget meter drawn as a taut wire spanning the card, which sags by irreversible plastic creep: sustained burn above 1x permanently sets the wire, so a bad day three weeks ago stays a visible kink it never recovers from, and the dashed forward extrapolation's floor intersection is the projected exhaustion date.
Fusee Cone
A burn-rate alert policy editor built as a clock fusee: error budget is the mainspring barrel, a chain rides down a tapering cone as budget depletes, and alert sensitivity at any budget level is the cone's local radius, authored by dragging exactly 4 monotone control points, with a real multi-window rule table derived from the shape.
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.
Passing Loop
A progressive-rollout controller built as a funicular: two cars share one cable over a summit pulley, so the new version's share and the old version's share are geometric complements that can never disagree. A canary hold pins the midpoint until confirmed, and rollback releases the winch to fall back under damped physics.
Running Belay
A deploy pipeline drawn as a climbing pitch: stages are protection anchors bolted up a vertical line, the current deploy is the climber-end of a rope clipped through every passed anchor, and rollback is a fall arrest that catches at the last healthy anchor with visible rope stretch.
Clock Card Rack
A catch-up digest as a punch-clock card rack: one bordered card per collaborator, unread bursts holding the card proud of a shared top datum by up to 6px until a real 'Mark caught up' button settles it flush.
Growth Ring
Version history as a dendrochronological cross-section: one ring per save, ring width proportional to change size, a dark line wherever authorship changed hands, and restoring an older version previews the discard as outer rings hinging open before you confirm.
Routing Slip
A multi-party approval ledger styled as an interoffice routing slip: names print in fixed routed order, signing presses an ink chop beside your name, and signing out of turn lands visibly skewed with a written note rather than being hidden or blocked.
Vellum Scrape
A version-history rail styled as scraping vellum: dragging a vertical depth slider reveals each paragraph's overwritten text exactly where it lived, in real selectable DOM, with a per-run restore control to re-ink an old passage as the document's true content.
Zipper Stall
Merge resolution staged as closing a zipper: two columns of timestamped edit ops, meshed by dragging a handle down the spine that physically jams at the first same-offset conflict until you pick a side.
Tacho Disc
Today's security activity as one rotating polar disc under a fixed stylus: sign-ins, permission grants and revocations scribed at their true time-of-day angle, radius by category, older days stacked behind as dimmer discs. Dragging or arrowing it scrubs a real, bound event list.
Tally Cleave
An org invite list where each invite is a split wooden tally: a jagged seam cut from the invite's own token, the org keeps a solid stock, and accepting slides the matching foil home so the grain lines cross the seam and prove the match.
Rupert Snap
A hash-chained audit log drawn as a chain of Prince Rupert's drops, one per entry, each drop's tail fused into the next drop's head. Tampering with an entry re-derives every hash from that row down, and a single wavefront detonates the drops strictly tailward from the break: later entries shatter because they depend on the edited one, and nothing above it moves.
Forage Vein
A hero background where a Physarum-style plasmodium forages the page's own content boxes: trail-following agents flood out from the headline, CTA and logo row, fat veins form where deposition keeps outpacing decay, and starved or moved food sources visibly retract and regrow with no scripted path underneath.
Contra Strike
Order line-item ledger where a partial refund drags a struck span across the amount bar and, on commit, appends a negative contra row beneath the original, which is never edited, only ever struck through and kept legible.
Crossfoot Gap
An editable invoice grid that validates itself the way a bookkeeper crossfoots a ledger: row totals right of a vertical rule, column totals under a horizontal one, and a corner gap whose width (not a warning icon) carries the size of the mismatch.
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.
Punch Figure
An issued amount punched through the sheet as a dot matrix by a single left-to-right head pass: subtractive, permanent, and correctable only by a second pass punching VOID diagonally across it.
Spindle Strike
Payment history as a diner-receipt spindle: settled transactions pile up impaled on a shared 1px spine, and a refund doesn't remove the card. It pulls the same pierced node a few px back up the spine with its puncture elongated into a slot.
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.
Eval Delta Table
Two eval runs compared case by case: a table of baseline, candidate and signed delta, sorted by delta, with a diverging bar per case drawn off a labelled zero axis.
Gantt ASCII Critical Path
An ASCII Gantt chart where a real CPM forward/backward pass decides which bars are critical: zero-float tasks draw heavy `━` in accent, the rest light `─`, and dragging a task re-runs the pass so the critical chain moves.
Prompt Version Grid
A table of prompt blocks against releases: one filled cell wherever that block changed in that release, blank where it did not, plus each version's total token count.
Retrieval Chunk Sieve
RAG retrieval as a literal sieve: one hard rule across the frame with the chunks that cleared the similarity cutoff resting solid above it and the rejects falling as faint stubs below, and a connector rail that separates what was merely retrieved from what the answer actually used.
Router Tier Cascade
Model routing drawn as a cascade of weirs: one hairline row per model tier, each with a spill notch at its cost ceiling, so a request that a cheap tier can't hold visibly spills down a row and every escalation and its price are readable in one still frame.
Boxplot ASCII Whisker
ASCII-textured boxplot family with one shared fence handle: dragging or keying it re-cuts every box's whiskers live against the real sample, and outliers fade in or reclassify back into the whisker as the cut moves.
Chart Scatter ASCII Bin
Two-dimensional scatter plot rendered as a glyph-density grid, with a pointer- or keyboard-driven brush that live re-bins the exact points under it and reads out the selection.
Chart Waterfall ASCII Step
ASCII-ramp waterfall chart where toggling a step excludes or restores its delta and every bar after it (plus the running total) visibly recomputes and re-animates, not just a hover tooltip.
Map Choropleth ASCII
ASCII-density choropleth over a fully synthetic hand-seeded tessellation. Hovering or keying through a region isolates it and the legend rescales to a band around its value.
Sankey ASCII Flow
A weighted, branching multi-stage flow diagram rendered as ASCII density bands instead of colour ribbons. Clicking a node isolates every ancestor and descendant on its path: the surviving nodes and bands re-stack from scratch using only the isolated subset's values, so they genuinely grow to fill the space rather than the rest just dimming.
Treemap ASCII Partition
A recursive slice-and-dice treemap where every rectangle's interior is filled with an ASCII density ramp keyed to its value instead of a colour scale. Clicking a rectangle with children descends into it, recomputing the partition over just its children; a breadcrumb (or Escape) climbs back out to any ancestor.
Chart Bar Dither
Canvas bar chart in ordered-dither ink density, where hovering or focusing a bar pulls it into sharper resolution while the rest ease back to a coarse print.
Chart Funnel Stage Drop
Canvas funnel chart in ordered-dither ink density, where hovering or focusing a stage animates its own drop-off as ink particles falling into the next stage.
Chart Line Dither
Canvas line/area chart in ordered-dither ink density, where a scrub cursor drags a local higher-resolution loupe through the fill as it moves.
Chart Radar Dither
Canvas radar/spider chart in ordered-dither ink density, swept by a continuously rotating radar line that locally resolves each axis wedge to sharper ink as it passes.
Marquee Ticker Glyph
A grabbable ticker tape: drag to scrub through its content, release to fling it with momentum, and legibility itself is a function of speed. Fast motion blurs characters into noise glyphs, slowing down resolves them back into real text.
Stat Tile ASCII Arrive
A KPI number whose arrival is ink condensing into a glyph: every dot of a 5x7 ASCII dot-matrix digit starts at a random density-ramp step and eases independently toward its true value, so the numeral visibly resolves out of noise instead of sliding or flipping into place.
Chart Bar Halftone
Bar chart whose fills are an ordered-dither halftone instead of a flat color: ink density tracks value as a second, redundant channel to height.
Chart Donut Halftone
Donut chart for an ordinal size scale where wedge angle carries share and ordered-dither density carries tier order, instead of a second colour.
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.
Stat Row Baseline Spark
A KPI row implementing the stat-tile figure contract (value, delta, sparkline) honestly: the sparkline behind each number is the same series the delta is computed from, hovering or focusing surfaces exactly which point that delta is measured against, and color only ever means 'this is good news for this metric', never 'the number went up'.
Heatmap Calendar Tide
Calendar heatmap read as a tide table: one column per week, depth carried by a single-hue ramp mixed from the accent token, with arrow-key navigation.
Sparkline ASCII
A production-usable sparkline chart drawn entirely in characters: block-fraction bars, keyboard-navigable column by column.
Ticker Teleprinter
Character-quantised teleprinter crawl: a fixed row of monospace cells advances one full cell per beat via content substitution, never a subpixel slide.
Ticker Tape Splice
Horizontal ticker tape with mechanical feed physics: quotes stream right-to-left at constant speed, new data visibly splices in with a 1px seam that travels with the strip, and hover or keyboard focus brakes the feed with inertia instead of stopping it dead.
Network Packet Trace
A small hairline node/edge network where data pulses branch across random routes, easing along each edge with a fading tail: idle traffic, dense active traffic, or an error state where packets queue up at a congested hub node.
Empty State Survey
First-run empty state as a surveyor's staked plot: corner stakes drop in, then dashed strings tauten around the future layout and tie off at the CTA.
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.
Memory Ledger Decay
Session memory that visibly patinates: each remembered fact steps its ink from --foreground toward --ns-muted the longer it goes unused, snaps back and underlines when the agent rehearses it, and is governed by real pin/evict controls.
Context Prompt Shims
Prompt composition rendered as machinist shims fitted into a fixed-height gap: each section's row height maps to its real token count, order is drag/keyboard reorderable with FLIP transforms, and an over-budget insert compresses the stack, bounces back to the tray, and surfaces a truncation remedy instead of an error string.
Feed Escapement
Live feed where a small SVG anchor fork gates arrivals one at a time: a burst becomes a metered tick-tick-tick instead of a dogpile, held open only by each item's own spring-settle, not a schedule.
Refresh Pull Flywheel
Pull-to-refresh as a crank and flywheel: pulling down winds a spoked SVG wheel through a rack-and-pinion drivetrain, release hands it angular momentum, and the wheel freewheels through the request in flight before the response brakes it to a stop as new rows settle in.
Stem And Leaf Live
A live stem-and-leaf plot: every arriving value flies in from a staging slot and drops into its tens-stem row, existing leaves shoulder-nudging aside to insert it in sorted order, so the distribution is built entirely from the digits of the data and every leaf is still an individually focusable record.
Hero Chart Recorder
A chart-recorder hero: ruled paper feeds left at fixed px/s while a mechanical pen chases the live value through a deliberately underdamped spring, so a spike overshoots, quivers, and settles. That tremor is stamped permanently into the trace.
Counter Carry Ripple
Display-only numeric readout where change animates the way arithmetic works: only the digits that differ move, and a carry (199 -> 200) visibly ripples right-to-left across the columns it touches.
Button Retry Backoff
A retry button that visibly winds a torsion spring through its backoff: disabled and charging while a --foreground arc grows on real timing, notching every failure, pressable only once fully wound.
Citation Grounding Hatch
A per-sentence grounding trace under an AI answer: solid where a source backs the claim, a bare hairline where the model is inferring alone, diagonal hatch where a source contradicts it. Shape-encoded, never color, with a static legend keying each mark to its meaning and a click-to-raise source panel.
Truncation Taper Fade
Truncation without the ellipsis: an overflowing line's trailing characters crowd tighter and dissolve toward the clip edge instead of getting cut to '...'; hover or focus decompresses it to read the tail.
Event Stream Vapor
A Wilson cloud chamber for your event stream: each real event condenses into a soft vapor trail (angle by category, length/brightness by magnitude) that diffuses away over seconds, with a paired Geist Mono log so the same stream reads in words.
Histogram Live Grain
Live distribution instrument where the histogram IS the samples: each arrival falls as a grain into its bin and stacks, the heap visibly re-settles as the rolling window slides, and P50/P90 fences ride the same scale.
Meter Context Window
A context-window budget meter: one hairline stacked bar segmenting the window into system prompt / tools / history / current turn, told apart by fill pattern instead of color, that visibly resettles rather than jumps when the window compacts.
Timeline Agent Lanes
Live multi-agent turn tracker: one hairline lane per agent, the lane holding the turn brightened to foreground, handoffs drawn as stepped connectors with mono duration labels.
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.
Table Heat Shimmer
Dense ops table where rows above a heat threshold shimmer like air over asphalt: live DOM text refracts through an animated SVG displacement filter while cold rows sit dead-still behind hairline borders.
Stats Radar Sweep
Dashboard KPI grid under an observatory radar: a 1px accent arm sweeps the panel once per 12s with sonar rings, and each stat card counts up and lights its border only the instant the wedge crosses its bearing, then settles back to muted until the next revolution.
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.
Sparkline Automaton
Inline KPI sparkline grown over an elementary cellular-automaton texture: the Wolfram rule is picked by the series' volatility, one generation column per data point.
Chart Area Aurora
Area chart whose fill is a live aurora curtain: series values drive curtain height per column, a cool-to-warm hue band tracks local trend direction (falling cool, rising warm), the noise-warped top edge drifts even at rest, and data updates glide the curve to its new shape with a staggered ease.
Chart Ridgeline Terrain
Unknown-Pleasures ridgeline chart whose live history recedes into scrolling ambient noise terrain, dented gravitationally by the cursor.