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

# 3D Flower Garden Toy

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

## Brief
Build [BRAND], a single-page interactive 3D flower garden set in [GARDEN_NAME]. The opening headline is [HEADLINE]. A visitor picks one of four flowers from [FLOWER_SET], clicks or taps open ground to plant a six-flower clump, adjusts one shared wind field, drags to orbit, pinches or scrolls to zoom, downloads a clean garden snapshot, and can reset to the original seeded meadow. The four names map in order to radial, cup, bell, and star procedural flower geometries. This is a playable full-viewport toy, not a marketing landing page.

- Audience: Designers, creators, educators, and developers looking for a calming interactive web toy, a botanical demonstration, or a small procedural-art experience that works with mouse, touch, and keyboard.
- Goal: Let a first-time visitor plant a recognizable clump within five seconds, understand every visible control without opening help, and leave with a PNG garden postcard if they wish. Maintain smooth interaction with hundreds of flowers on desktop and mobile.
- Tone: Quietly joyful and observant, like a one-page field notebook. Use short, plain instructions and gentle feedback; no scores, streaks, currency, competitive mechanics, or exaggerated claims.

## Stack
- Framework: Vite 5 + TypeScript 5
- Styling: Vanilla CSS
- Libraries: three (MIT), lucide (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/dm-sans (OFL-1.1), vite (MIT), typescript (Apache-2.0), @types/three (MIT)
- 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. Pin three 0.170.0 and lucide 0.468.0; use Vite 5.4, TypeScript 5.6, @types/three 0.170.0, and current Fontsource variable packages. Use one index.html with src/main.ts as its entry.
  - vite.config.ts: base './', build.outDir 'dist', build.sourcemap false, build.target 'es2020', assetsInlineLimit 0. Do not copy src/ into dist/. All runtime files must resolve locally through relative URLs.
  - File layout: src/content.ts (all variable values, copy, ordered flower names and botanical colors), src/main.ts (composition and lifecycle), src/style.css, src/garden/Garden.ts (renderer and animation loop), src/garden/geometry.ts (terrain and four flower geometries), src/garden/instances.ts (instanced pools and wind shader), src/garden/interactions.ts (raycast, pointer and keyboard planting), src/garden/snapshot.ts, and src/ui.ts (dock, help, reset, toasts and accessibility). Do not add React or a state framework.
  - Import '@fontsource-variable/fraunces' and '@fontsource-variable/dm-sans' in src/fonts.ts and import that module from main.ts. index.html: lang en, theme-color #DDEDE6, local favicon.svg, and title '[BRAND] — an interactive flower garden'.
  - Use a fixed mulberry32 PRNG seeded with 1207 for the initial arrangement and clump offsets so reset restores exactly the same meadow. Keep application state in one GardenState object: selectedFlower 0–3, wind 0–100 default 35, clumps, camera state, helpOpen, resetOpen and toast. Do not persist or transmit garden data.
  - Renderer: THREE.WebGLRenderer with antialias true, alpha false, powerPreference 'high-performance', outputColorSpace SRGB, ACESFilmicToneMapping, exposure 1.05, and PCFSoftShadowMap. Set clear color to Sky. Use a HemisphereLight plus one warm DirectionalLight with a 1024 shadow map on mobile and 2048 on desktop. No HDR, image textures, or remote environment maps.
  - Camera: PerspectiveCamera at 38 degrees, near 0.1, far 120, initial position (10, 8.5, 12), looking at (0, 0.7, 0). Use OrbitControls imported from three/addons with target (0, 0.7, 0), damping 0.08, minDistance 10, maxDistance 25, minPolarAngle 0.45, maxPolarAngle 1.25, pan disabled and autoRotate disabled. Fit the complete island on narrow screens by increasing distance, not by cropping it.
  - Geometry: construct one original asymmetric bean-shaped grass island about 14 by 10 world units from radial segments, with a softly scalloped outline, gentle heightAt(x,z) undulation, and a 0.75-unit soil edge with two darker cut-earth bands. Place every plant with the same heightAt function. Add a broad matte ground plane below the island for soft contact shadow and a few code-built angular stones outside the main planting area. No terrain silhouette or object placement from the reference.
  - Botany: each flower type gets reusable stem, leaf, petal and center geometry. Type 0 is a radial daisy-like head with 10 narrow ivory petals; type 1 is a six-petal open coral cup; type 2 is a drooping cluster of five lavender bells; type 3 is a star-like head with eight blue petals. Use two small leaf meshes per stem. Flower heights vary from 0.65 to 1.2 units through the PRNG. When FLOWER_SET changes, rename the four buttons and adjust their natural botanical colors in content.ts while preserving these four distinct geometry families.
  - Performance: use InstancedMesh pools grouped by flower type and plant part, plus one instanced grass pool; never allocate one Mesh per flower. Preallocate for 120 clumps of six flowers (720 blooms) and hide unused instances with zero scale. Use 1800 grass blades on desktop and 900 on mobile. Store per-instance birth time, phase, height and growth data as InstancedBufferAttributes. The wind shader bends vertices according to local height, world position, shared time and wind uniforms; update uniforms and instance matrices only when needed, without per-frame geometry creation.
  - Adaptive quality: cap devicePixelRatio at 1.75 on desktop and 1.35 on mobile. After the first 120 visible frames, if average frame rate is below 45 fps, reduce pixel ratio in 0.25 steps to a minimum of 1 and reduce visible grass instances by one third. Pause the animation loop while document.hidden. Resize through ResizeObserver and update camera aspect and renderer size without recreating the scene.
  - Planting: raycast pointer coordinates against the grass top mesh. Accept only ground inside the planting boundary and at least 0.42 units from an existing clump center. A valid planting adds exactly six flowers: one at the hit point and five around it at radius 0.32–0.48 with seeded angular jitter. Initial state contains 18 distributed clumps (108 blooms); capacity is 120 clumps. Pointer up counts as planting only when movement is under 6 CSS pixels, duration under 350ms and the gesture was not a pinch; otherwise OrbitControls handles the drag.
  - Growth: each clump rises over 480ms with easeOutCubic, then petals scale and rotate open over 360ms with easeOutBack capped at scale 1. Stagger the six flowers by 55ms. Existing flowers remain planted. Idle wind is a shared vertex-shader effect, not hundreds of JavaScript animations.
  - Reduced motion: when prefers-reduced-motion is reduce, render grown flowers immediately, freeze wind at a slight static lean, omit camera interpolation and floating pollen, and use opacity-only 100ms UI transitions. Listen for preference changes. The wind slider still updates its label and static lean. All planting and export functions remain available.
  - Keyboard: the canvas is focusable with a visible planting ring. Arrow keys move that ring over valid ground, Enter or Space plants, and number keys 1–4 select flower types. Do not intercept arrows, Space or number keys while a button, slider, dialog or other form control has focus. Help, reset, snapshot and wind remain ordinary keyboard-accessible DOM controls.
  - Snapshot: render once explicitly, then use renderer.domElement.toBlob to export a PNG without preserveDrawingBuffer. Export only the 3D scene, never DOM controls or dialogs. Name the file by slugifying BRAND plus '-garden.png'. Cap the longest side at 2048 pixels, preserve the current camera and garden state, restore the previous render size afterwards, and show a success or failure toast.
  - Write ASSETS.md at the project root covering the original procedural scene and glyphs, Fontsource font packages and licenses, lucide and its ISC license, and Three.js and its MIT license. public/favicon.svg is an original four-petal geometric mark drawn in code. Keep dist/ under 20 MB.

## Variables
- [BRAND] — Garden brand (default: "Meadowmint"). An invented one- or two-word name used in the wordmark, page title, help copy and snapshot filename. Never a real brand or VibeFather.
- [GARDEN_NAME] — Garden name (default: "Wanderlight Meadow"). A short invented place name used as the intro eyebrow and in the reset copy.
- [HEADLINE] — Welcome headline (default: "Plant a little joy."). A calm sentence of three to seven words. Rewrite supporting copy if its meaning changes.
- [FLOWER_SET] — Four flower names (default: "Daisy, tulip, bluebell, cosmos"). Exactly four comma-separated US English common names, in radial, cup, bell and star geometry order. Update button labels, botanical colors, help copy and accessible names together.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/3d-flower-garden-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
- Sky `#DDEDE6` — Page and renderer clear color; pale eucalyptus daylight.
- Cream `#FFFDF4` — Control panels, dialogs, primary text fields and daisy petals.
- Ink `#1F342B` — Headings, body text, icons and dark UI details.
- Moss `#526C59` — Secondary copy, inactive icons, stems and muted labels.
- Meadow `#84A96B` — Main grass top with subtle procedural value variation.
- Soil `#8A6A4F` — Cut-earth side of the floating garden island.
- Sun `#F2C14E` — Selected flower background, focus rings and flower centers; always pair with Ink text.
- Coral `#E78072` — Default cup-flower petals and its selector swatch.
- Lavender `#9B8AC4` — Default bell-flower petals and its selector swatch.
- Petal Blue `#82B6C9` — Default star-flower petals and its selector swatch.

### Typography
- Display: wordmark, welcome headline and dialog title; use Fraunces Variable with soft optical character, not italics: Fraunces (OFL), weights 600/700
- Interface and instructions: buttons, wind values, flower names, help and toasts; use DM Sans Variable with tabular numerals for the bloom count: DM Sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base unit. Desktop top bar is 72px high with 32px horizontal padding; intro sits 28px below it at left 32px and is at most 350px wide. Bottom dock is centered 24px above the viewport edge, maximum width 880px, 16px padding and 12px gaps. At 390px, top bar is 60px with 16px padding, intro is left/right 16px and at most 300px wide, and the dock is 12px above the safe-area-aware bottom edge with two compact rows. Headline uses clamp(36px, 4.4vw, 62px) at 0.98 line height; wordmark 22px; intro body 15px/1.55; controls 13–14px; mobile headline 36px. Every interactive target is at least 44 by 44px.
- Radius: 18px on the dock and dialogs, 12px on flower buttons and the reset popover, 10px on small icon buttons, and 999px on the bloom counter and toast. Use 1px Ink at 12% opacity borders and broad soft shadows; avoid glassmorphism-heavy blur stacks.
- Motion: Initial meadow is already present on first render; do not hide it behind a loading screen or long intro. UI panels fade in over 180ms without translating the 3D scene.
- Motion: Plant growth follows the two-stage 480ms stem and 360ms petal sequence with 55ms per-flower stagger defined in Setup.
- Motion: Wind is continuous but subtle: at 35% the tips lean and recover by roughly 0.08–0.16 world units using two sine frequencies and per-instance phase, never a synchronized side-to-side rocking of the whole island.
- Motion: Selected flower buttons fill Sun and their tiny SVG bloom turns 6 degrees over 140ms; hover raises buttons at most 1px.
- Motion: The planting cursor is a thin Cream-and-Ink ring projected onto the ground; valid placement shows a small six-dot clump preview, invalid placement dims the ring without planting.
- Motion: Dialogs fade with a 120ms scrim and 160ms scale from 0.98 to 1; toasts fade and rise 4px for 160ms, remain for 2.4 seconds, then fade.
- Motion: Camera damping is limited to OrbitControls; there is no autoplay rotation, scroll-jacking, parallax page, confetti or celebratory particle burst.
- Motion: Reduced motion freezes idle sway and makes growth immediate as defined in Setup; functionality and visible state feedback remain intact.
- Imagery: No photographs, raster textures, downloaded models or generated-image files. The high-craft first-screen anchor is the interactive Three.js botanical diorama itself: asymmetric cut-earth island, four original procedural flower families, instanced grass, soft shadows and a warm sky. Use original inline SVG for the four selector glyphs and favicon, and locally bundled Lucide for utility icons. No people, characters, landmarks or branded objects.

## Pages & Sections
### Garden (`index.html`)
1. **Content model and exact default copy** — Put all visible strings in src/content.ts and render them from BRAND, GARDEN_NAME, HEADLINE and FLOWER_SET. Default intro: eyebrow '[GARDEN_NAME]', H1 '[HEADLINE]', body 'Pick a flower, then click or tap the grass to grow your own little corner of [GARDEN_NAME].' Utility labels: 'How to play', 'Reset meadow', 'Snapshot', 'Wind', and '{count} blooms'. Wind value text is 'Still' at 0, 'Light' at 1–34, 'Breezy' at 35–69 and 'Gusty' at 70–100; default reads 'Breezy · 35%'. Flower buttons use the four names in FLOWER_SET in order. Toasts: 'Six new blooms, just for you.', 'Plant on an open patch of grass.', 'Your meadow is full. Reset to begin again.', 'Garden saved as a PNG.', 'The snapshot could not be saved. Try again.', and 'A fresh meadow is ready.' Do not leave any hard-coded default flower name when FLOWER_SET changes. Rewrite natural supporting copy for alternate values, keep it in US English, and derive the snapshot filename from BRAND.
   Layout: Content-only section; no separate visible panel. One-page state drives the stage and all overlays.
   Motion: Toast updates use an aria-live polite region. Do not announce animation frames or wind changes continuously.
2. **Full-viewport garden stage and top bar** — The first screen is the playable meadow, pre-seeded with 18 clumps so it never starts empty. Top-left wordmark is an original four-petal SVG followed by [BRAND]. Top-right controls are the bloom counter, HelpCircle icon button labeled 'How to play', and RotateCcw icon button labeled 'Reset meadow'. Below the wordmark show the eyebrow, H1 and instruction from the content model. On desktop the island composition favors the center-right so the intro remains readable; on mobile place the intro in a compact top block and fit the whole island between it and the bottom dock. Use a soft Cream radial wash behind only the intro text if needed for contrast, never a full-screen overlay.
   Layout: Canvas is fixed inset 0 with width and height 100%; DOM overlays sit above it. Top bar spans the viewport. Intro is non-interactive except for its text selection and does not block planting elsewhere. Desktop intro width 350px; mobile intro width min(300px, calc(100vw - 32px)). The 3D island remains the largest visual element at both 1440×900 and 390×844.
   Motion: Meadow and initial flowers are visible immediately. Wind begins only after the first frame; no intro camera flight.
3. **Procedural flowers, grass and weather** — Render the four geometry families and botanical colors defined in Setup, with visible differences in silhouette rather than recolors of one model. The default daisy has an ivory radial head and gold center, tulip a coral open cup, bluebell a hanging lavender cluster, and cosmos a blue eight-point star form. Add varied stem height, leaf angle and head rotation within each clump. Meadow grass shares the same wind direction and strength as flowers. Wind 0 stops dynamic sway; 100 produces stronger bending but never uproots or detaches heads. The current flower choice affects new clumps only, never recolors existing ones.
   Layout: Flowers sit on the grass top with no floating stems or detached petals. Keep stones and the outer 0.6-unit rim free of new planting. Flower heads must remain legible from the initial camera at desktop and mobile sizes.
   Motion: Use the shared shader wind field and growth timing from Setup. Reduced-motion mode replaces continuous sway with a static lean.
4. **Planting and camera interaction** — A click or short tap on valid open grass plants six flowers of the selected type. Show the six-dot ground preview on pointer hover and the keyboard planting ring when the canvas has focus. Dragging rotates the camera, wheel zooms, one-finger drag orbits on touch, and two-finger pinch zooms; these gestures must not accidentally plant. Invalid ground produces the open-patch toast and no state change. At capacity, further valid clicks produce the full-meadow toast. Arrow keys move the keyboard ring, Enter or Space plants, and 1–4 choose flower types.
   Layout: All interaction stays inside the single stage; no scrolling page, route change or separate game screen. Set touch-action none only on the canvas, not on dock controls. Canvas fallback text says 'This garden needs WebGL. Try a current browser with hardware acceleration enabled.'
   Motion: Planting feedback starts within 50ms of pointer up. Orbit damping is gentle and stops on reset. No motion is required to understand the current selection.
5. **Flower and wind dock** — The bottom dock contains four flower selector buttons in FLOWER_SET order, a Wind range input from 0 to 100 default 35, and a Camera icon button with visible text 'Snapshot'. Each selector has an original SVG silhouette, its full common name and a number-key hint on desktop only. Selected state uses Sun fill, Ink text and a 2px Ink border; unselected state is Cream with a subtle border. The wind control shows 'Wind', the current word and percentage, and updates continuously while dragged. Snapshot remains enabled after the first render.
   Layout: Desktop: one horizontal 880px-max row with four equal flower buttons, a 170px wind group and a 122px snapshot button. Mobile: first row is four equal selector buttons with 11–12px labels allowed to wrap to two lines; second row is a flexible wind slider plus a 48px snapshot icon button with accessible label. Dock respects safe-area insets and never covers the top intro. All controls have 44px minimum targets and 2px Sun focus outlines with 2px Ink outer contrast.
   Motion: Selection and hover use the restrained 140ms feedback in Design. Slider movement updates shader uniforms without animating the DOM panel.
6. **Help, reset confirmation and feedback** — How to play opens a dialog titled 'A field guide' with four numbered items: 'Choose a bloom' / 'Pick one of the four flowers in the garden dock.'; 'Plant a clump' / 'Click or tap open grass. Drag to orbit; scroll or pinch to zoom.'; 'Change the weather' / 'Move Wind from Still to Gusty. Your flowers lean together.'; 'Keep a postcard' / 'Snapshot downloads only the garden, without the controls.' Add 'Keyboard: 1–4 choose flowers, arrow keys move the planting ring, Enter plants.' Close button is 'Back to the meadow'. Reset opens a confirmation titled 'Start this meadow over?' with 'Your planted clumps will be replaced by the original [GARDEN_NAME]. Downloaded snapshots stay on your device.' Buttons are 'Keep gardening' and 'Reset meadow'. Confirming restores seed 1207, 18 clumps, first flower, wind 35 and initial camera, then shows the fresh-meadow toast.
   Layout: Centered Cream dialog, maximum width 460px and margin 16px, above a translucent Ink scrim. Reset uses the same dialog component. Trap focus, return focus to the opener, close on Escape and scrim click only for help; reset closes on Escape or Keep gardening, never by an accidental scrim tap. Toasts sit above the dock without covering flower selectors.
   Motion: Use 120–160ms opacity and tiny scale transitions, or 100ms opacity only under reduced motion. No auto-opening dialog.
7. **Quiet credit** — Render [CREDIT] as one quiet 12px text link in the bottom-left corner on wide screens and inside the help dialog footer on mobile. It is the only mention of VibeFather in the site. There are no other footer links, dates, social counts, prices or promotional messages.
   Layout: Desktop credit sits 18px from the left and bottom edges and must not overlap the centered dock. Mobile credit appears only inside the help dialog so it cannot crowd the controls.
   Motion: None beyond the standard text-link hover underline.

## Assets
- image: No raster images, image downloads, generated-image files, external textures or 3D model files. Draw the terrain, grass, four flower families, stones, shadows, selector glyphs and favicon procedurally with Three.js, CSS and inline SVG. In ASSETS.md identify these as original code-drawn assets.
- icon: Install and bundle lucide 0.468.0 (ISC) for HelpCircle, RotateCcw, Camera, X, Check, MousePointer2 and Wind; use 18–20px icons, 1.75 stroke width and currentColor. Flower-selector silhouettes and the four-petal favicon are original inline SVG, not reference or brand icons. Record Lucide in ASSETS.md.
- font: Self-host Fraunces Variable and DM Sans Variable through @fontsource-variable/fraunces and @fontsource-variable/dm-sans (OFL-1.1), imported in src/fonts.ts so Vite emits local woff2 files. Record both packages and licenses in ASSETS.md. No font CDN.

## Don'ts
- Do not copy the reference's code, prompt text, Chinese copy, screenshots, terrain silhouette, plant distribution, flower models, camera composition, control layout, palette, typography, icons or other identifiable media. Do not use the source product's name, wordmark or identity anywhere in the rendered garden.
- No real brands, logos, mascots, anime or game characters, recognizable people's likenesses, landmark objects, commercial fonts, restricted UI-library source or third-party visual assets outside the explicitly listed packages.
- No photographs, raster textures, downloaded models, placeholder-image services, remote HDRIs or generated-image URLs; the entire visual scene and all flower glyphs must be original code-drawn work.
- No backend, server code, API routes, database, authentication, forms that submit, analytics, external APIs, runtime fetch calls, uploads or sharing to a service. Garden state stays in memory and snapshots download locally.
- No individual Mesh objects per flower, per-frame geometry allocation or JavaScript animation loop per plant. Use the specified instanced pools, shared shader wind, capacity limit and adaptive pixel ratio so hundreds of flowers remain practical on phones.
- No autoplay sound, scroll-jacking, auto-rotating camera, gamified scores, currencies, accounts, pop-up ads or forced tutorial. The garden is visible and playable on the first screen.
- Exactly one page at ./index.html with no router or bare-directory links. Do not add marketing sections, pricing, SEO blocks, JSON-LD, Open Graph work, sitemaps, dates or unsupported visitor counts.
- Self-host every font, icon, script and style. No CDN script or link tags, Google Fonts, third-party CSS or remote assets. Use Vite base './' and relative asset paths.
- Production build must be minified with no source maps and no src/ copied into dist/. npm run build must produce static dist/ under 20 MB with zero console errors at 1440×900 and 390×844.
- Respect prefers-reduced-motion in both CSS and WebGL: no idle sway, growth stagger or camera interpolation, while retaining immediate planting feedback and every control. Pause rendering when the document is hidden.
- All controls must work with touch and keyboard as specified, have visible focus and accessible names, and avoid accidental planting after orbit or pinch gestures. Dialogs trap and restore focus; color is never the only selected-state indicator.
- Never expose unresolved [VARIABLE] placeholders. All labels, help text, botanical colors, page title and snapshot filename must follow the current variable values; do not hard-code Meadowmint or the default flower names outside src/content.ts.
- Never mention VibeFather inside the garden except the single optional [CREDIT] link specified in Quiet credit.

---
Inspired by 3D Flower Garden Toy — https://www.kimi.com/showcases/3dmake
— Prompt by VibeFather · https://vibefather.ai/t/3d-flower-garden-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.