The component library

These pages mount the real components of the hub: the dithered fields, the light fields, the glyph rain, the doubled line, the isometric kit, the globes, the locale chips, the moving text, the marks and the heads. Every plate is the component itself, running, with controls for its props. Each section gives the import path, the props, when to use the component and what it does under reduced motion. The plate below is the studio field, the dithered material of the landing hero, with its ten presets.

The pagesCopy Anchor Link

The pages sit in ten groups, as the sidebar shows them: the instruments first (fields, the dither lab, drawings, 2D and 3D), then the pieces a reader handles (interactables, language and motion, marks and heads), then what the system makes and where it puts it (artifacts, page layouts, pages). Each card names the components its page mounts.

FieldsCopy Anchor Link

Dither labCopy Anchor Link

DrawingsCopy Anchor Link

2D and 3DCopy Anchor Link

InteractablesCopy Anchor Link

Language and motionCopy Anchor Link

Marks and headsCopy Anchor Link

ArtifactsCopy Anchor Link

Page layoutsCopy Anchor Link

PagesCopy Anchor Link

Every componentCopy Anchor Link

Client means the module is a 'use client' component or a canvas engine that needs the DOM. The rest render on the server and ship no JavaScript of their own. Several components live in src/app/d/toolchain, the direction that the later directions fork. The radius, type and oxlint gates skip that folder, and the site imports the components from there.

The lifecycle every instrument keepsCopy Anchor Link

1. Mount late. A canvas or WebGL engine starts when its plate comes within 180 pixels of the viewport, through one IntersectionObserver that disconnects after it fires.
2. Pause when unseen. From then on the engine pauses itself when it leaves the viewport and when the tab is hidden.
3. Draw one still under reduced motion. With prefers-reduced-motion: reduce an engine draws one designed frame and schedules no animation frames. A Still control on a plate shows that frame without changing the system setting.
4. Release on unmount. destroy() disconnects every observer and listener. The WebGL contexts of the studio, horizon and prismatic fields persist for the session, one per engine, because a context per mount exhausts the browser's budget.
5. Follow the theme. The theme is html[data-theme]. An engine reads its ink from a custom property and reads it again when the attribute changes; an SVG drawing reads currentColor and the tokens.

The fields tuned to an ink ground, the studio, horizon, prismatic and ink fields, sit on an ink plate in both themes. Everything else follows the docs theme.

The numbers behind itCopy Anchor Link

The browser keeps a fixed budget of live WebGL contexts, and a page that runs past it gets a black canvas and no error in the console. The lifecycle above keeps every page inside that budget, and these numbers set it.

The rAF gate wraps requestAnimationFrame only, so a loop on setInterval or setTimeout keeps running inside a frozen preview. Canvas and WebGL engines explains each of these with the shared canvas that only grows, the readback canvases, zoom and the quality governor.

Mounting a component in a docs pageCopy Anchor Link

A docs page imports a component at the top of its MDX file and renders it as JSX. The page and its MDX are server components, so a component with state, a canvas or GSAP must be a 'use client' module. fumadocs-mdx imports every docs page into the one /docs/[[...slug]] route, so a plate imported directly would put its code and its stylesheets into every docs page's first load. The pages therefore import their plates from src/components/docs/demos/lazy.tsx, which wraps each one in next/dynamic: the server still renders the plate, and its chunk and CSS load only on the page that shows it.

import { StudioFieldDemo } from '@/components/docs/demos/lazy';

The plate runs the studio field with its ten presets.

<StudioFieldDemo />

Put a sentence beside every plate that says what it shows. The Markdown twin of the page and /llms-full.txt drop the import and keep the plate as a bare tag, such as <StudioFieldDemo />, so the sentence is what a reader of the twin gets.

The plates on these pages are built from one small kit in src/components/docs/demos/:

The build logCopy Anchor Link

The handbook's Libraries document indexes the same instruments and ends with the build log, where every library runs with its plates and API snippets.