component lab
Every component, running for real.
The posts on this blog lean on interactive pieces — charts you can scrub, diagrams that play out step by step, small simulators — instead of static screenshots. This gallery collects all of them, live: everything here clicks, drags and plays exactly as it does inside a post. Each one was built because a specific post needed it — a claim prose couldn't carry, a comparison that was eating the scroll, a number nobody would feel as text. That reason lives on every component's page, under "why this exists".
31 components documentedData & visualization 7
CountUp Viewport-triggered animated number in Fraunces display type, with mono caption lines. Respects prefers-reduced-motion. DataTable Sortable table with optional per-column heatmap coloring and default sort. FileTree Directory listing with collapsible folders and optional file highlighting, for showing where things live in a project. GitGraph Git history as an animated graph: branch lanes, merge edges, and playback you can step through one operation at a time. InteractiveChart Multi-type chart (bar, horizontal, line, area, donut, scatter) with multi-series, thresholds, hover scrub and keyboard navigation. MermaidDiagram Flowcharts and sequence diagrams written as text, rendered to match the site in both light and dark mode. StatGrid KPI card grid — big serif value, mono uppercase label, optional context line — with staggered fade-in on scroll.
Narrative & scroll 6
AgentLoop Step-through visualizer of an AI agent's plan → act → observe cycle with a live context-window gauge. DecisionTree Click-based branching narrative — the author defines question and verdict nodes, the reader walks the tree by picking options. ProgressGate Content hidden behind a scroll threshold — the hint wall fades out and the payoff fades in when the reader arrives. Scrollytelling NYT-style scrollytelling: a pinned graphic that changes state as you scroll through the steps beside it. StepThroughDiagram A diagram that builds itself as you scroll its step list — each step reveals the part of the picture it talks about. Timeline Vertical milestone timeline with mono dates, serif titles, and batch scroll-reveal; one entry can be emphasized.
Playful & interactive 7
AskMeAnything The floating chat that lives on every page: an AI that runs in your browser, answers about me and can summarize the post you are reading, plus a tab that emails me directly. BeforeAfter Drag-slider comparison between two slots — images, text blocks, or arbitrary HTML, clipped by a draggable divider. EasingExplorer Draggable cubic-bezier editor with live preview, presets and a copyable CSS snippet. The interactive companion to JuiceLab. FlakySuite Monte Carlo flaky-suite simulator: drag flake rate and suite size, see P(suite green) per retry budget from 2,000 runs. GameFeelHero Always-dark "game screen" hero panel with serif title, muted subtitle, and chip links that double as a table of contents. JuiceLab Self-contained game-feel demos: squash, hitstop, shake, particles, Web Audio synthesis, combo meter. Playground Slider-driven explorer: move the inputs and the demo beside them reacts in real time.
Typographic & editorial 5
Callout Semantic aside with four types — tip, warning, note, important — marked by mono eyebrow labels, never accent bars. Collapsible Native details/summary disclosure with an animated chevron — for tangents and long dumps that would break reading flow. PullQuote Editorial pull quote in italic Fraunces with hairline rules and mono attribution; fades in on scroll via GSAP. Sidenote Auto-numbered superscript marker that reveals a short editorial note inline below the paragraph — no box, no border. TLDR The takeaways of a post, up front: two or three bullets for the reader who skims before committing.
Utility & chrome 6
CodeBlock Code container with an optional filename header — so you know where the code lives — and a one-click copy button. CodeDiff Side-by-side before/after diff with marked lines and a narrator note per hunk. Two columns at ≥ 900px, stacked below. CopyableCommand Inline one-line shell command with a $ prompt and a copy button — for commands the reader should actually run. FreshnessLine Mono eyebrow row for post headers — published date, optional review date, and an author-voiced status segment. ReadingMeta Compact reading-time and word-count line shown at the top of every post. Tabs Keyboard-navigable tab set with an animated underline indicator. Panels map to labels by order.