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

# Flower Anatomy 3D Explainer

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

## Brief
Build [BRAND], an original interactive anatomy lesson for [AUDIENCE], centered on a code-generated 3D [SPECIMEN]. The default is an Oriental lily with six tepals, six stamens, one central pistil, a three-lobed stigma, and a superior ovary with three chambers. Learners orbit and zoom the specimen, perform a four-state dissection, inspect linked labels, play a four-stage pollination sequence, and finish a five-question quiz. Use three hash-routed views, #/anatomy, #/pollination, and #/quiz, around one persistent Three.js canvas; index.html opens the anatomy view. This is a polished teaching instrument, not a marketing landing page or a video player.

- Audience: Write every label, explanation, instruction, and quiz question for [AUDIENCE]. The default tone is welcoming to curious beginners without becoming childish. Use correct introductory botany, define technical terms in plain US English, and include a visible note that geometry, structure sizes, pollen counts, and timing are simplified for clarity.
- Goal: Make the flower itself the primary interface and ensure every core action works with mouse, touch, and keyboard. A first-time visitor should understand within five seconds that they can drag the flower, and within one minute should be able to expose the ovary and identify where pollen lands. Keep all variable-derived copy, quiz content, specimen colors, tepal proportions, and model parameters in src/content.ts. When BRAND, SPECIMEN, or AUDIENCE changes, rewrite every dependent headline, explanation, label, question, model material setting, and alt string to suit the new values rather than retaining Oriental lily-specific wording.
- Tone: Precise, calm, curious, and tactile, like a beautifully designed museum specimen station. Use direct verbs and short explanations. Avoid hype, gamified shouting, classroom clipart, childish mascots, fake scientific claims, and generic AI copy.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Vanilla CSS
- Libraries: Vite 5 (MIT), React 18 and React DOM 18 (MIT), TypeScript (Apache-2.0), Three.js with bundled OrbitControls (MIT), lucide-react (ISC), @fontsource/fraunces (OFL), @fontsource/inter (OFL), @fontsource/ibm-plex-mono (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite React TypeScript project with react@18, react-dom@18, three, lucide-react, and the three listed Fontsource packages; use vite@5, TypeScript, @vitejs/plugin-react, and the matching type packages as development dependencies.
  - Set vite.config.ts to base: './' and build.sourcemap: false. Set the package build script to tsc && vite build so npm run build creates only production files in dist/.
  - Use direct Three.js inside a React component with OrbitControls imported from three/examples/jsm/controls/OrbitControls.js. Do not add react-three-fiber, Drei, Tailwind, GSAP, a physics engine, or a state-management library.
  - Organize the project as src/content.ts for all copy and specimen parameters, src/flowerScene.ts for geometry and animation, src/App.tsx for view and interaction state, src/styles.css for all visual rules, and src/main.tsx for Fontsource imports and mounting.
  - Self-host Fraunces 500, 600, and 700; Inter 400, 500, 600, and 700; and IBM Plex Mono 400 and 500 through Fontsource imports. Bundle every icon, font, script, and generated mesh locally.
  - Implement index.html, #/anatomy, #/pollination, and #/quiz with a small hash router. Keep the WebGL renderer and model mounted while switching views. The brand link returns to ./index.html and chapter links use explicit hash routes.
  - Use React state for the active route, dissection step, selected anatomical part, label visibility, pollination stage and playback, quiz answers, and best score. A derived lowercase hyphenated BRAND key may namespace the best-score localStorage entry.
  - Set the document title to [BRAND] — Flower Anatomy and use a local inline-SVG favicon made from six simple tepal outlines. Do not add other metadata or SEO features.

## Variables
- [BRAND] — Lesson brand (default: "Petal Atlas"). An invented short name for the botanical learning project.
- [SPECIMEN] — Flower specimen (default: "Oriental lily"). Use a flower whose anatomy fits the six-tepal, six-stamen teaching model; adjust its geometry, colors, and copy.
- [AUDIENCE] — Learner audience (default: "Curious beginners"). Adapt vocabulary, guidance, and quiz wording to this audience.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/flower-anatomy-3d-explainer 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
- Warm paper `#F5F1E8` — Page background and quiet outer gutters
- Botanical ink `#18342B` — Headings, primary buttons, wordmark, and high-emphasis text
- Leaf `#3E6B50` — Stem, leaves, secondary controls, and active lesson markers
- Specimen mist `#E3ECE2` — Viewport backdrop and pale diagram surfaces
- Petal coral `#EEA095` — Default lily tepals and selected-part accents; derive a different specimen color when SPECIMEN changes
- Petal light `#FFD7CA` — Tepal inner faces, soft highlights, and pale selection washes
- Pollen gold `#D99A2B` — Anthers, pollen grains, pollination path, and quiz progress
- Fine line `#B9C6B9` — Hairline borders, leader lines, timeline tracks, and separators
- Muted text `#64736A` — Instructions, secondary facts, and metadata
- Chalk `#FFFDF8` — Cards, labels, and text placed on botanical ink

### Typography
- Display headlines, specimen name, and quiz result: Fraunces (OFL), weights 500/600/700
- Body copy, controls, labels, and answer choices: Inter (OFL), weights 400/500/600/700
- Eyebrows, step numbers, shortcuts, and scientific metadata: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use a 4px base unit with 8px control gaps, 16px card padding, 24px panel padding, and 32px desktop page gutters. Cap the shared shell at 1600px. Desktop chapter rail, stage, and inspector columns are 220px, minmax(0, 1fr), and 320px with 24px gaps. Keep 44px minimum touch targets and 12px minimum separation between projected labels.
- Radius: Use 2px on small taxonomy chips, 8px on buttons, 14px on the stage and inspector, and fully circular geometry only for status dots and compact icon buttons. Avoid a dashboard made from many floating rounded cards.
- Motion: On first load, ease the specimen from 96% scale and zero opacity to full scale and opacity over 600ms while the header and inspector fade in over 300ms; do not auto-rotate the flower.
- Motion: Use damped orbit controls with damping factor 0.08, limited zoom, and a restrained floor shadow. Dragging never selects text or scrolls the stage on touch; vertical page scrolling remains available outside the canvas.
- Motion: Animate dissection changes over 650ms with cubic-bezier(0.22, 1, 0.36, 1): tepals lift and rotate outward, stamens part, then the camera and clipping plane reveal the ovary. Keep every intermediate state interruptible by Previous, Next, Reset, or label selection.
- Motion: Project HTML labels from 3D anchor positions every frame and draw fine SVG leader lines to them. Update selection with a 160ms highlight and a soft target ring rather than bouncing labels.
- Motion: Crossfade chapter inspector content over 220ms without unmounting the canvas. Pollination is a deterministic 12-second sequence with play, pause, previous, next, replay, and 0.5x or 1x speed; never start it on page load.
- Motion: For prefers-reduced-motion, remove the entrance tween, idle motion, damping, camera tweens, and particle travel. Dissection and chapter changes become immediate, and pollination becomes four user-controlled static storyboard states with the same copy.
- Motion: Pause rendering when the document is hidden or the stage is offscreen. Cap pixel ratio at 1.75 desktop and 1.5 mobile, use one directional and one hemisphere light, avoid real-time shadow maps, and reuse pollen through InstancedMesh.
- Imagery: Create every visual in code: the flower, stem, leaves, pollen, ovary cutaway, leader lines, floor shadow, wordmark, favicon, and WebGL-fallback cross-section. Use no photographs, AI-generated images, downloaded models, HDRIs, image textures, people, or mascots. The default flower uses two alternating whorls of three curved coral tepals, six copper-gold anthers, a green central pistil, and a subtle procedural speckle pattern made from small geometry marks. A specimen change must update tepal silhouette, proportions, material colors, and decorative marks from src/content.ts; a tulip uses smoother cup-shaped unspotted tepals rather than inheriting lily speckles.

## Pages & Sections
### Anatomy lesson (`index.html`)
1. **Shared header and chapter rail** — The header contains an original six-tepal inline-SVG mark, the [BRAND] wordmark, a small INTERACTIVE BOTANY label, and three ordered links: 01 Anatomy, 02 Pollination, 03 Quiz. The active link uses botanical ink and a short gold underline. The anatomy chapter rail repeats the routes with their full descriptions and shows the eyebrow BOTANY / 01, the Fraunces headline 'Inside a flower.', and the introduction 'Turn a [SPECIMEN], lift its tepals, and see how its parts work together.' Below the routes, place a compact instruction 'Drag to rotate · Pinch or scroll to zoom · Select a label to learn' and the note 'A simplified teaching model. Structures are enlarged for clarity.' On pollination and quiz routes, keep this shared shell but change the eyebrow, title, introduction, and active state to match the chapter.
   Layout: Use a 68px sticky header with a warm-paper background and one bottom hairline. At 1440×900, the main workspace fits below it with 32px outer gutters and the three-column chapter rail, stage, and inspector grid. The left rail is vertically centered rather than stuffed with cards. At 390×844, use a 58px header, hide the small INTERACTIVE BOTANY label, make chapter links a horizontally scrollable three-item row, and move the chapter introduction into a compact block above the stage with a 34px headline.
   Motion: The active chapter underline slides between links over 180ms. On mobile, route changes do not unexpectedly scroll the page; return the workspace introduction to the top only when the learner explicitly selects a new chapter.
2. **Interactive anatomy specimen** — The default stage shows the whole [SPECIMEN] prominently, angled about 20 degrees toward the camera with a short curved stem and two restrained leaves behind it. Build six lanceolate tepals as original parametric BufferGeometry in two alternating whorls at 60-degree intervals. Surround the central pistil with six filament-and-anther stamens. Model a three-lobed stigma, slender style, green superior ovary, three internal chambers, and a small readable set of ovules. Use a soft circular contact shadow and a pale specimen-mist backdrop, not a realistic vase or a copied scene. Show a LIVE SPECIMEN chip, the [SPECIMEN] name, Labels on/off, and Reset view. Four dissection buttons and Previous and Next controls are always available: 0 Whole flower; 1 Tepals lifted, moving all six radially outward by about 0.9 scene units and turning them 35 degrees downward; 2 Stamens parted, moving the stamens 0.35 units outward while keeping them visible; 3 Ovary cutaway, moving to a closer side view and clipping the front quarter of the ovary to expose chambers and ovules. Selecting Ovule automatically enters step 3. Reset view restores the camera without discarding the current dissection step; a separate Whole flower button restores step 0.
   Layout: The stage fills the center column and is at least 640px high on desktop, with the flower occupying roughly 70% of its usable height. Put specimen metadata at top left, view controls at top right, and dissection controls in a solid warm-paper toolbar along the bottom. The four step buttons use compact two-line labels and an active gold progress line. On mobile, place the stage first, use a 420px-high canvas, a two-by-two dissection grid below it, and keep the flower and primary controls visible without horizontal overflow.
   Motion: The default flower is still after its entrance. Dragging rotates with damping, pinch or wheel zooms within sensible limits, and arrow keys rotate the focused model, plus and minus zoom, and 0 resets the camera. Step transitions follow the shared dissection timing. On WebGL failure, replace only the canvas with a labeled inline-SVG flower cross-section while preserving all four states, inspectors, and quiz functionality.
3. **Linked labels and specimen inspector** — Provide six selectable anatomical labels: Tepals, Stamen, Stigma, Style, Ovary, and Ovule. Their default inspector entries are: Tepals — 'Six petal-like tepals form two whorls. In a lily, petals and sepals look nearly identical, so we call them tepals.' Stamen — 'Six stamens surround the pistil. Each has a filament that holds an anther, where pollen is produced.' Stigma — 'The three-lobed stigma sits at the top of the pistil. Its sticky surface catches compatible pollen.' Style — 'The style connects the stigma and ovary. After a compatible grain germinates, its pollen tube grows through this stalk.' Ovary — 'The superior ovary sits above the tepal attachment. Its three chambers contain ovules.' Ovule — 'Inside the ovary, each ovule contains an egg cell. After fertilization, an ovule can develop into a seed.' The initial Whole flower inspector says 'Built for making seeds.' and 'The showy tepals attract pollinators. Inside, stamens make pollen and the pistil receives it. Select a label to follow the journey.' Its primary button reads Start dissection and advances to step 1. Include a six-item text part list below the explanation so selection never depends on the canvas alone.
   Layout: The right inspector is a chalk panel with a 14px radius, 24px padding, a mono part index, a 32px Fraunces title, a plain-language paragraph, and the six-part list separated by hairlines. Projected labels use small chalk rectangles, botanical-ink text, and 1px leader lines with a 4px anchor dot. Resolve overlaps vertically and prioritize the selected label. On mobile, show the selected label plus Stamen, Stigma, and Ovary by default; the Labels control can reveal the rest, and the full inspector follows immediately below the dissection controls.
   Motion: Selecting a label highlights both the text row and the 3D structure, draws a restrained target ring, and reveals any obscuring dissection state needed to see that part. Camera focus moves only when the learner selects Focus in the inspector, never merely because a label was tapped.
4. **Shared footer** — The footer reads '[BRAND] · An interactive specimen study' on the left, 'Designed for [AUDIENCE]' in the middle, and the optional [CREDIT] link on the right. Include no date, social counters, newsletter form, pricing, or promotional claim.
   Layout: Place the footer below the workspace with a top hairline, 24px vertical padding, and the same outer gutters. Stack its three items left-aligned on mobile with 8px gaps.
   Motion: No footer animation.

### Pollination laboratory (`#/pollination`)
1. **Four-stage pollination sequence** — Change the chapter rail to BOTANY / 02, the headline 'Follow the pollen.', and the introduction 'Watch what happens after a compatible grain reaches a stigma. Play the sequence or inspect one stage at a time.' Keep the same flower and camera controls, but use a side-biased view that can show both anthers and the central pistil. Use exactly four stages: 1 Pollen release — 'Mature anthers split open and expose pollen grains.' Show a small cluster of gold grains at one anther. 2 Pollen transfer — 'A visiting pollinator carries compatible pollen from an anther to the sticky stigma. This transfer is pollination.' Move 24 instanced grains along one curved dotted route from anther to stigma; do not require a bee or mascot. 3 Tube growth — 'After pollination, a grain germinates. Its pollen tube grows down the style toward an ovule.' Fade the outer tepals to a pale ghosted treatment, show the ovary cutaway, and progressively reveal one gold tube through the style. 4 Fertilization — 'A sperm cell joins the egg cell inside an ovule. This is fertilization, not pollination. The ovule can now develop into a seed.' Highlight one ovule and the completed tube. Add the persistent note 'The sequence is simplified. Timing, grain size, and pollen numbers are illustrative.' Controls are Play sequence, Pause, Previous, Next, Replay, and 0.5x / 1x. At reduced motion, Play advances between static stages instead of moving particles.
   Layout: Reuse the anatomy stage and right inspector rather than adding a second canvas. The inspector contains the current stage number, a 32px title, its explanation, and a four-row vertical timeline; the bottom stage toolbar contains playback controls and a 12-second progress track. Stage segments are labeled Release, Transfer, Tube growth, and Fertilization. On mobile, playback controls form two rows, the timeline becomes four equal columns above the inspector, and all labels remain readable at 390px.
   Motion: Map a full 1x playthrough to 12 seconds: release 0–2 seconds, transfer 2–5 seconds, tube growth 5–9 seconds, and fertilization 9–12 seconds. Pause freezes the exact progress; Previous and Next jump to deterministic stage boundaries; Replay returns to zero. Space toggles play or pause only when the pollination stage has keyboard focus, and bracket keys change stages. Do not autoplay, loop, or keep pollen drifting after completion.

### Knowledge check (`#/quiz`)
1. **Five-question knowledge check** — Change the chapter rail to BOTANY / 03, the headline 'Check your understanding.', and the introduction 'Five questions. Choose an answer to see why it is right or wrong; your best score stays in this browser.' Reassemble the flower, hide projected labels by default, and leave it orbitable as a visual reference. Ask one question at a time in this fixed default order: 1 'Which part catches compatible pollen?' Options: Stigma (correct), Filament, Tepal, Ovule. Explanation: 'The stigma has a receptive, often sticky surface where compatible pollen lands.' 2 'Which two structures make up a stamen?' Options: Anther and filament (correct), Stigma and style, Ovary and ovule, Petal and sepal. Explanation: 'The filament supports the anther, and the anther produces pollen.' 3 'Where are the ovules located?' Options: Inside the ovary (correct), On the tepals, Inside the anther, Along the stem. Explanation: 'The ovary contains chambers with ovules inside.' 4 'Which event is pollination?' Options: Pollen moves from an anther to a compatible stigma (correct), A pollen tube enters an ovule, A sperm cell joins an egg cell, An ovule becomes a seed. Explanation: 'Pollination is pollen transfer. Later events belong to post-pollination growth or fertilization.' 5 'Which statement correctly separates pollination from fertilization?' Options: Pollination transfers pollen; fertilization joins a sperm cell with an egg cell (correct), Pollination makes seeds; fertilization opens the anther, Pollination grows the style; fertilization colors the tepals, They are two names for exactly the same event. Explanation: 'The grain must first land on a stigma; fertilization happens later inside an ovule.' After each choice, lock that question, mark the selected and correct answers, show its explanation, and enable Next question. The final view says 'Your specimen score' with the dynamic score out of five, a one-sentence review recommendation based on missed parts, Review anatomy, and Try again. Store only the best numeric score locally and provide a five-row answer review.
   Layout: Keep the 3D stage in the center column and replace the anatomy inspector with a wider quiz panel spanning the inspector column and, when space allows, overlapping no part of the canvas. The panel shows Question n of 5, five small progress segments, a 30px Fraunces question, four full-width answer buttons, feedback, and the next control. On mobile, the flower stage contracts to 300px high, the quiz follows below, and answer buttons stack full width with 12px gaps. Never hide quiz content behind the canvas or require a hover.
   Motion: Answer feedback fades in over 180ms. Correct answers use leaf green and a Check icon; incorrect selections use a restrained rust border and an X icon without shaking. Results count up over 400ms only when motion is allowed. Try again resets answers and the visible question but preserves the best score.

## Assets
- image: No raster or external visual assets. Generate the specimen, ovary cutaway, pollen, floor shadow, wordmark, favicon, leader lines, and WebGL-fallback diagram from Three.js geometry and inline SVG. Do not download or hotlink any flower image, texture, HDRI, or 3D model.
- icon: Use locally bundled lucide-react icons for RotateCcw, Eye, EyeOff, Play, Pause, ChevronLeft, ChevronRight, Check, X, Focus, Rotate3D, and Award. Draw only the original six-tepal wordmark, favicon, leader lines, and anatomical fallback as inline SVG. Record Lucide's ISC license in ASSETS.md.
- font: Self-host Fraunces 500/600/700 through @fontsource/fraunces (OFL); bundle the selected woff2 files through the normal Vite build and list the package and license in ASSETS.md.
- font: Self-host Inter 400/500/600/700 through @fontsource/inter (OFL); bundle the selected woff2 files through the normal Vite build and list the package and license in ASSETS.md.
- font: Self-host IBM Plex Mono 400/500 through @fontsource/ibm-plex-mono (OFL); bundle the selected woff2 files through the normal Vite build and list the package and license in ASSETS.md.

## Don'ts
- Do not copy the inspiration page's source prompt, code, Chinese text, exact lesson wording, quiz wording, geometry, proportions, materials, camera framing, label styling, control placement, palette, typography, icons, or animation timing. Reuse only the broad ideas of rotating a flower, staged dissection, anatomical labels, pollination, and assessment.
- Do not use the reference platform's product names, model names, company names, logos, interface branding, screenshots, images, models, textures, video, audio, or other proprietary media anywhere in the implementation or demo copy.
- Do not use real people's likenesses, anime or game characters, third-party brand logos, recognizable commercial products, decorative mascots, signature illustrations, commercial fonts, or restricted-library source code.
- Do not fetch photographs, generated images, flower models, HDRIs, textures, fonts, scripts, icons, APIs, analytics, or any other runtime resource from a remote host. Everything must be bundled locally; no hotlinks or CDN tags.
- Do not add a backend, server actions, API routes, database, authentication, network forms, third-party tracking, real pollinator data, or live scientific services. Quiz state and best score remain client-side only.
- Do not add Tailwind, react-three-fiber, Drei, GSAP, a physics engine, a state library, or another framework. Keep the specified Vite, React, TypeScript, direct Three.js, Lucide, Fontsource, and vanilla-CSS stack.
- Do not confuse pollination with fertilization, call lily tepals separate petals and sepals, place the ovary below the tepal attachment on the default model, or present the enlarged illustrative geometry and particle counts as exact biological measurements.
- Do not leave Oriental lily-specific colors, speckles, copy, alt text, or quiz wording unchanged when SPECIMEN or AUDIENCE changes. Keep all variable-dependent content and model parameters together in src/content.ts and rewrite them for the supplied values.
- Do not autoplay rotation or pollination, force pointer lock, make drag the only way to operate the lesson, or ignore prefers-reduced-motion. All controls need keyboard and touch equivalents and visible focus states.
- Do not let labels overlap excessively, drift away from their anatomical anchors, capture pointer events intended for the canvas, or make the quiz depend on selecting a 3D mesh. Provide the equivalent text part list and SVG fallback.
- Do not create additional routes, bare-directory links, source maps, copied src directories, SEO metadata, Open Graph tags, JSON-LD, sitemaps, dates, pricing, fake counters, or promotional template-library copy. Use only the plain [BRAND] title, favicon, specified hash routes, and optional [CREDIT] footer link.
- Do not exceed 20 MB in dist/. Use relative production asset paths and verify npm run build, index.html, #/anatomy, #/pollination, and #/quiz at 1440×900 and 390×844 with zero console errors, no horizontal overflow, and working dissection, pollination, and quiz flows.

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