Data
Animated React Data Visualization Components
Sparklines that draw themselves, KPI cards that count in, spring-swept gauges, ranked bar races, pulsing maps, and live activity feeds for React. Every component is a single TypeScript file styled with Tailwind, seeded and SSR-safe, ready to copy-paste or install with the CLI. Under prefers-reduced-motion each one freezes at its final fully-drawn state — the static frame is the data, never a blank.
A code-built browser or app-card window whose interior is a living dashboard instead of a screenshot: on scroll-in, skeleton shimmer bars resolve into real KPI tiles, a live sparkline strip, and activity rows — each panel snapping in with a one-frame brightness kiss, top-left to bottom-right — then quiet idle life keeps it breathing: the sparkline streams, a number re-rolls, a ghost cursor drifts in and clicks. Stage any children through the exported ChassisPanel boot wrapper.
A radial sweep gauge whose arc springs to its value with a calibrated overshoot-and-settle while the center count ticks up in lockstep. Continuous, segmented-tick, and half-speedometer variants; threshold crossings shift the hue over 300ms instead of snapping.
The atomic KPI stat card, animated in three beats: the value rolls up on odometer digit drums, the sparkline scores itself in, and the delta badge stamps down last with one crisp X-flip. Live updates re-roll only the digits that changed — a meter, not a poster.
A dotted world map as a live data surface: connection arcs launch with bright comet heads, land with a two-ring radar ripple, and dock event chips by hairline leader lines. Deterministic seeded dot grid (self-contained land bitmask), static events or live callback, chart-room palette. Canvas 2D, capped arc pool, offscreen-paused, reduced-motion-safe.
A machined dotted interactive globe: deterministic ice-white land dots on a matte graphite sphere with a whisper of rim atmosphere. Drag it with heavy desk-globe momentum and the idle spin clutches back in slowly; connection arcs launch in seeded bursts, travel with comet heads, and land with surface pulses. Camera-facing marker labels, hero-edge camera offset, one cool arc accent. Original OGL implementation — instanced point dots, DPR-clamped, offscreen-paused, full GL teardown, reduced-motion-safe.
A self-drawing chart — line, area, or bar — that performs its data on scroll-in: axes and gridlines fade in first like ruled paper, lines trace left to right behind a bright pen tip with the gradient fill sweeping beneath, bars spring from the baseline and settle. Dataset changes morph the marks, and a tooltipTour mode walks an active tooltip across the points once after the draw.
A tiny inline sparkline — line, gradient area, or micro-bars — that scores itself in left to right with a bright cooling tip, and can stream live data from the right with a breathing endpoint dot. Pure SVG, no chart library, no axes.
The uptime bar, alive — labeled status-tracker rows that stack into an ops wall with a shared time axis. Boots with a sub-second left-to-right ignition cascade on first view, pulses the newest bucket, slides new buckets in on a live interval (suspended offscreen), and raises a hover chip with bucket detail. Statuses are shape-and-brightness coded, not just hue: dim operational, notched degraded, saturated glowing incident. Pure CSS animation, zero dependencies, visually-hidden textual summary per row, static wall under reduced motion.
A ranked bar race — the racetrack tote board. Rows that change rank physically slide past each other FLIP-style, the overtaker lifting over its neighbor with a soft shadow before seating flush; bars re-measure with a spring, values roll to their new numbers, and the leader's value carries a subtle brightness edge. Feed it frames and it plays the classic bar-chart race on an interval (suspended offscreen), politely announcing lead changes. Includes a segmented category-proportion variant.
A self-looping activity feed for marketing heroes: entries land with one confident spring and a hairline flash that cools in 400ms, siblings shuffle down, and the oldest retires under an edge fade — all on seeded, jittered news-wire cadence. Decorative counterpart to dispatch; hover pauses the feed.