The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# 3D Cathedral Light Tour

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

## Brief
Build a one-page first-person architecture tour for [BRAND]'s fictional [BUILDING_NAME], presented as an original [ARCHITECTURE] interior for [AUDIENCE]. The default is a Gothic cathedral nave modeled entirely with Three.js primitives and custom BufferGeometry. A full-viewport threshold view leads into six scroll-linked architectural stops; a shared time-of-day slider changes the sun, stained-glass glow, and colored floor projections. When variable values change, keep the six-stop tour, editorial layout, lighting controls, and field-note structure but redesign the procedural architecture, stop explanations, dimensions, and visual details to fit the new [ARCHITECTURE] and [BUILDING_NAME].

- Audience: [AUDIENCE], plus educators, museum interpreters, designers, and curious visitors who benefit from seeing architectural structure and daylight together. The default copy introduces core Gothic vocabulary without assuming prior architectural training.
- Goal: Let visitors identify six major architectural elements, understand their structural or spatial purpose, and observe how window position and time of day alter colored light. The primary action, [PRIMARY_CTA], advances from the threshold into the guided route; field-note controls provide direct non-scroll access to every stop.
- Tone: Contemplative, precise, welcoming, and visually cinematic. Use short declarative explanations and clearly labeled illustrative dimensions. The experience should feel like an intimate architecture exhibit, not a horror scene, fantasy game, religious service, real-estate listing, or generic landing page.

## Stack
- Framework: Vite 6 + TypeScript
- Styling: Vanilla CSS
- Libraries: three (MIT), lucide (ISC), @fontsource-variable/newsreader (OFL), @fontsource-variable/inter (OFL), @fontsource/ibm-plex-mono (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use Vite with strict TypeScript. Set base: './', build.outDir: 'dist', build.emptyOutDir: true, and build.sourcemap: false in vite.config.ts; npm run build must emit only static production files. Do not substitute React, another renderer, Tailwind, a scroll library, or a global state package.
  - Install only three, lucide, @fontsource-variable/newsreader, @fontsource-variable/inter, and @fontsource/ibm-plex-mono as runtime dependencies, plus Vite, TypeScript, and @types/three as development dependencies. Import all fonts, scripts, and icons locally.
  - Create src/content.ts as the single source for resolved variable values, navigation, hero copy, six tour stops, camera keyframes, field notes, light presets, labels, and footer copy. Include the default [BRAND], [BUILDING_NAME], [ARCHITECTURE], [AUDIENCE], and [PRIMARY_CTA] values there, rewrite all architecture-specific content when values change, and never leave square-bracket variable tokens visible.
  - Organize scene code into modules for architecture geometry, stained glass, materials, lighting, camera route, projections, and rendering; keep DOM code separate for navigation, captions, controls, diagrams, and accessibility. Use one shared state containing tourProgress, activeStop, timeMinutes, lookOffset, menuOpen, quality, and webglAvailable.
  - Use scene units as illustrative meters. The default nave is 16m wide with a 6m central aisle, 22m vault crown, six 8m bays, and an apse wall at z=-52. Place seven pairs of structural piers at x=±4.8 and z=4,-4,-12,-20,-28,-36,-44. Give each pier a stone core and twelve engaged shafts. Build pointed arches from paired quadratic curves, four curved rib segments per bay with TubeGeometry, thin custom BufferGeometry vault webs, a stone floor with subtle procedural vertex-color variation, and twelve abstract lancet windows at the six bay centers on x=±7.9.
  - Create original abstract stained glass from colored geometric meshes and dark lead came: circles, diamonds, shards, and simple rosette geometry only, with no people, saints, heraldry, writing, or copied church patterns. Duplicate simplified glass shapes as transparent additive floor-projection meshes 0.015m above the floor; do not use image textures, decal downloads, or photographed light.
  - Use MeshStandardMaterial for stone and floor, MeshPhysicalMaterial for glass, ACESFilmicToneMapping, exposure 1.05, one shadow-casting DirectionalLight, one HemisphereLight, at most three low-intensity colored SpotLights, and restrained scene fog. Cap pixel ratio at 1.5 on desktop and 1.25 on mobile, use a 1024px shadow map only on desktop, reduce dust and geometry detail on mobile, and pause rendering while the tour is outside the viewport or the document is hidden.
  - Create the time model from minutes 360–1200 inclusive in 15-minute steps. Let u=(minutes-360)/840, solar elevation=sin(πu)×58°, azimuth=75°+210°×u, sun intensity=0.25+2.25×sin(πu), hemisphere intensity=0.12+0.38×sin(πu), glass emissive intensity=0.3+1.1×sin(πu), and projection opacity=0.12+0.58×sin(πu). Move, rotate, skew, and scale the projection geometry from the same u; projection length is clamp(8,18/max(tan(elevation),0.18),32) meters. Warm the light near dawn and dusk without making noon pure blue.
  - Provide an original inline SVG nave illustration as the no-WebGL fallback, with the current stop highlighted and a simplified colored floor projection controlled by the same time input. Keep all captions, field notes, preset controls, and navigation usable without canvas or WebGL; never show a blank scene or a browser-alert error.
  - Use Lucide only for Menu, X, ArrowDown, ChevronLeft, ChevronRight, RotateCcw, Sun, and BookOpen. Give every icon button an accessible text label and at least a 44px touch target. Centralize responsive rules in src/styles.css, include visible keyboard focus and safe-area insets, support 1440×900 and 390×844 without horizontal overflow or console errors, and dispose geometries, materials, listeners, and the renderer on teardown.

## Variables
- [BRAND] — Atlas or exhibit name (default: "Vault & Light Atlas"). Invented educational project name used in the header, hero introduction, and footer; never a real institution or AI brand.
- [BUILDING_NAME] — Fictional building (default: "Alderquay Cathedral"). Invented building name used throughout the tour; it must not identify or closely imitate a real cathedral.
- [ARCHITECTURE] — Architectural style (default: "Gothic"). Architectural direction for the procedural geometry, vocabulary, materials, glass patterns, and all six explanations.
- [AUDIENCE] — Audience (default: "architecture students"). Lowercase descriptive audience phrase that fits naturally after for in introductory copy.
- [PRIMARY_CTA] — Primary action (default: "Begin the light tour"). Short button label that advances from the threshold to the next architectural stop.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/3d-cathedral-light-tour 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
- Umber black `#12110F` — Page background, deepest architectural shadows, and canvas clear color.
- Walnut panel `#1B1916` — Header, caption, light-console, and mobile-menu surfaces at 92–96% opacity.
- Ivory `#F2ECE1` — Primary headings, active labels, and high-contrast body copy.
- Limestone `#B8AA93` — Procedural stone, secondary headings, and architectural diagrams.
- Dust gray `#A69B8B` — Secondary copy and inactive labels at no smaller than 13px.
- Aged gold `#D8B26E` — Active stop, range thumb, focus outline, key sun rays, and primary action only.
- Ruby glass `#A83B4B` — One abstract stained-glass family and its matching floor projection.
- Cobalt glass `#3D628E` — A second abstract stained-glass family and its matching floor projection.
- Teal glass `#4C8078` — A third abstract stained-glass family and its matching floor projection.
- Amber glass `#D9A44A` — A fourth abstract stained-glass family and warm transmitted-light accents.

### Typography
- Hero, architectural stop titles, and section headings: Newsreader Variable (OFL), weights 400/500/600
- Body copy, buttons, captions, and controls: Inter Variable (OFL), weights 400/500/600
- Stop numbers, time readouts, dimensions, and diagram labels: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8px base unit, a maximum content width of 1440px, 40px desktop gutters, and 20px mobile gutters. Ordinary sections use 112px desktop and 76px mobile vertical padding with a 12-column grid and 24px gaps. Keep body measure between 50 and 66 characters. Caption padding is 28px desktop and 20px mobile; light-control gaps are 12–16px. Preserve 72px desktop and 64px mobile header clearance.
- Radius: Use 2px on buttons and range controls, 6px on captions and the light console, and no rounding on major sections or field-note rows. Avoid generic floating glass-card grids. Circles are reserved for progress dots and the sun-symbol control.
- Motion: On first entry, reveal the hero copy with a 16px rise over 550ms and ease the threshold camera from z=9 to z=7 over 900ms. After entry the camera is controlled only by scroll and deliberate look input; remove both entrance movements when reduced motion is requested.
- Motion: Map normalized tour progress 0,0.2,0.4,0.6,0.8,1 directly to the six camera keyframes. Interpolate camera position and look target with smoothstep, then call lookAt; never use time-based triggers that can drift from scroll. Do not hijack the wheel, snap the page, or block native scrolling.
- Motion: At each stop, allow horizontal drag to add at most ±30° yaw and vertical drag or pointer movement to add at most ±18° pitch around the current look target. Reset view removes only these offsets. On touchscreens horizontal drag looks around while vertical touch movement continues to scroll the document.
- Motion: Time-of-day changes update sun, hemisphere light, glass emissive intensity, spotlights, projection geometry, SVG diagram, and readouts from one timeMinutes value. Smooth visual lighting changes over 180ms unless reduced motion is requested; the displayed numeric value updates immediately and there is no automatic day cycle.
- Motion: Use 160–220ms opacity and at most 6px translation for captions, menus, preset buttons, and field-note return links. Active-stop changes must not wait for a long stagger, and all text remains present in the DOM for assistive technology.
- Motion: A restrained field of 180 desktop or 60 mobile dust motes may drift slowly inside the light shafts. Stop dust, entrance easing, look smoothing, and lighting interpolation under prefers-reduced-motion; scroll then selects discrete camera states instantly while every stop and manual control remains available.
- Imagery: The only hero visual is an original high-craft procedural Three.js [ARCHITECTURE] interior seen from first-person eye level. The default scene must immediately read as a Gothic nave through repeated clustered piers, pointed arcades, ribbed vaults, tall abstract stained-glass lancets, warm limestone, and colored light across a stone floor. All geometry, glass designs, material variation, dust, and projections are generated in code. No photographs, AI-generated images, downloaded models, HDRIs, texture maps, religious figures, recognizable landmarks, people, or logos are used. Original inline SVG supplies the architectural section and no-WebGL fallback; Lucide supplies only interface icons.

## Pages & Sections
### [BRAND] — [BUILDING_NAME] (`index.html`)
1. **Six-stop nave tour and shared light controls** — Set the plain document title to [BRAND] — [BUILDING_NAME] and create an original favicon from three nested pointed-arch strokes. The fixed header contains [BRAND], a small '[ARCHITECTURE] / INTERIOR STUDY' label, and links to './index.html#tour', './index.html#light', and './index.html#notes' labeled Tour, Light study, and Field notes. A mobile Menu button opens the same links in a full-width panel. Set id='tour' on the scroll shell. The first screen is stop 00, THE NAVE: eyebrow '[BUILDING_NAME] / A PROCEDURAL ARCHITECTURE TOUR'; H1 'A cathedral, read in light.'; body '[BUILDING_NAME] is a fictional [ARCHITECTURE] interior built entirely in code. Follow six architectural stops and change the sun to see how structure shapes daylight.' Primary button '[PRIMARY_CTA]' advances to stop 01; secondary button 'Read field notes' follows './index.html#notes'. Show three compact facts: '6 BAYS', '22 M VAULT CROWN', and '06:00–20:00 LIGHT RANGE', all labeled illustrative in the field notes. The next five caption states are: 01 CLUSTERED COLUMNS, 'Many shafts. One structural pier.' — 'Twelve engaged shafts gather around each stone core. The lower bundle supports the arcade while the upper shafts continue visually into the vault ribs.'; 02 POINTED ARCHES, 'A curve with a steeper purpose.' — 'Two arcs meet at a point, directing thrust downward and allowing a taller opening than a round arch of the same span.'; 03 RIBBED VAULTS, 'The ceiling becomes a visible framework.' — 'Four curved rib segments meet above each bay, giving the stone ceiling a legible skeleton while thinner webs fill the spans between.'; 04 CLERESTORY & STAINED GLASS, 'Openings that edit the sun.' — 'High windows admit daylight above the arcade. Abstract amber, ruby, cobalt, and teal glass separates that light into shifting patches of color.'; 05 APSE, 'Structure and light arrive together.' — 'The central axis ends beneath a faceted oculus. Piers, vault ribs, and floor projections converge to make the destination visible from the threshold.' Each caption includes its 01–06 progress label, a short 'Look around' hint, Previous and Next buttons, and Reset view. A persistent light console contains a Sun icon, a range input labeled Time of day, an output such as '16:30 / AFTERNOON', and small 06:00 and 20:00 endpoints; default timeMinutes is 990. Its value stays synchronized with the later light-study controls.
   Layout: Use a 600svh scroll shell with a sticky 100svh scene. The full-bleed canvas sits behind a subtle left-to-right #12110F readability gradient, never inside a browser mockup. At stop 00 on desktop, hero copy occupies columns 1–5 and is vertically centered; H1 is Newsreader 84px/0.96 weight 500, body is Inter 17px/1.65, and facts form one border-separated row beneath the CTAs. At stops 01–05 the caption occupies columns 8–12 with a #1B1916 94% background and a fine limestone border while the architecture remains dominant. The light console sits at bottom center, 460px wide and no more than 104px tall; six progress dots with accessible stop names sit above it. Use camera keyframes (position; look target) in scene meters: 00 (0,2.2,7; 0,10,-32), 01 (-2.4,2.3,-1; -4.8,8,-4), 02 (1.8,2.4,-10; 0,12,-16), 03 (0,2.5,-18; 0,21,-24), 04 (2.6,2.4,-29; 7.8,10,-32), 05 (0,2.5,-41; 0,11,-52). At 390×844, use a 64px header, H1 at 48px/1, hero copy from 104px with 20px gutters, a full-screen canvas, and a light console 16px from the bottom with width calc(100%-32px). Later captions sit above the console at no more than 42svh with internal scrolling, 20px padding, 34px titles, and Previous/Next controls always visible. Keep six 44px progress targets on one row and never cover the active caption with the console.
   Motion: Drive the camera through the six exact keyframes from scroll progress, keeping the active caption and camera on the same stop index. Stop 00 copy fades only as the visitor advances toward stop 01. The primary CTA and Previous/Next controls scroll to the corresponding normalized shell position rather than changing only the overlay. Look drag temporarily offsets yaw and pitch without altering camera position or scroll progress; Reset view restores the keyframe target. The time slider never moves the camera. Update the projection shapes from the window geometry with their own transparent materials, not a static decorative gradient, and make the default 16:30 view visibly different from 08:00 and 12:30.
2. **Interactive light study and architectural section** — Set id='light'. Eyebrow: '01 / LIGHT STUDY'. Heading: 'One room. Fourteen hours of daylight.' Lead: 'Move from 06:00 to 20:00 in 15-minute steps. The sun, glass brightness, and floor projections share the same time value.' Beside the copy, draw an original SVG side section through one bay with a clerestory opening, a labeled sun ray, and a colored polygon on the stone floor. Callouts read 'High opening', 'Changing incidence', and 'Colored projection'. Add three preset buttons: '08:00 / Morning', '12:30 / Midday', and '17:30 / Late afternoon', each with aria-pressed state, plus a second fully synchronized Time of day range. A readout panel shows TIME, SOLAR ELEVATION, and PROJECTION LENGTH using the setup formula; at the default 16:30 these are 16:30, approximately 41°, and approximately 21m. Label all values 'Illustrative model'. Button 'See this light in the nave' preserves the selected time and scrolls to tour stop 04.
   Layout: Use a 12-column grid with the SVG section in columns 1–7 at 520px desktop height and controls in columns 8–12. The SVG sits on a subtle architectural grid with no external image and keeps all labels at least 12px. Controls are separated by hairlines rather than a stack of cards; the main range is full width and presets form a three-column row. Readouts form three equal columns with IBM Plex Mono values. On mobile, the SVG is 300px high, presets remain three columns with compact labels, readouts wrap to one column only if needed, and the return button becomes full width.
   Motion: Changing either range or a preset updates the actual Three.js light state even while the canvas is offscreen, then updates the SVG ray angle, projection polygon, time output, elevation, and length in the same frame. Animate only the SVG ray and polygon with a 180ms opacity/transform transition unless reduced motion is requested. No autonomous sunlight loop, flashing glass, or decorative particle background.
3. **Six architectural field notes** — Set id='notes'. Eyebrow: '02 / FIELD NOTES'. Heading: 'A structure you can read twice.' Intro: 'The tour explains each element in place. These notes keep the same six ideas available as text, with sample dimensions for the fictional [BUILDING_NAME].' Create six full-width rows rather than cards: 01 NAVE — '6 repeated bays' — 'A clear central axis organizes movement, view, and daylight from threshold to apse.'; 02 CLUSTERED PIERS — '12 engaged shafts per pier' — 'The bundled profile divides a large support into finer vertical lines that continue into the arcade and vault.'; 03 POINTED ARCADES — '8m bay spacing' — 'Paired arcs meet above each opening, making the bay rhythm and downward load path visible.'; 04 RIBBED VAULTS — '4 rib segments per bay' — 'Curved ribs meet at a central boss while thinner webs complete the ceiling surface.'; 05 CLERESTORY GLASS — '12 abstract lancets' — 'High geometric panels filter daylight through amber, ruby, cobalt, and teal without narrative figures.'; 06 APSE & OCULUS — '1 axial faceted oculus' — 'The final opening anchors the long view and gives the colored light a destination.' Each row includes a text button 'View in tour' with ChevronRight and a target stop index. Add a small note: 'All geometry and dimensions are illustrative, not a survey of a real building.'
   Layout: Heading and intro occupy columns 1–4 and stay sticky at 104px on desktop. The six rows occupy columns 5–12, each with a 52px number column, a 34% term-and-dimension column, flexible description, and a 112px return-link column. Rows have top hairlines and 28px vertical padding. On mobile there is no sticky column; each row becomes a two-column number/content grid with term, dimension, description, and return link stacked inside the content column. Long terms wrap and no row becomes a horizontal scroller.
   Motion: Use one 160ms opacity reveal per row with no delayed blank states. View in tour scrolls to the exact matching keyframe, preserves timeMinutes, resets look offsets, and moves keyboard focus to the destination caption heading. Hover and focus change only the return link color and translate its chevron by 3px.
4. **Closing restart and footer** — Closing eyebrow: '[BUILDING_NAME] / COMPLETE THE ROUTE'. H2: 'Follow one ray. Read the whole room.' Body: 'Return to the threshold, choose another hour, or revisit any structural detail in the field notes.' Primary button 'Restart at 16:30' resets timeMinutes to 990, clears look offsets, and scrolls to stop 00. Secondary button 'Explore the light study' follows './index.html#light'. Footer left: '[BRAND] — A procedural [ARCHITECTURE] interior study.' Footer center: 'Fictional building. Illustrative geometry and daylight.' Footer right: Tour, Light study, and Field notes links using './index.html#' anchors, followed by the optional [CREDIT] link if supplied. Do not add a newsletter, ticket sales, visiting hours, contact form, social links, dates, or claims of affiliation with a religious institution.
   Layout: Closing section has a top hairline and a 7/5 grid: H2 in columns 1–7 at Newsreader 64px and copy plus buttons in columns 8–12. Footer is a separate three-column row with 28px vertical padding and 12px mono text. On mobile, closing copy stacks below a 44px H2, buttons become full width, and footer links wrap with 20px row gaps.
   Motion: Use a single 220ms fade and 10px rise on entry. Restart uses native scrolling and the specified state reset; reduced motion makes it immediate. No automatic replay, looping camera, or background animation after the tour canvas leaves the viewport.

## Assets
- font: Self-host Newsreader Variable 400/500/600 through @fontsource-variable/newsreader, Inter Variable 400/500/600 through @fontsource-variable/inter, and IBM Plex Mono 400/500 through @fontsource/ibm-plex-mono. Import only the required local package files. In ASSETS.md list the local package paths with these sources and authors: https://fontsource.org/fonts/newsreader by Production Type, https://fontsource.org/fonts/inter by Rasmus Andersson, and https://fontsource.org/fonts/ibm-plex-mono by IBM; record OFL for all three.
- icon: Use the locally installed lucide package only for Menu, X, ArrowDown, ChevronLeft, ChevronRight, RotateCcw, Sun, and BookOpen. Do not download brand icons or create a mascot. In ASSETS.md list the local lucide package path, https://lucide.dev as the source, Lucide Contributors as the author, and the ISC license.
- image: No bitmap images or external visual assets are used. The cathedral, stained glass, material variation, dust, and colored floor projections are original procedural Three.js geometry and materials; the architectural section and no-WebGL fallback are original inline SVG. Do not download photographs, AI-generated images, textures, models, environment maps, or placeholder images. Record in ASSETS.md that all visual geometry and diagrams are generated in code for this template.

## Don'ts
- Do not use or mention Kimi, Kimi K3.1 Pro, or 3D Make in the rendered site, and do not reuse their names, wordmarks, logos, product identity, Chinese copy, interface arrangement, or signature visual details.
- Do not reproduce the reference cathedral's exact geometry, dimensions, stained-glass designs, scene composition, camera path, source code, prompt text, screenshots, models, textures, icons, audio, video, or any other reference asset.
- Do not identify a real cathedral or copy its floor plan, facade, artwork, heraldry, religious figures, slogans, or institutional identity. The building, abstract glass patterns, annotations, and dimensions must remain original and fictional.
- Do not use real people's likenesses, third-party brands, commercial fonts, restricted library source, or identifiable commercial architectural visualizations.
- Do not load photographs, AI-generated images, external 3D models, HDRIs, texture maps, placeholder-image services, brand logos, or media from a CDN. The complete scene must be generated from code and dist/ must remain under 20MB.
- Do not add a backend, API routes, databases, authentication, analytics, remote forms, tracking pixels, or third-party API calls. Tour, lighting, presets, navigation, and fallback behavior must work entirely in the browser.
- Do not load fonts from Google Fonts or any other CDN. Use only the listed local Fontsource packages and their specified OFL fonts and weights.
- Do not change the fixed Vite, TypeScript, Three.js, and vanilla CSS stack; do not add React, Tailwind, a physics engine, a global state package, a scroll-jacking library, or an animation dependency for effects already specified with interpolation.
- Do not emit source maps, copy src/ into dist/, use absolute asset URLs, or require a server. Set Vite base to './' and ensure dist/ contains only the production static build.
- Do not use bare-directory links or create empty detail pages. This is one index.html page; every navigation link must use './index.html#tour', './index.html#light', or './index.html#notes'.
- Do not hide essential architectural information inside canvas-only text. Every stop and field note must exist as accessible HTML, with keyboard-operable controls, visible focus, useful aria labels, and a meaningful no-WebGL SVG fallback.
- Do not let look-around gestures trap vertical page scrolling. On mobile use horizontal drag for look and preserve vertical touch scrolling, keep targets at least 44px, and verify 390×844 without clipped captions, overlapping light controls, or horizontal overflow.
- Do not autoplay a camera route or daylight cycle, force scroll snapping, or ignore reduced motion. Remove dust, smoothing, and decorative movement when requested and retain instant manual state changes.
- Do not display dates, fake visitor numbers, ticket offers, unverified historical claims, real institutional affiliations, or claims that illustrative dimensions and daylight readings came from a surveyed building.
- Do not add SEO metadata blocks, structured data, sitemap instructions, keyword-stuffed headings, or template-provider branding inside the demo. A plain document title, simple favicon, and optional [CREDIT] footer link are sufficient.
- Do not hard-code default-only architecture copy outside src/content.ts or leave variable tokens visible. When variables change, rewrite the procedural style, stop names, explanations, dimensions, glass patterns, diagrams, and all architecture-specific copy together.

---
Inspired by 3D Cathedral Light Tour — https://www.kimi.com/showcases/3dmake
— Prompt by VibeFather · https://vibefather.ai/t/3d-cathedral-light-tour · 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.