# moco — editorial components for React

> Copy-source React components for technical essays and blogs: scrollytelling, margin notes, sparklines, before/after compares, animated numbers, block diagrams, code walkthroughs. shadcn-format registry; every component styles itself from --moco-* CSS tokens (light + dark). MCP server: `npx -y moco-mcp`.

Setup: install the `tokens` item first (https://mocoui.site/r/tokens.json) and import tokens.css once in the root layout. Install any item with `npx shadcn@latest add https://mocoui.site/r/<name>.json` or fetch the JSON directly — each item embeds full file contents and targets.

## Components

- [Code](https://mocoui.site/r/code.json): Shiki-highlighted code windows: tabbed snippets with crossfade, and an annotated walkthrough with bidirectional linked highlighting.
- [Compare](https://mocoui.site/r/compare.json): Before/after clip-path wipe with pointer, keyboard, and slider-role support.
- [Count Up](https://mocoui.site/r/countup.json): Scroll-triggered number count-up with reserved width (no layout shift), built-in Intl formatters, and reduced-motion instant-set.
- [Cover](https://mocoui.site/r/cover.json): Deterministic FNV-1a-seeded generative SVG cover art in three variants: curves, blocks, bars.
- [Diagram Kit](https://mocoui.site/r/diagram.json): HTML/CSS block diagrams — rows, blocks with variants and tooltips, diamonds, brackets, notes, and a legend. Real DOM: selectable, screen-reader reachable, reflows.
- [Dot Grid](https://mocoui.site/r/dotgrid.json): Full-viewport canvas dot grid that drifts toward the cursor; pauses when the tab is hidden, off under reduced motion.
- [Figure](https://mocoui.site/r/figure.json): Figure plate with run-in caption, plus an editorial table with small-caps heads and hairline rules.
- [Hooks](https://mocoui.site/r/hooks.json): Scroll and motion hooks: useReducedMotion, useScrollspy, useReadProgress, useInView, plus smoothScrollTo.
- [Island](https://mocoui.site/r/island.json): Morphing sticky header for long reads: progress ring, scrollspy section, section menu, and a Read-next end phase.
- [Math Block](https://mocoui.site/r/math.json): 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.
- [Notes](https://mocoui.site/r/notes.json): Tufte-style numbered margin notes (CSS-counter ordered, tap-to-expand below 1280px) and dotted-underline term popovers with viewport-edge flip.
- [Palette](https://mocoui.site/r/palette.json): Cmd-K fuzzy command palette with subsequence matching, character highlighting, focus trap, and on-page section jumps.
- [Rail](https://mocoui.site/r/rail.json): Left-edge section minimap: one tick per heading, active-section highlight, labels on hover. Hidden below 1280px.
- [Scrolly Stage](https://mocoui.site/r/scrolly.json): Scrollytelling stage: a pinned figure that updates as prose steps scroll past, unpinning below 1024px.
- [Scrub Number](https://mocoui.site/r/scrub.json): Tangle-style inline number scrubber: drag the variable itself, with a compact range input for pointer and keyboard access.
- [Spark](https://mocoui.site/r/spark.json): Server-safe inline SVG sparklines and proportion bars that sit on the text baseline.
- [Stepper](https://mocoui.site/r/stepper.json): Render-prop step sequencer with play/pause that auto-pauses off-screen and under reduced motion.
- [Design Tokens](https://mocoui.site/r/tokens.json): 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.
- [View Transitions](https://mocoui.site/r/view-transitions.json): Cross-fade View Transitions for Next.js App Router route changes, plus a no-js flag remover.
- [Zoom](https://mocoui.site/r/zoom.json): Lightbox affordance for figures — Esc, click-outside, focus restore, and scroll lock included.