suaveplan/openspec/changes/enterprise-gaming-r3f-parallax/proposal.md

OpenSpec Change: enterprise-gaming-r3f-parallax

• Change ID: enterprise-gaming-r3f-parallax
• Package: @suaveplan/r3f-parallax
• Category: gaming/effects
• Target path: gaming/effects/r3f-parallax
• Status: PROPOSED
• Date: 2026-04-24
• Reference spec: /mnt/s/web/suaveplan/enterprise/r3f-parallax.md

---

Summary

Deliver @suaveplan/r3f-parallax on the genesis branch from scratch at enterprise quality. The package provides interior parallax components for React Three Fiber: WindowParallax (shared ray-marched room behind an array of portal quads using a single depth-layered texture atlas) and GridParallax (tiled M×N grid of parallax rooms on one plane). Both components are GPU-friendly, declarative R3F JSX. Configurable: lighting within rooms, depth layers, room-layout generation, and texture-atlas helpers. Storybook-driven with interactive controls for room parameters. Genesis adds structured errors, and 100% coverage.

---

Available workspace deps

@suaveplan/error, react, @react-three/fiber, @react-three/drei, three.

---

Public API surface

function WindowParallax(props: WindowParallaxProps): JSX.Element
// columns, rows, roomDepth, atlasTexture, lightColor, lightIntensity

function GridParallax(props: GridParallaxProps): JSX.Element
// tileSize, roomDepthLayers, atlas

function generateRoomAtlas(rooms: RoomDefinition[], options: AtlasOptions): AtlasResult

---

File layout

gaming/effects/r3f-parallax/
  package.json / tsconfig.json / vitest.config.ts
  src/
    index.ts
    types/common.ts + md
    shaders/parallax.vert.ts + parallax.frag.ts
    utils/room-atlas-generator.ts + md + test
    components/
      WindowParallax/ (tsx + md + test + stories + index)
      GridParallax/ (tsx + md + test + stories + index)
  tests/integration.test.ts