Components
20 items — every one ships a live demo, three install paths, and its full source.
code
Shiki-highlighted code windows: tabbed snippets with crossfade, and an annotated walkthrough with bidirectional linked highlighting.
codeshikisyntax-highlightingcompare
Before/after clip-path wipe with pointer, keyboard, and slider-role support.
figureinteractiveslidercountup
Scroll-triggered number count-up with reserved width (no layout shift), built-in Intl formatters, and reduced-motion instant-set.
numberanimationscrollcover
Deterministic FNV-1a-seeded generative SVG cover art in three variants: curves, blocks, bars.
generativesvgcoverdiagram
HTML/CSS block diagrams — rows, blocks with variants and tooltips, diamonds, brackets, notes, and a legend. Real DOM: selectable, screen-reader reachable, reflows.
diagramlayoutaccessibilitydotgrid
Full-viewport canvas dot grid that drifts toward the cursor; pauses when the tab is hidden, off under reduced motion.
canvasbackgroundmotionfigure
Figure plate with run-in caption, plus an editorial table with small-caps heads and hairline rules.
figurecaptiontablehooks
Scroll and motion hooks: useReducedMotion, useScrollspy, useReadProgress, useInView, plus smoothScrollTo.
hooksscrollmotionisland
Morphing sticky header for long reads: progress ring, scrollspy section, section menu, and a Read-next end phase.
navigationheaderscrollspymath
Display equation with a plain-English restatement and a 'show the math' derivation disclosure. Children are typically KaTeX/MathML output — katex is an optional peer, not imported here.
mathprosedisclosurenotes
Tufte-style numbered margin notes (CSS-counter ordered, tap-to-expand below 1280px) and dotted-underline term popovers with viewport-edge flip.
prosesidenotetooltippalette
Cmd-K fuzzy command palette with subsequence matching, character highlighting, focus trap, and on-page section jumps.
command-palettesearchkeyboardrail
Left-edge section minimap: one tick per heading, active-section highlight, labels on hover. Hidden below 1280px.
navigationscrollspytocscrolly
Scrollytelling stage: a pinned figure that updates as prose steps scroll past, unpinning below 1024px.
figurescrollytellinglayoutscrub
Tangle-style inline number scrubber: drag the variable itself, with a compact range input for pointer and keyboard access.
numberinputdragspark
Server-safe inline SVG sparklines and proportion bars that sit on the text baseline.
chartsparklinesvgstepper
Render-prop step sequencer with play/pause that auto-pauses off-screen and under reduced motion.
figureinteractiveanimationtokens
The moco token contract: warm-paper light theme + warm-dark theme, lime accent, four font slots. Import once; every moco component styles itself from these variables.
themetokenssetupview-transitions
Cross-fade View Transitions for Next.js App Router route changes, plus a no-js flag remover.
navigationanimationnextzoom
Lightbox affordance for figures — Esc, click-outside, focus restore, and scroll lock included.
lightboxfiguredialog