React Data Display and Stats Components

A group of statistics that count from 0 to their target values when they enter the viewport, with items staggering in and sliding up.

A row of overlapping circular avatars; on hover or focus the avatar lifts and scales up, its neighbours move aside, and a name tooltip floats out.

A three-column testimonial wall whose columns scroll in alternating directions, in either an auto infinite-scroll or a scroll-parallax style.

A pricing table with a monthly/yearly segmented switch; prices spring-tween on switch, the selected pill slides, the featured plan scales up and is highlighted, and yearly shows a discount badge.

Data-driven SVG charts that grow as they reveal — bars grow up from the baseline, lines and areas draw themselves along their stroke — triggered when they enter the viewport.

A live list that inserts items automatically — new events push in from the top and existing rows reflow smoothly with FLIP — with timeline and relative-time support.

A command-line terminal that simulates typing line by line, with per-character command entry, output reveals, and looping playback.

A syntax-highlighted code block with a copy button, a built-in lightweight tokenizer, and a line-by-line reveal animation.

A side-by-side code diff that reveals additions and deletions line by line, with automatic syntax coloring.

A tree view of a folder/file structure, with expand and collapse animations, depth guide lines, and icons chosen by file extension.

A flowing beam between nodes, well suited to integration diagrams and data-flow animations.

A beam that advances along an SVG path with scrolling — well suited to long-form articles, timelines, and step-by-step walkthroughs.

Metric cards with a value that rolls in, an inline sparkline, and a rise/fall badge.

A collapsible org tree whose SVG connectors reflow along with the node animation.

A leaderboard whose top-three podium columns rise up while the remaining ranks reveal as a list.

A collapsible JSON tree with type-based coloring, path copying, and an expand animation.

An animated weather card with sun-glow, raindrop, drifting-cloud, and snowflake scenes, day/night colors, and a week forecast

General-purpose data table with FLIP row reordering on header sort, a sticky header, expandable row details, checkbox selection with a bulk-action bar, and an empty state

A badge with a count that rolls digit by digit, a removable mode that shrinks out while neighbours slide into place, and a pulsing variant for live states.

An avatar that shows initials until the image loads and then crossfades, with a breathing presence dot, a hover ring that expands, five sizes and two shapes.

A React component for keycap-styled shortcut labels — combine multiple keys, mod shows ⌘ or Ctrl per platform, and with listening enabled each keycap presses down and springs back when the user actually hits the matching key, with a ring flash once the whole combo is held.

A dark, ambient-glow issue list where cards cascade in, status pills re-layout on change and edges shimmer on hover — built for product launch sections.

A multi-source queue React component where requests from email, phone, forms and walk-ins fly from their source icons into one unified queue along an arc, each keeping a source badge, with multi-select source filtering plus autoplay and pause.