WORK-401
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.

Priority:mediumComplexity:moderateMilestone:v0.21.0Source:SPEC-101
claude/threejs-sandbox-backgrounds-env77o View source

Criteria completion

Criteria completion: 0 of 5 (0%) checked; tracking started on Jun 11, no incremental history yet0%25%50%75%100%Jun 11Jun 15

Tracking started Jun 11 — check back for trends.

Relationships

Implements 1
Related 6
Branches 2
claude/threejs-sandbox-backgrounds-env77o current ready
main doneclaude/spec-101-hero-cover-prism done
History 1
  1. a1580fa
    Created (ready)by bjornolofandersson

Acceptance Criteria

  • 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 three@0.160.0, 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).

References

  • SPEC-101 §5, §7 · WORK-382 (scene patterns) · palette: packages/lumina/src/presets/niwaki.ts, site/content/themes/niwaki.md