The live demo was built from exactly this text — nothing added.

# Light Beam Lens Puzzle Game

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build [BRAND], an original English-language 3D light-routing puzzle game set in [WORLD] for [AUDIENCE]. The default brand is Lumenwild, the default world is the Glassroot Caverns, and the default tagline is 'Turn the light. Wake the quiet.' The entire product is one playable static page at index.html: an isometric crystal chamber, a deterministic grid-optics engine, 12 hand-authored levels, move and target counters, undo, restart, level selection, help, optional synthesized sound, and local progress. The first screen must be the playable game, never a marketing landing page or a separate start screen.

- Audience: Indie game makers, developers, educators, and players who enjoy calm spatial reasoning. The interface must welcome non-technical players with direct manipulation and short instructions while keeping the puzzle data and optical rules easy for a developer to adapt.
- Goal: Let a visitor immediately rotate lenses, mirrors, and later beam splitters to energize every receiver, then continue through 12 increasingly involved levels. Make every interaction legible and reversible, verify that every authored solution works from the initial state, and preserve solved status and best move counts on the current device without any server.
- Tone: Quiet, precise, mysterious, and reassuring. Use short original US English labels and tiny pieces of environmental copy, not a sprawling fantasy narrative. There are no characters, enemies, timers, penalties, hot springs, restoration quests, skill trees, or references to existing games or AI products.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Vanilla CSS
- Libraries: Vite 5 (MIT), React 18 (MIT), Three.js (MIT), lucide-react (ISC), @fontsource-variable/space-grotesk (OFL-1.1), @fontsource/ibm-plex-mono (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use the fixed dependencies above. Configure one index.html entry, Vite base './', and build.sourcemap false. Set the package build script to run TypeScript checking and the Vite production build, producing only static files in dist/.
  - Keep React responsible for menus, dialogs, HUD, buttons, accessibility, and game state. Use a plain Three.js scene owned by one React board component; do not add react-three-fiber, a physics engine, a postprocessing package, Tailwind, or another framework.
  - Implement independent TypeScript modules for level data, beam tracing, game state, Three.js rendering, and synthesized audio. The pure traceBeam function must calculate paths from current piece orientations; the renderer must never simply draw the authored solution route.
  - Put BRAND, WORLD, AUDIENCE, TAGLINE, all 12 level names, all instructions, button labels, dialog copy, sound labels, and aria copy in src/content.ts. Rewrite every world-specific word when variables change. Keep the fixed level coordinates and mechanics in src/game/levels.ts.
  - Use a React reducer for current level, piece rotations, selected piece, moves, undo snapshots, solved levels, best scores, and open dialog. Persist only solved status, best scores, sound preference, and current level in a localStorage key derived from a slug of BRAND. All 12 levels remain selectable from the start.
  - Import Space Grotesk Variable and IBM Plex Mono weights 400 and 500 from their Fontsource packages. Use Lucide React for interface icons. Bundle every font, script, icon, and generated visual locally; no remote assets or APIs.
  - Use an orthographic camera, procedural geometry, instanced decorative crystals, capped device pixel ratio, and no postprocessing. Cap pixel ratio at 2 on desktop and 1.5 on mobile, reduce decorative instance counts below 700px, pause rendering when the document is hidden, and dispose geometries, materials, listeners, audio nodes, and the renderer on unmount.
  - Provide visible keyboard focus, at least 44px touch targets, a skip link to the game controls, and an accessible DOM alternative for every pointer action. Support 1440×900 and 390×844 without horizontal overflow or console errors and honor prefers-reduced-motion.

## Variables
- [BRAND] — Game name (default: "Lumenwild"). An invented one- or two-word title; never an existing game, platform, or AI brand.
- [WORLD] — World name (default: "the Glassroot Caverns"). An invented crystalline place used in the level-select and help copy.
- [AUDIENCE] — Player audience (default: "players who enjoy calm logic puzzles"). The intended players, used naturally in the help introduction rather than as metadata.
- [TAGLINE] — Game tagline (default: "Turn the light. Wake the quiet."). A short original line shown beneath the game name and on the completion dialog.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/light-beam-lens-puzzle-game in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Cave `#071114` — Page and scene background
- Raised `#0E1D22` — HUD, dialogs, and control surfaces
- Basalt `#173038` — Board tiles and inactive piece bodies
- Edge `#2A4850` — Borders, grid grooves, and hover outlines
- Text `#EAF7F3` — Primary interface text and bright crystal highlights
- Muted `#93AAA8` — Secondary labels, instructions, and inactive counters
- Beam `#9AFDE0` — Light paths, active receiver halos, and primary action accents
- Beam core `#F2FFF9` — Narrow bright center of every beam segment
- Lens `#82C9FF` — Lens glass, orientation marks, and selected-piece accents
- Completion `#E7C983` — Small solved check marks and completion detail only

### Typography
- Game name, level titles, dialogs, and interface: Space Grotesk Variable (OFL), weights 400/500/600/700
- Move counts, level numbers, coordinates, and compact status: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8px base grid. Desktop header is 64px with 24px horizontal gutters. The main shell has a 1500px maximum width, height calc(100dvh - 88px), 24px side and bottom padding, a minmax(0,1fr) board column, a 340px control rail, and a 20px gap. Keep the whole game visible at 1440×900. The board canvas fills its card with at least 600px height on large screens. Use 16px rail padding, 12px control gaps, and 24px dialog padding. Below 760px, use a 56px header, one column, 12px gutters, a board height of min(100vw,420px), compact HUD blocks, and a fixed 72px bottom control bar with 96px page-bottom clearance.
- Radius: Use 20px for the scene card and dialogs, 14px for HUD panels, 10px for buttons and level cells, and full pills for move and target counters. Keep tile geometry beveled but angular. Use soft mint shadows only around active optics and the primary next-level action; ordinary panels use 1px Edge borders rather than heavy shadows.
- Motion: Fade the complete cave and HUD in together over 480ms on first load; do not show an intro animation, camera fly-through, or blocking start button.
- Motion: Rotate a selected optical piece around the vertical axis by exactly 90 degrees over 180ms with ease-out, then redraw affected beam segments over 140ms. Game state updates immediately and never waits for the animation.
- Motion: Use a 120ms hover and keyboard-selection outline, a 160ms button press scale of 0.98, and 180ms fade-and-scale dialogs. No camera orbit or board movement is required for play.
- Motion: On completion, brighten all receivers, emit one restrained ring pulse per receiver over 900ms, and open the completion panel after 450ms. Do not loop confetti or shake the board.
- Motion: Ambient dust may drift very slowly and receiver light may breathe at low amplitude, but stop both when reduced motion is requested. Under reduced motion, rotations and beam changes are immediate and completion uses a static glow.
- Imagery: Create every visual in code with Three.js geometry, CSS, and inline SVG; there are no bitmap images, downloaded models, texture maps, HDRIs, or audio files. Build beveled square basalt tiles, angular rising and falling mirror bars, translucent flattened-sphere lenses with a clear axis line, prism splitters with a visible branch arrow, and ring-shaped receivers around faceted crystal cores. Surround the board with instanced low-poly mineral clusters and distant stalactites, using seeded placement so the scene is stable between runs. Use Cave-colored fog, hemisphere illumination, one soft directional light, and small point lights at the emitter and active receivers. Render each beam as a narrow Beam-core cylinder inside a wider transparent additive Beam cylinder at tile-center height. The board and its live optical state are the first-screen visual anchor; typography alone is never the hero. No people, mascots, logos, readable textures, brands, or reference-inspired props.

## Pages & Sections
### Playable crystal optics puzzle (`index.html`)
1. **Header and game shell** — The header contains a small original three-facet crystal mark drawn in inline SVG, the BRAND wordmark, and TAGLINE in muted text. On the right are Levels, How to play, and a Sound off / Sound on toggle with matching Lucide icons. The plain document title is BRAND and the favicon is the same original facet mark. Default supporting copy in the level rail is 'A quiet puzzle in the Glassroot Caverns', rewritten from WORLD when variables change. Optional sound uses only Web Audio oscillators and filtered generated noise after explicit user activation: a low gentle cave hum while enabled and a short soft chime on completion. Sound is off by default and never autoplays.
   Layout: Use a full-width 64px header above the two-column game shell. Align the brand left and actions right. Keep the header inside the same 1500px maximum width as the board. On mobile, show the crystal mark and BRAND at left, a Levels button and help icon at right, and move the sound toggle into the help dialog to prevent crowding.
   Motion: Header and game fade in together. Buttons use the standard 120ms hover and 160ms press response; no sticky or scroll-driven animation.
2. **Playable cave board** — The board is a real interactive Three.js scene, not a screenshot. Use an orthographic camera at (8,10,8) looking at the board center, with no automatic rotation. Frame the complete grid with approximately 12 percent breathing room. Each playable tile occupies one integer grid coordinate. The fixed emitter is a small luminous crystal pylon, mirrors rotate in quarter turns, lenses transmit only along their marked axis, splitters show their branch direction, and receivers visibly change from dormant to energized. Hovering or keyboard-selecting a rotatable piece raises a thin Lens-blue ring. Clicking or tapping that piece rotates it clockwise by 90 degrees and counts one move. Empty tiles and decorative crystals are not clickable. Keep the camera fixed so pointer-to-grid mapping remains predictable.
   Layout: The scene card occupies the large left column and fills the available desktop height. Place a small top-left overlay inside it showing 'CHAMBER 01' and a bottom-left overlay with 'Click an optic to rotate · U undo · R restart'. These overlays must not cover active pieces. The board remains the dominant visual, at least twice the control rail's width at 1440px. On mobile it appears first, before the compact level information.
   Motion: Piece rotation, live beam redraw, selection ring, subtle dust, and receiver completion pulses follow the design motion rules. Do not use drag-to-orbit, scroll zoom, camera shake, or physics-based mirrors.
3. **Level HUD and controls** — For the default first level, show the mono eyebrow 'LEVEL 01 / 12', H1 'First Light', instruction 'Align the lens and carry the beam to the listening crystal.', and two counters labeled 'MOVES 0' and 'TARGET 1'. Primary controls are Undo and Restart; Undo is disabled before the first move. A compact legend reads 'Lens · align its axis', 'Mirror · turn the beam', and later adds 'Splitter · light two paths'. A small status line says '0 of 1 receivers lit' and updates immediately. The bottom note reads 'Progress stays on this device.' Include an optional CREDIT footer link in small muted text, but no other site footer, dates, pricing, account, or promotional copy.
   Layout: The right rail is one bordered panel with the level copy at top, counters in a two-column row, receiver status beneath, and Undo / Restart as equal-width buttons. Put the legend below a thin divider and the device-progress note at the bottom. At mobile width, compress this to a single panel with level eyebrow, 28px title, one-line instruction, two counters, and receiver status; move Undo and Restart into the fixed bottom bar beside a Rotate selected button.
   Motion: Counter changes crossfade over 120ms. Receiver status uses a static dot that becomes mint; do not animate number rolling. The completion action appears only after every receiver is lit.
4. **Deterministic optics and game state** — Use zero-based x,y coordinates from the board's top-left and cardinal directions N,E,S,W. An emitter sends one unit of light in its fixed direction. Advance cell by cell. Leaving the grid or hitting a blocker stops that branch. A rising mirror maps N→E, E→N, S→W, W→S; a falling mirror maps N→W, W→N, S→E, E→S. A horizontal lens passes E and W only; a vertical lens passes N and S only; a wrong-axis lens stops the branch. A splitter passes the incoming direction straight through and adds one branch in its displayed cardinal direction. A receiver activates only when a branch enters while traveling in its required direction; wrong-direction light stops without activating it. Completion requires every receiver to be active on the same trace. Use a queue for split branches, deduplicate cell+direction visits, and cap total visits at 2048 to terminate loops safely. Render the resulting cell-center segments after every move.

Store each optical piece's rotation as 0–3 clockwise quarter turns; mirrors and lenses use rotation modulo 2 and splitters use all four directions. Every rotation pushes a snapshot onto the undo stack and increments moves. Undo restores the prior orientations and prior move count; Restart restores the authored initial orientations and zero moves. Save best score only when solved and only if it improves the prior best. All targets, mirrors, lenses, splitters, emitters, and blockers must be data, not hard-coded renderer branches. Before delivery, programmatically apply each listed solution to its initial level and assert that every receiver activates; also assert that each initial level begins unsolved.
   Layout: Implement this as pure game logic independent of React and Three.js, with the HUD reading the same traced receiver state as the 3D scene. No visual or timing difference may change the puzzle result.
   Motion: None in the logic layer. Visual interpolation must never delay state updates or completion detection.
5. **Twelve authored levels** — Use these exact level definitions and default names. Notation: E(x,y,d) is the fixed emitter; T(x,y,d) is a receiver requiring incoming travel direction d; M(x,y,R/F) is the solved rising/falling mirror; L(x,y,H/V) is the solved horizontal/vertical lens; P(x,y,d) is the solved splitter branch direction; X(x,y) is a solid crystal blocker. Fill uninterrupted straight segments between the described optical points. All listed mirrors and lenses start one clockwise quarter turn away from their solved orientation. Splitters start in the stated initial branch direction. Target is the authored solution's clockwise click count, not a claim that no shorter alternative exists.

01 First Light · 4×4 · E(0,1,E) · T(3,1,E) · L(1,1,H) · target 1.
02 Corner Song · 4×4 · E(0,0,E) · T(2,3,S) · M(2,0,F) · target 1.
03 Return Path · 4×4 · E(0,2,E) · T(0,0,W) · M(2,2,R), M(2,0,F) · L(1,2,H) · target 3.
04 Three Turns · 5×5 · E(0,4,E) · T(1,3,S) · M(4,4,R), M(4,1,F), M(1,1,R) · L(2,4,H) · target 4.
05 Lantern Loop · 5×5 · E(0,0,E) · T(4,2,E) · M(3,0,F), M(3,4,R), M(1,4,F), M(1,2,R) · L(1,0,H), L(2,2,H) · target 6.
06 Narrow Glass · 5×5 · E(0,2,E) · T(4,4,S) · M(2,2,R), M(2,0,R), M(4,0,F) · L(1,2,H), L(3,0,H), L(4,2,V) · X(0,0), X(1,4), X(3,3) · target 6.
07 Crosscurrent · 6×6 · E(0,5,E) · T(4,3,E) · M(5,5,R), M(5,1,F), M(3,1,F), M(3,0,F), M(1,0,R), M(1,3,F) · L(2,5,H), L(2,3,H) · target 8.
08 Two Lights · 6×6 · E(0,2,E) · P(2,2,S), initial branch N · T(5,2,E), T(5,4,E) · M(2,4,F) · L(4,2,H), L(4,4,H) · target 5.
09 Forked Current · 6×6 · E(0,0,E) · P(2,0,S), initial branch E · T(5,5,S), T(0,5,S) · M(5,0,F), M(2,3,R), M(0,3,R) · L(5,2,V), L(1,3,H) · target 6.
10 Quiet Divide · 6×6 · E(0,5,E) · P(2,2,E), initial branch N · T(5,0,E), T(3,4,W) · M(2,5,R), M(2,0,R), M(5,2,F), M(5,4,R) · L(4,0,H), L(4,2,H), L(4,4,H) · target 8.
11 Threefold · 7×7 · E(0,3,E) · P(2,3,N), initial branch E · P(5,3,S), initial branch E · T(6,3,E), T(0,0,W), T(3,6,W) · M(2,0,F), M(5,6,R) · L(4,3,H), L(2,1,V), L(4,6,H) · target 9.
12 Full Constellation · 7×7 · E(0,6,E) · P(1,3,E), initial branch N · P(4,3,S), initial branch E · T(6,0,E), T(6,1,N), T(2,6,W) · M(1,6,R), M(1,0,R), M(6,3,R), M(4,6,R) · L(1,4,V), L(3,0,H), L(5,3,H), L(3,6,H) · target 10.

For splitters, straight transmission follows the incoming direction and the listed branch is additional. Thus level 08 sends E light through P(2,2,S) toward the east receiver and a south branch to M(2,4,F), which turns it east. Levels 11 and 12 chain two splitters to three receivers. Do not add random layouts, rotate emitters or receivers, move pieces between cells, or substitute a different puzzle generator.
   Layout: Store all 12 definitions in a typed array with id, default name, grid size, emitter, receivers, pieces, blockers, and target moves. Level-select order is exactly 01 through 12. Increase complexity through longer routes, more mirrors and lenses, blockers, then splitters and multiple receivers; do not introduce another mechanic.
   Motion: Switching levels crossfades the HUD over 160ms and rebuilds the board without a camera move. Completion never automatically advances before the player chooses Next chamber.
6. **Level select help and completion dialogs** — Levels opens a dialog titled 'Choose a chamber' with the world-specific line 'Twelve quiet paths through the Glassroot Caverns.' Use a 3×4 grid on desktop and 3×4 compact grid on mobile. Every button shows its two-digit number and default level name; solved buttons add a small Completion-colored check and best move count. All levels are available without locking. How to play opens 'Rotate the optics. Follow the light.' and three short numbered instructions: '1. Select a lens, mirror, or splitter.', '2. Click or tap to turn it 90 degrees.', '3. Light every receiver to finish the chamber.' Include keyboard help 'Arrow keys select an optic · Enter rotates · U undo · R restart · L levels · Esc closes'. Completion shows 'The path is whole.', the current level name, 'Solved in {moves} moves · Target {target}', TAGLINE, and buttons Next chamber and Replay. On level 12, Next chamber becomes Back to levels.
   Layout: Use centered modal dialogs over a Cave 78 percent backdrop, with a maximum width of 560px and visible close button. Trap focus, restore focus on close, close on Escape, and prevent background pointer interaction. The level dialog scrolls internally if vertical space is short. The completion panel is smaller and must not obscure the board until its scheduled appearance.
   Motion: Dialogs fade and scale from 0.98 to 1 over 180ms. Solved checks appear without stagger. Reduced-motion mode uses immediate visibility changes.
7. **Responsive keyboard and accessible play** — Provide equivalent keyboard operation: Left and Right Arrow cycle through rotatable pieces in reading order, Enter or Space rotates the selected piece, U undoes, R restarts, and L opens level select; ignore game shortcuts while a dialog or form control has focus. Expose a DOM list of the current pieces with descriptive labels such as 'Lens at column 2, row 2, horizontal' and update those labels after rotation. The canvas has an accessible summary and the HUD announces receiver count and completion through a polite live region. On touch, one tap selects and rotates directly; the fixed Rotate selected button provides an alternative. Prevent double-tap zoom only on the board controls, not globally, and preserve normal page accessibility.
   Layout: At 1440×900 the complete board and rail fit without page scrolling. At 390×844, order is header, scene, compact level HUD, then a fixed bottom bar with Undo, Rotate selected, and Restart. Keep controls at least 44px high, do not crop the grid, and avoid horizontal scrolling at every breakpoint. If WebGL is unavailable, show a clear local message in the scene card while retaining level information and help; do not throw console errors.
   Motion: Honor prefers-reduced-motion in CSS and Three.js. Reduce geometry counts on small screens without changing puzzle coordinates or input behavior. No interaction depends on hover, animation completion, sound, or fine dragging.

## Assets
- image: No image files are used. Generate the complete cave, grid, mirrors, lenses, splitters, receivers, beams, crystals, particles, favicon, and original facet mark with Three.js geometry, CSS, and inline SVG. Use a fixed seed for decorative placement. Do not download or hotlink textures, models, photographs, or placeholder images.
- icon: Use locally bundled lucide-react icons only for Undo2, RotateCcw, Grid3X3, CircleHelp, Volume2, VolumeX, X, Check, and ChevronRight. Optical piece shapes and the original facet mark are drawn from scratch, not copied from an icon set or reference.
- font: Self-host Space Grotesk Variable through @fontsource-variable/space-grotesk and IBM Plex Mono 400/500 through @fontsource/ibm-plex-mono, both OFL-1.1. Import the npm packages in the app and list the packages, font authors, sources, and licenses in ASSETS.md; never use a font CDN.
- video: No video or audio files are used. Optional ambience and completion feedback are synthesized locally with Web Audio after user activation, with sound off by default and no remote requests.

## Don'ts
- Do not add a backend, API route, database, authentication, account system, online scoreboard, multiplayer, analytics, third-party API, or any network-dependent gameplay; use local browser state only.
- Do not change the fixed stack or add react-three-fiber, a physics engine, a postprocessing framework, Tailwind, a game engine, Unity, Unreal, Godot, or another rendering dependency.
- Do not ship anything beyond static dist/ output. Use Vite base './', the single index.html entry, relative asset paths, minification, no source maps, no copied src/, and keep dist/ under 20 MB.
- Do not use CDN scripts, remote fonts, remote icons, hotlinked files, placeholder-image services, downloaded models, bitmap textures, HDRIs, stock photos, or recorded audio. Every visual and sound must be generated locally in code.
- Do not copy or paraphrase the inspiration's prompt, source code, exact interface, title, story, level layouts, progression, models, textures, audio, icons, or other identifiable assets.
- Do not mention Kimi or the reference title inside the game. Do not use hot-spring ruins, warm-water restoration, chapter quests, skill trees, mascots, characters, or signature props from the reference.
- Do not use real people's likenesses, celebrities, anime or game characters, existing game or platform names, recognizable logos, commercial fonts, or third-party branded imagery.
- Do not replace deterministic grid tracing with physical raycasting or draw canned solution beams. Every visible beam and receiver state must come from the current orientations, and loops must terminate safely.
- Do not procedurally generate, remove, reorder, or substitute the 12 specified levels. Do not allow pieces to move between cells or add timers, enemies, lives, scores unrelated to moves, locked levels, in-app purchases, or random failure.
- Do not ship an unsolved initial board or an unvalidated authored solution. Apply every listed solution during development and verify all receivers activate while every initial state remains unsolved.
- Do not use a marketing hero, intro video, mandatory start screen, separate tutorial route, or scroll-driven landing page. The playable board must be visible and usable on the first screen.
- Do not autoplay audio, require sound, use camera shake, force device motion permissions, or continue ambient and completion animation when prefers-reduced-motion is enabled.
- Do not make mobile play depend on hover, dragging, tiny targets, or desktop keyboard shortcuts. Avoid clipped grids, horizontal overflow, blocked controls, and console errors at 1440×900 and 390×844.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemap work, keyword-stuffed text, dates, pricing, membership claims, or promotional sections. Use only a plain BRAND document title and the original favicon.
- Do not mention VibeFather anywhere in the game except the optional CREDIT link, and do not hard-code default world-specific copy outside src/content.ts.

---
Inspired by 黄玉秘藏 3D Interactive Game — https://www.kimi.com/showcases/3dmake
— Prompt by VibeFather · https://vibefather.ai/t/light-beam-lens-puzzle-game · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.