Cookbook — React · cb-react

Owner directive (2026-07-10), canonical. "generate with the Holonprint Loop with gaussian splatting, lenis, tailwind, react, next … The PAD with the Platform Augmenting Data to be used by Procedural Operational Devices (Components, transitions, Interaction)." [src: wiki/development/prompts-archive/by-topic/knowledge-management-and-concept-modeling.md:457]

Official docs

Our proven patterns

1. Data-driven modules, not children. Every scroll/section module receives one normalized section + brand theme as props (ModuleProps { section, theme }) so the same component re-skins per venture — this is the React expression of the pad/pod model: the PAD is the data payload, the POD is the component operating it. [src: HOS-Webdoc/web/src/lib/scroll/types.ts:12]
2. Element ladder discipline. COMPONENT is one rung: "a React component" sits between raw ELEMENT and PAD in the genome's element ladder — components never own venture data, they render it. [src: wiki/organizations/instances/royalorbit/genome.json:102]
3. Client-boundary hygiene. Anything touching window/GSAP plugins lives behind 'use client' and the single register module; server components must not import it. [src: HOS-Webdoc/web/src/lib/scroll/register.ts:11]
4. Imperative engines behind refs. The splat engine is vanilla TS; React mounts it into a wrapper element and subscribes via the returned handle (createRenderer(wrapper) → onFrame, start/stop) — React state never drives the frame loop. [src: HOS-Instance/packages/engine/src/engine/renderer.ts:36]
5. Capability hooks, SSR-safe. prefersReducedMotion() / supportsWebGL() / isTouch() return safe defaults when window is absent; components branch to CSS fallbacks from these, never from user-agent sniffing. [src: HOS-Webdoc/web/src/lib/scroll/env.ts:1]

Gotchas

• Unsubscribe everything: frame callbacks, progress listeners and chapter-change listeners all return disposers — effect cleanup must call them or HMR leaks loops. [src: HOS-Instance/packages/engine/src/engine/renderer.ts:102]
• Hydration: theme CSS custom properties (--bg, --ink) are written by the engine per frame; render initial values inline to avoid a flash before the first frame. [src: HOS-Instance/packages/engine/src/engine/theme.ts:67]

Budgets

Interaction responsiveness targets live in bm-001-web-perf.

Composition

• uses: cb-nextjs (app framework) · cb-tailwind (styling)
• used-by: pb-001-spatial-site-loop (step 11) · bp-001-spatial-site · cb-patterns-hosweb

See also

• pad · pod · districts