Component catalog

Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/editorial/DESIGN.md first.

Text generates as if it is being typed on the screen.

Import Afterburner from "anatomy-figures/afterburner" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import BTree from "anatomy-figures/b-tree" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import BinarySearch from "anatomy-figures/binary-search" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import BloomFilter from "anatomy-figures/bloom-filter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Computer from "anatomy-figures/computer" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Dns from "anatomy-figures/dns" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Easing from "anatomy-figures/easing" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import FlexGrow from "anatomy-figures/flex-grow" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Forge from "anatomy-figures/forge" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Foundry from "anatomy-figures/foundry" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import GitMerge from "anatomy-figures/git-merge" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import GlassFurnace from "anatomy-figures/glass-furnace" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import GradientDescent from "anatomy-figures/gradient-descent" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import MarkSweep from "anatomy-figures/mark-sweep" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import MergeSort from "anatomy-figures/merge-sort" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Mutex from "anatomy-figures/mutex" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import PlasmaCutter from "anatomy-figures/plasma-cutter" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import PowerStation from "anatomy-figures/power-station" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import ProcessPump from "anatomy-figures/process-pump" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import PublicKey from "anatomy-figures/public-key" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Reactor from "anatomy-figures/reactor" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Sampling from "anatomy-figures/sampling" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Seasons from "anatomy-figures/seasons" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import TcpHandshake from "anatomy-figures/tcp-handshake" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Tokamak from "anatomy-figures/tokamak" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Import Turbofan from "anatomy-figures/turbofan" (default export). MIT; React 18+. Its --anatomy-* tokens need mapping to your project's theme. Isometric does not imply freely rotating 3D. Live interaction is on the source site; our thumbnail is a still screenshot.

Typewriter effect component with customizable typing speed and cursor animation

A canvas-based pseudo-3D particle field with perspective projection, continuous rotation and buoyant drift.

Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.

Banner variant (comp-311) — banner, newsletter, subscribe.

Dialog variant (comp-321) — dialog, modal, newsletter, subscribe, form, radix.

3D antigravity particle field that repels from the cursor with smooth motion.

Creates particle spark bursts at click position.

Text assembles from drifting particles that scatter and reform on demand.

Configurable particle system.

Exploding pixel particle bursts with optional liquid postprocessing.

Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest.