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

# Snow Globe Toy

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

## Brief
Build [BRAND], an original single-page 3D snow globe toy presenting [COLLECTION_NAME] with the headline [HEADLINE]. The large central globe contains three procedural miniature worlds whose display names come in order from [SCENE_SET]: a cabin, a lighthouse on rocks, and a generic city. Visitors shake by dragging the globe, pressing Shake globe, or explicitly enabling phone tilt; snow swirls with the input and then settles under gravity. A short text field updates [BASE_MESSAGE] on the globe's front brass plaque. Write the welcome and helper copy for [AUDIENCE] without turning the experience into a marketing page.

- Audience: Adapt the plain-language introduction and help text for [AUDIENCE]. The toy must remain understandable to a first-time visitor and fully usable without a motion sensor, account, or instructions outside the page.
- Goal: Let a visitor complete a satisfying shake within five seconds, see an obvious difference among all three scenes, and place a personal message on the physical-looking base. Keep rendering smooth and the primary controls discoverable at 1440×900 and 390×844.
- Tone: Tactile, wintry, intimate, and precise, like a handcrafted keepsake on a quiet desk. Use concise US English and concrete interaction feedback; avoid holiday sales language, whimsical filler, scores, streaks, and exaggerated claims.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Vanilla CSS
- Libraries: react and react-dom (MIT), three (MIT), lucide-react (ISC), vite (MIT), typescript (Apache-2.0), @fontsource/fraunces (OFL-1.1), @fontsource/dm-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create package.json with scripts dev = vite, build = tsc --noEmit && vite build, and preview = vite preview. Use React 18.3, Vite 5.4, TypeScript 5.6, three 0.170.0, lucide-react 0.468.0, and the listed Fontsource packages; install and bundle every dependency locally.
  - Configure vite.config.ts with base './', build.outDir 'dist', build.sourcemap false, build.target 'es2020', and minification enabled. Use one index.html entry and do not copy src/ into dist/.
  - Organize the project as src/content.ts for all variables and visible strings, src/App.tsx for UI state, src/components/GlobeStage.tsx for renderer lifecycle, src/globe/geometry.ts for the globe and shared parts, src/globe/scenes.ts for the three worlds, src/globe/snow.ts for the particle simulation, src/globe/input.ts for pointer and sensor input, and src/style.css for tokens and responsive rules.
  - Self-host Fraunces 500 and 600 plus DM Sans 400, 500, and 600 through Fontsource Latin subsets. Wait for document.fonts.ready before drawing plaque text. Set lang en, a plain document title '[BRAND] — [COLLECTION_NAME]', theme-color #0B1917, and an original local globe favicon.svg.
  - Split SCENE_SET on commas into exactly three trimmed names and map them in cabin, lighthouse, city order. Limit the editable base message to 28 UTF-16 characters. Keep selected scene, current message, shake state, sensor state, and help dialog state in React; keep per-frame positions and velocities in refs and typed arrays rather than rerendering React each frame.
  - Use THREE.WebGLRenderer with antialias true, alpha false, powerPreference high-performance, SRGB output color space, ACESFilmic tone mapping, exposure 1.08, and PCFSoftShadowMap. Generate reflections with PMREMGenerator and Three.js RoomEnvironment only; never download an HDRI. Add a cool HemisphereLight, one warm key DirectionalLight, and a soft blue rim light.
  - Use a PerspectiveCamera at 35 degrees, near 0.1, far 80, initially positioned at (0, 2.8, 10.5) and looking at (0, 2.25, 0). Fit the entire globe and base on narrow screens by moving the camera back and adjusting its target, never by cropping the dome or plaque. Do not add camera orbit controls; dragging shakes the object itself.
  - Model a globe approximately 4.5 world units in diameter centered at y 3.0, seated in a low walnut cylinder of radius 2.5 and height 0.72 with two thin brass rings. Add a front brass plaque plane about 2.65 by 0.48 units. Draw its text to a local CanvasTexture in Fraunces 600, dark walnut over brushed brass with a subtle lower-edge incision shadow; update the texture only when the message changes and dispose of replaced textures.
  - Build the glass as original sphere geometry with MeshPhysicalMaterial, transmission 0.9, thickness 0.12, roughness 0.08, IOR 1.45, transparent true, opacity 0.32, and depthWrite false. Add a restrained Fresnel rim and two narrow code-drawn curved highlights. Keep the miniature clearly visible through the glass; do not cover the scene with milky transparency, bloom, or bright reflection bands.
  - Give each world a distinct silhouette on a shared softly undulating snow mound. Cabin: a small timber house with a steep snow-capped gable, two amber windows, a chimney, five varied fir trees, a short fence, and a curved path. Lighthouse: a generic ivory and muted-cranberry tapered tower on angular rocks, a warm lantern room, tiny railing, three rock pools, and two windswept pines. City: six original narrow towers with varied setbacks and rooftop tanks, scattered warm windows, a pocket square, and three bare trees. No real landmark, flag, sign, character, or branded object.
  - Implement snow with THREE.Points and a soft circular shader sprite, not image textures. Use a fixed mulberry32 seed and 720 flakes on desktop or 420 on mobile. Store position, velocity, size, phase, and settled state in preallocated arrays. Start with a gentle visible flurry that settles within about five seconds; reduced-motion visitors start with settled snow.
  - Advance snow with a fixed 1/60-second step and at most four catch-up steps. Apply gravity -0.34 world units per second squared, velocity damping around 0.985 per step, low-amplitude curl-like drift, and input impulse from drag or Shake globe. Confine flakes to the inner sphere, collide with the scene's snow height, then damp horizontal motion until settled. A strong shake should lift settled flakes; after input stops, nearly all flakes must reach the mound within four to eight seconds without escaping the glass.
  - Pointer drag on the canvas rotates the globe group directly within ±0.16 radians on x and z and injects energy based on pointer velocity. Use pointer capture and a movement threshold, prevent double firing, and do not treat a simple click as a strong shake. On release, use a damped spring to return the globe upright over about 700ms while the snow continues to settle. Shake globe supplies a repeatable 1.1-second sequence of three diminishing impulses; Let it settle clears added energy and returns the globe upright.
  - Show Enable tilt only when DeviceOrientationEvent is available on a touch-oriented device. On supporting iOS versions, call requestPermission only from that button's user gesture. After permission, map beta and gamma changes to small target tilts and snow impulses, clamp values, and provide Disable tilt. Denied or unavailable sensors preserve drag and button play with a plain status message and no thrown error. Never transmit or persist sensor readings.
  - Cap renderer pixel ratio at 1.6 on desktop and 1.35 on mobile. Reuse geometry and materials, merge static scene parts where practical, avoid allocations in the frame loop, and pause requestAnimationFrame while document.hidden. Use ResizeObserver to resize without rebuilding the scene and dispose of renderer, textures, geometry, materials, listeners, and sensor handlers on unmount.
  - For prefers-reduced-motion, begin with snow at rest, remove idle drift, glass shimmer, automatic spring overshoot, and the lighthouse beam sweep. Explicit Shake globe produces one restrained 600ms flurry at no more than 35% of normal impulse, then places flakes at rest; scene changes use an immediate swap or 100ms opacity fade. Listen for preference changes and retain every editing and selection function.
  - Provide keyboard-equivalent DOM controls for every action. The focusable canvas supports S to shake, R to settle, and left/right arrows to change scenes only when it has focus; never intercept these keys inside inputs or buttons. Use visible focus, accessible names, a polite status region for scene changes and sensor feedback, and an original inline SVG snow-globe fallback if WebGL initialization fails. The fallback keeps scene selection, message editing, and an explicit CSS flake burst usable.
  - Write ASSETS.md at the project root covering original procedural geometry, generated Canvas textures, original SVG thumbnails and favicon, Three.js MIT, Lucide ISC, and both Fontsource packages with their OFL-1.1 licenses. Keep all runtime requests local and dist/ below 20 MB.

## Variables
- [BRAND] — Keepsake brand (default: "Flurryfield"). An invented short name for the wordmark, document title, help dialog, and favicon accessible label; never a real brand.
- [COLLECTION_NAME] — Collection name (default: "The Pocket Winter Collection"). A short invented collection title used as the intro eyebrow and page-title suffix.
- [HEADLINE] — Welcome headline (default: "Shake up a little wonder."). A warm four-to-eight-word invitation; adapt supporting copy if its meaning changes.
- [BASE_MESSAGE] — Default base message (default: "For your quiet moments"). An original message of at most 28 characters shown in the editable field and engraved-looking plaque.
- [SCENE_SET] — Three scene names (default: "Ember Cabin, Beacon Point, Lantern City"). Exactly three comma-separated invented names, each at most 22 characters, in cabin, lighthouse, generic city order.
- [AUDIENCE] — Audience (default: "daydreamers and creative gift-givers"). A short audience phrase used to adapt welcome and help copy while retaining the same toy and controls.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/snow-globe-toy 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
- Night `#0B1917` — Page background, renderer clear color, and deepest room shadows.
- Spruce `#132B26` — Solid workbench, header, and secondary surfaces.
- Raised Pine `#1B3932` — Selected fields, hover states, and miniature evergreen shadows.
- Line `#315047` — Hairline borders, dividers, and inactive control outlines.
- Ivory `#F3EFE3` — Primary text, button text on dark surfaces, snow, and lighthouse ivory.
- Mist `#B8C8BE` — Readable secondary copy and inactive labels.
- Brass `#D2A85F` — Active outlines, primary Shake button, base rings, and message plaque; pair with Night text on fills.
- Walnut `#5C3828` — Turned base, cabin timber, and plaque lettering.
- Ice `#C4E7E9` — Glass rim, cool highlights, rock pools, and snow sparkle.
- Ember `#F2C477` — Warm windows, lighthouse lens, and small interior lights.
- Cranberry `#9A4A44` — Muted lighthouse bands and one small cabin door accent, never a UI error color.

### Typography
- Wordmark, H1, scene names in the introduction, dialog title, and plaque lettering: Fraunces (OFL), weights 500/600
- Body copy, buttons, fields, scene selectors, status messages, character count, and help text: DM Sans (OFL), weights 400/500/600

### Layout & motion
- Spacing: Use an 8px base unit. At 1440×900, header is 68px high with 32px horizontal padding; main uses 28px vertical and 32px horizontal padding, a 280px / minmax(420px, 1fr) / 304px column grid, and 24px gaps. The center stage fills the available height and is at least 560px high; left introduction aligns near its vertical center and the right workbench aligns to its top. H1 uses clamp(46px, 4.4vw, 68px) at 1.02 line height. At 390×844 use a 56px header with 16px padding, a compact intro with 16px side insets and 38px H1, a 340px stage, then the workbench in normal flow with 16px padding. Collapse the numbered instructions to one short Drag · Choose · Write line on mobile. Allow vertical scrolling on short screens, respect safe-area insets, never overlap the globe with controls, and keep every target at least 44 by 44px.
- Radius: Use 18px on the stage and workbench, 12px on dialogs, 10px on fields and primary buttons, 8px on scene selectors, and fully round shapes only for status dots and tiny icon buttons. Use 1px Line borders and broad soft shadows. The physical glass globe may be luminous; do not turn every UI surface into translucent glass.
- Motion: Render the complete globe and miniature immediately with no splash, intro camera flight, or blocking loading treatment. The first ordinary-motion flurry settles in roughly five seconds without moving the page layout.
- Motion: Dragging tilts the physical globe directly within the stated clamp and transfers pointer velocity to snow. Release uses a damped upright spring of about 700ms; flakes continue independently and settle over four to eight seconds.
- Motion: Shake globe runs three diminishing impulses over 1.1 seconds and temporarily changes its label to Shaking…; additional presses restart from current particle positions rather than duplicating loops.
- Motion: Scene changes crossfade the outgoing and incoming miniature over 240ms with scale from 0.97 to 1, keep the same glass and base, and begin one moderate flurry in the new world. The message and camera remain unchanged.
- Motion: The lighthouse lantern rotates a subtle warm beam once every nine seconds in ordinary motion. Glass highlights remain static apart from the globe's physical tilt; no bloom pulsing, floating page ornaments, or autoplay camera rotation.
- Motion: Buttons, fields, selectors, and dialogs use 120–160ms color or opacity transitions with at most 3px movement. Toasts remain for 2.4 seconds. Reduced-motion behavior follows Setup and removes all autonomous movement.
- Imagery: The interactive Three.js snow globe is the high-craft visual anchor; use no photographs, generated bitmaps, downloaded models, image textures, or HDRIs. Create translucent but readable glass, a walnut-and-brass base, procedural snow, three intricate low-poly worlds, and a live CanvasTexture plaque entirely in code. Use deterministic Canvas-generated walnut grain and subtle snow sparkle if needed. Cabin, lighthouse, and city must have different silhouettes and tiny crafted details rather than being recolors of one model. Original inline SVG supplies the three selector thumbnails and favicon; Lucide supplies only familiar utility icons. No people, faces, mascots, characters, real landmarks, brand marks, or recognizable product designs.

## Pages & Sections
### [BRAND] — [COLLECTION_NAME] (`index.html`)
1. **Content model and exact interface copy** — Keep every visible string in src/content.ts and derive brand, collection, headline, message, scene names, and audience-facing language from the six variables. Default intro eyebrow is '[COLLECTION_NAME]'; H1 is '[HEADLINE]'; body is 'Three tiny worlds are waiting inside. Drag the globe to stir a flurry, then watch every flake find its place.' The three numbered cues are '01 · Shake' / 'Drag in quick arcs, or use the shake button.'; '02 · Choose' / 'Move among a cabin, a lighthouse, and a city.'; '03 · Personalize' / 'Write a short message for the brass base.' Workbench labels are 'Choose a world', 'Message on the base', 'Shake globe', 'Let it settle', and 'Enable tilt' when supported. The message field has maxlength 28, accessible description 'Your message appears on the front plaque. Up to 28 characters.', and a live '{n}/28' count. Stage status is 'Flurry in motion' while energy is high and 'Snow at rest' after settling. Help button is 'How to play'. Footer text is 'Three miniature worlds. One message that is yours.' Rewrite intro and help language naturally for alternate variables; never retain Ember Cabin, Beacon Point, Lantern City, or the default message outside their variable defaults.
   Layout: Content-only section implemented through the single-page state; do not render a separate copy panel. Scene names always follow SCENE_SET order and the plaque always shows the current editable message.
   Motion: Announce scene changes, sensor permission results, and clipboard-free errors through a polite status region. Do not announce particle frames or every character as a separate alert.
2. **Header and keepsake introduction** — Header left contains an original line-drawn globe mark and [BRAND] in Fraunces 600 at 22px. Header right contains the quiet label 'A tiny interactive keepsake' and a CircleHelp icon button with visible text 'How to play'. The left intro contains [COLLECTION_NAME] as an uppercase 11px eyebrow with 0.14em tracking, [HEADLINE] as the H1, the exact body copy, and the three numbered cues. Do not add marketing navigation, prices, testimonials, dates, or calls to sign up.
   Layout: The header spans the top with a bottom Line border. On desktop the introduction occupies the left grid column and does not cover the canvas; use generous space between H1, body, and cues. On mobile keep the wordmark and How to play visible, hide only the small keepsake label, place a shortened intro above the stage, and replace the three cue rows with 'Drag · Choose · Write'. No hamburger menu is needed.
   Motion: The intro is present at first paint. Only button hover color and focus rings animate; no headline reveal or moving eyebrow.
3. **Interactive snow globe stage** — Center the full globe, walnut base, brass plaque, and the selected miniature in a rich Night-to-Spruce atmosphere with a soft contact shadow. The current scene name appears at the lower-left with a small type caption 'CABIN', 'LIGHTHOUSE', or 'CITY'; a centered lower hint reads 'Drag to shake' on pointer devices and 'Drag or use Shake globe' on touch. The plaque is front-facing and legible in the initial camera. The canvas has an accessible label naming the current scene and concise keyboard instructions. If WebGL fails, replace only the canvas with an original SVG globe showing the same scene type and current message, plus visible text '3D is unavailable. You can still choose a world and write a message.'
   Layout: The canvas fills the center stage with 18px radius and a subtle Line border, not a stack of cards. Size the 3D object to occupy about 88% of stage height while leaving clear space for the small captions. Keep all captions out of the plaque and miniature silhouette. On mobile the stage is 340px high and the whole globe remains visible; controls follow below in normal flow. Set touch-action none only on the canvas so workbench fields and page scrolling remain natural.
   Motion: Implement the specified drag, fixed-step snow, Shake globe, Let it settle, scene crossfade, sensor fallback, and reduced-motion behavior. Input feedback begins within one rendered frame. Status text does not flicker between flurry and rest during tiny residual movements.
4. **Scene and message workbench** — Heading 'Choose a world' introduces three selector buttons in SCENE_SET order, each with an original SVG thumbnail, its full scene name, and a small Cabin, Lighthouse, or City type label. Selected state uses a 2px Brass outline, Raised Pine fill, and a small check icon, never color alone. Below, label the text input 'Message on the base' and initialize it to [BASE_MESSAGE]. Each edit sanitizes leading/trailing whitespace for the plaque, enforces 28 characters, redraws the local CanvasTexture, and updates the count; an empty field shows a plain brass plaque and helper 'Add a message when you are ready.' Primary button Shake globe uses a Move3d icon. Secondary Let it settle uses a Snowflake icon. Enable tilt or Disable tilt appears only when relevant, with status 'Tilt on', 'Tilt off', 'Tilt permission was not granted. Dragging still works.', or 'Tilt is unavailable. Dragging still works.'
   Layout: Desktop workbench is one solid Spruce column with 20px padding, three stacked 64px scene selectors, 20px section gaps, a full-width message field, and two full-width action buttons. Mobile uses a three-column scene grid with labels allowed to wrap to two lines, then message and action rows. Shake globe and Let it settle may share a two-column row at 390px; tilt remains full width. Keep inputs at least 44px high, labels visible, focus outlines 2px Ivory with an outer Night contrast ring, and no horizontal page overflow.
   Motion: Selecting a scene swaps only the miniature and starts one moderate flurry. Typing does not shake or tilt the globe. Shake and settle disable only their duplicate action while necessary, never the message or scene controls.
5. **Help dialog and quiet credit** — How to play opens a dialog titled 'Make a little flurry' with three steps: 'Shake it' / 'Drag the globe in quick arcs, press Shake globe, or press S while the globe is focused.'; 'Change the world' / 'Choose a cabin, lighthouse, or city. Use left and right arrows on the focused globe as an alternative.'; 'Leave a message' / 'Type up to 28 characters and watch the brass plaque change.' Add 'On a supported phone, Enable tilt asks for motion access. Motion data stays in this page and is never sent anywhere.' and 'Reduced motion keeps the same controls with shorter, gentler effects.' Close button is 'Back to the globe'. Put the optional [CREDIT] link below the dialog steps and also as a quiet desktop footer link; never add a second brand mention elsewhere.
   Layout: Use a centered 460px-max-width dialog with 20px padding, Night scrim, accessible title, close button, focus trap, Escape close, and focus return. On mobile use a bottom sheet with safe-area padding and max-height 78svh. The desktop footer sits below the main grid; on mobile place the footer after the workbench. No toast or dialog opens automatically.
   Motion: Dialog entry uses 140ms opacity and 3px vertical movement, or immediate opacity under reduced motion. Closing restores focus before any optional scene action.

## Assets
- image: Use no external or generated image files. Author the globe, base, glass, cabin, lighthouse, city, snow mound, particles, reflections, and all procedural Canvas textures in this project. Record the original Three.js, shader, SVG, and Canvas authorship in ASSETS.md; no downloaded models, HDRIs, photographs, or placeholder images.
- icon: Bundle lucide-react locally for CircleHelp, Check, Move3d, Snowflake, Smartphone, X, and RotateCcw at 18–20px with currentColor. Draw the original globe wordmark, favicon, and cabin/lighthouse/city selector thumbnails as inline SVG; do not use logos or third-party icon artwork. Record Lucide's ISC license in ASSETS.md.
- font: Install and self-host @fontsource/fraunces and @fontsource/dm-sans, importing only Latin woff2 files for the declared weights. Use the same local Fraunces font in the CanvasTexture plaque after document.fonts.ready. Record package paths, source URLs, authors, and OFL-1.1 licenses in ASSETS.md; no font CDN.

## Don'ts
- Do not use real brands, licensed characters, mascots, logos, slogans, recognizable product designs, real people's likenesses, famous buildings, landmark silhouettes, real city identities, flags, or branded signs. All scene and brand names must remain invented.
- Do not copy an existing snow globe's code, prompt text, interface copy, exact composition, decorative base, signature illustrations, unique icons, models, textures, photographs, video, or audio. Rebuild every visual from original procedural geometry and the declared local packages.
- Do not use image generation, stock photos, downloaded 3D models, remote HDRIs, external image textures, recorded sound, commercial fonts, restricted UI-library source, placeholder-image services, or additional physics and animation libraries. The declared Three.js simulation is sufficient.
- No backend, server code, API routes, database, authentication, remote form submission, analytics, third-party API, runtime fetch, sensor upload, sharing service, or account. Message, scene, and motion state stay local to the current page.
- No CDN scripts or styles, Google Fonts URLs, hotlinked assets, externally hosted icons, or remote runtime dependencies. Use Vite base './', relative asset paths, locally bundled packages, and self-hosted Fontsource fonts.
- Do not request motion permission on load, hide drag behind sensor support, autoplay sound, throw on denied sensors, or require a tutorial before play. Do not add audio, cookies, pop-up promotions, forced sharing, or a splash screen.
- Do not add marketing sections, pricing, visitor counts, dates, metadata beyond the plain title and favicon, Open Graph work, JSON-LD, sitemap code, extra routes, or bare-directory links. The only page is index.html.
- Do not allow unbounded particles, per-frame React rendering, per-frame geometry allocation, uncapped device pixel ratio, animation while hidden, or escaped snow. Follow the particle caps, fixed timestep, cleanup, and adaptive mobile rendering requirements.
- Production npm run build must emit minified static dist/ below 20 MB with no source maps and no src/ copied into dist/. It must run without console errors at 1440×900 and 390×844 and leave no horizontal page overflow.
- Respect prefers-reduced-motion in both CSS and WebGL, preserve explicit interaction feedback, provide keyboard-equivalent DOM controls and visible focus, trap and restore dialog focus, and keep touch targets at least 44px. Never use color alone for selected state.
- Do not hard-code default brand, collection, headline, scene names, audience copy, or base message outside src/content.ts. Never expose unresolved [VARIABLE] placeholders or retain default copy that conflicts with alternate values.
- Never mention VibeFather in the rendered site except the optional [CREDIT] link, and never use VibeFather or a real brand as a variable default. All copy, labels, sample data, and alt text must be US English.

---
— Prompt by VibeFather · https://vibefather.ai/t/snow-globe-toy · 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.