Setting up your dashboard0 entities found · 9/32 branches scanned
ID:WORK-401Status:ready
Prism scene — the niwaki-refraction hero backdrop
The showcase scene for the animated hero background (SPEC-101 §7): the brand metaphor, literally. A slowly rotating prism; a thin stream of markdown glyph particles (#, *, >, {%) enters one face as a faint ishi-tinted beam (stone grey — undifferentiated input); fanned spectrum streams leave the other in the Niwaki syntax roles — wakaba (keyword green), sakura (function pink), matsu (pine — link/constant), momiji (string peach, punchy string-expression orange as an accent). Markdown in, structured meaning out, in the exact colours this site renders syntax in.
site/examples/prism-scene/ renders the scene from a version-pinned three.js ESM import; faked refraction only — wireframe/flat-shaded prism, additive-blended Points/line beams, tinted-copy dispersion; no MeshPhysicalMaterial transmission.
Niwaki light + dark hex pairs drive the theme-aware variants (scene reads the injected theme); values pinned with a comment naming packages/lumina/src/presets/niwaki.ts as the palette of record.
Ambient by contract: no pointer handlers (the cover posture demotion blocks them anyway); the scene carries itself with no interaction.
Production posture: designed dim (lives under the cover scrim), devicePixelRatio capped (~1.5), RAF paused on visibilitychange, prefers-reduced-motion renders a composed static frame, a CSS gradient on the iframe body covers the boot frame, try/catch static fallback for blocked-CDN/no-WebGL.
Renders standalone in a plain {% sandbox src="prism-scene" height=… /%} (previewable before the hero-cover work lands); vite build stays green (no SSR/WebGL at build).
Approach
Follow the site/examples/threejs-scene/index.html patterns (pinned [email protected], theme reading, reduced-motion, fallback) and the sitemap-3d scene's structure for the heavier composition.
Glyphs as point sprites (canvas-generated textures per glyph); beam/spectrum as curve-sampled particle streams; dispersion = three-to-five tinted stream copies with small angular offsets.
Independent of WORK-398/WORK-399 — the scene is just an examples directory; the hero composition wires it up in the docs item (WORK-402, which depends on this).