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

# Koi Pond Web Toy

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

## Brief
[BRAND] is a web toy: one full-viewport garden pond seen from directly above and drawn entirely in code. Koi with undulating bodies and flowing fins swim over light caustics, between lily pads, stepping stones and the edge of a wooden bridge. The visitor switches between four seasons, toggles night and rain, taps for ripples, presses and holds to feed the fish, drags to draw a current, turns on a generative soundtrack, and can start a [FOCUS_MINUTES]-minute focus mode that hides the interface so the page works as a desk background. The scene is the whole site: no marketing sections, no scrolling, no second page.

- Audience: People who keep a calm tab open while they work, and developers and designers who enjoy and share small code-drawn web toys.
- Goal: Look finished and beautiful as a still screenshot in the first two seconds, reward every touch with a believable physical response, and be pleasant enough to leave running for a whole focus session on a laptop or a phone.
- Tone: Quiet, unhurried and precise, like an ink-and-wash painting that happens to be alive. Copy is short, lower-key and concrete. No exclamation marks, no wellness slogans.

## Stack
- Framework: Vite 5 + TypeScript, no UI framework
- Styling: Vanilla CSS
- Libraries: vite (MIT), typescript (Apache-2.0), lucide-static (ISC), @fontsource/shippori-mincho-b1 (OFL-1.1), @fontsource-variable/instrument-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - vite.config.ts: set base to './' and build.sourcemap to false. Nothing from src/ is copied into dist/.
  - index.html: title '[BRAND] · Koi Pond', a link to ./favicon.svg, and an inline style block that sets html and body to background #0E3B43, margin 0, overflow hidden, so the page is ink-teal from the very first paint. public/favicon.svg is hand-written: a vermilion #F2542D koi curved into a C shape on an ink-teal #0E3B43 circle.
  - File layout: src/content.ts holds every string and the variable values; src/main.ts boots the stage; src/quality.ts picks and adjusts the quality tier; src/scene/water.ts (WebGL shader plus 2D fallback), koi.ts, flora.ts (lily pads, lotus, stones, bridge), particles.ts, ripples.ts, seasons.ts, night.ts; src/input.ts for gestures; src/audio.ts for all sound; src/ui.ts and src/styles.css for the title, dock and focus mode.
  - Fonts: import '@fontsource/shippori-mincho-b1/latin-500.css', '@fontsource/shippori-mincho-b1/latin-700.css' and '@fontsource-variable/instrument-sans' in src/main.ts. Only the Latin subset of the display face is imported so the build stays small. Font stacks: display is 'Shippori Mincho B1', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; text is 'Instrument Sans Variable', system-ui, sans-serif.
  - Icons: import the SVG files from lucide-static with Vite's ?raw suffix (for example 'lucide-static/icons/leaf.svg?raw') and inline them, so they inherit currentColor. Set stroke-width to 1.75.
  - All colors are CSS custom properties on :root with the exact hex values from the Design section, and the same values are exported from src/scene/palette.ts for canvas and shader use. Do not approximate or re-tint the four core colors.
  - Use one seeded pseudo-random generator (mulberry32, seed 7) for everything in the scene: fish roster, pad positions, particle paths. Never call Math.random in scene code, so every load opens on the same composition.
  - Read three optional query parameters on load: season (spring, summer, autumn, winter), night (1 or 0) and rain (1 or 0). They override [START_SEASON] and [START_NIGHT] and make any state linkable.
  - Expose a small read-only object window.__pond with firstFrameMs (time from navigation start to the first fully drawn frame), tier (high, mid or low) and fps (rolling average), for checking performance.

## Variables
- [BRAND] — Name of the pond (default: "Emberfin"). Shown as the large title, the small wordmark and the page title. Invented, one or two words.
- [TAGLINE] — One line under the title (default: "A small pond for long thoughts."). Up to about 40 characters, sentence case, ends with a period.
- [START_SEASON] — Season the pond opens in (default: "autumn"). spring, summer, autumn or winter.
- [START_NIGHT] — Open in night mode (default: "off"). on or off.
- [KOI_COUNT] — Number of koi on a desktop screen (default: "9"). A whole number from 4 to 16. Phones and slower devices show fewer automatically.
- [FOCUS_MINUTES] — Length of a focus session in minutes (default: "25"). A whole number from 1 to 90. Used by the timer, the dock label and the session-complete card.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/koi-pond-web-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
- Ink Teal `#0E3B43` — The water, the page background and text on gold or cream surfaces. Hard-coded exactly; it must cover most of the first screen.
- Vermilion `#F2542D` — Koi bodies and patches, the lacquered rail along the bridge edge, lantern rims, the blush on lotus tips. Hard-coded exactly; never used for body text.
- Cream `#F5EFE0` — All interface text and icons, koi bodies and fins, petals, snow, ripple rings and caustic light. Hard-coded exactly.
- Gold `#E0B04A` — Ginkgo leaves, gold koi, lantern and firefly light, bridge post caps, the Focus button, active toggle marks and the focus progress line. Hard-coded exactly.
- Deep Water `#082A31` — Vignette toward the corners, floor mottling, koi shadows, the tint behind the dock.
- Night Water `#061C24` — Water color in night mode and the night tint drawn over the scene.
- Ink `#10262B` — Koi eyes, speckles and dorsal ridge, gaps between bridge planks.
- Pad Green `#2E6F5E` — Lily pad base and moss on stones. Stays close to the water hue so the four core colors lead.
- Pad Light `#4C9A7A` — Lily pad veins and the fresh spring pads.
- Stone `#6F8480` — Stepping stones, with #8FA39D speckles on top.
- Bridge Wood `#7A4A2E` — Bridge planks, alternating plus and minus 5 percent lightness.
- Blush `#F6B8A8` — Base of spring petals and tips of lotus petals (a mix of cream and vermilion).
- Ice `#CFE6E4` — Winter ice plates at low opacity and frost rims on pads.
- Amber `#C98F3A` — Darker ginkgo leaves and food pellets.

### Typography
- Display: the [BRAND] title, season names, timer digits, the session-complete heading. Weight 500 for large sizes, 700 for the small wordmark. A mincho serif with softened, ink-bled corners.: Shippori Mincho B1 (OFL), weights 500/700
- Text: tagline, gesture hints, dock labels, tooltips, buttons. Labels are 13px, weight 600, uppercase, letter-spacing 0.06em; the tagline is 17px, weight 400, line-height 1.45.: Instrument Sans Variable (OFL), weights 400/500/600

### Layout & motion
- Spacing: No page grid: the scene fills the viewport. Interface elements sit on an 8px scale, inset 56px from the edges on the wide layout and 20px on the tall layout, plus env(safe-area-inset-*) on every side. Dock height 56px with 6px inner padding and 4px gaps. Every control is at least 44px tall; on phones dock cells may narrow to 36px wide but stay 48px tall. Scene sizes use one unit u = sqrt(viewportWidth × viewportHeight) / 1140, so u is 1px at 1440×900 and 0.5px at 390×844.
- Radius: Dock, buttons and tooltips are full pills (999px). Cards are 20px. The focus progress line has square ends. The only interface shadow is 0 12px 40px rgba(4, 22, 27, 0.35) under the dock and cards; text over the water gets text-shadow 0 1px 18px rgba(8, 42, 49, 0.55) instead of a panel.
- Motion: Every movement has a physical cause (water, wind, a fish deciding something) or marks a state change. Nothing loops just to look busy, and no two neighbours share a phase: every period and delay is drawn from a range by the seeded generator.
- Motion: Two interface easings only. Soft out: cubic-bezier(0.22, 1, 0.36, 1) for things arriving. In-out: cubic-bezier(0.65, 0, 0.35, 1) for cross-fades between states. Interface durations: 240ms for hover and reveal, 360ms for the season thumb, 600 to 900ms for the title and focus fades.
- Motion: Koi swim in a glide-and-kick rhythm: 1.6 to 3.2s of tail beats, then 0.8 to 1.6s of gliding with the body wave at 35 percent amplitude while speed decays by a fifth. Speed changes follow a critically damped spring with a 0.8s time constant, and turning is capped at 70 degrees per second at cruise, so turns are arcs, never spins.
- Motion: Ripples expand with an ease-out cubic radius and fade with an exponential opacity curve over 2.6s: fast and bright at birth, slow and faint at the end.
- Motion: Season changes are 2.4s in-out cross-fades with staggered parts; night is 1.8s in-out; rain ramps in over 2.5s and out over 4s. Interrupting a transition continues from the current blended state, never snapping.
- Motion: The simulation runs on real elapsed time with the frame delta clamped to 1/30s, pauses while the tab is hidden, and follows the reduced-motion rules in the last section.
- Imagery: Everything is drawn in code as flat, painterly shapes: solid fills with one lighter and one darker tone, soft offset shadows, no outlines, no photo textures, no sprites. Depth comes from layering (floor and caustics, fish and their shadows, surface plants and structures, ripples and light on top). The first screen's visual anchor is the scene itself: vermilion and gold on ink-teal with a large cream title.

## Pages & Sections
### [BRAND] · Koi Pond (`index.html`)
1. **Stage and first frame** — One fixed stage, 100vw by 100dvh, no scrolling, no other sections. It holds three stacked canvases and a DOM interface layer. The first screen must already be the finished picture: within 2 seconds of navigation start (check window.__pond.firstFrameMs on a normal laptop connection) the frame shows the ink-teal water with caustics, all koi mid-stroke, the lily pads, stepping stones, bridge edge, the season's leaves or petals already floating, the large [BRAND] title and the dock. There is never a black or white screen, a loading spinner, a progress bar, a splash or a 'click to start' state, and nothing on the first screen waits for a click, for sound or for fonts.
   Layout: Stacking order from the bottom: canvas#water (WebGL: floor, caustics, ripple refraction), canvas#life (2D: koi shadows, koi, food), canvas#surface (2D: pads, lotus, stones, bridge, ice, ripple rings, particles, night tint, lights), then the interface layer. All canvases use touch-action: none and user-select: none. Positions are fractions of the viewport width W and height H. Wide layout (W at least 900px and W at least H): the bridge covers the top-right corner, its edge running from (0.56W, 0) to (W, 0.38H); stepping stones arc through the bottom-left corner at (-0.01, 0.62), (0.05, 0.75), (0.12, 0.86), (0.21, 0.95), (0.29, 1.04); lily pad clusters sit at (0.68, 0.62) with 5 pads, (0.24, 0.47) with 4 pads and (0.47, 0.22) with 2 pads; the title is top-left; the dock is bottom-center; the koi school loosely orbits (0.50, 0.54). Tall layout (everything else, including phones): bridge edge from (0.58W, 0) to (W, 0.15H); 4 stones at (-0.03, 0.63), (0.09, 0.71), (0.05, 0.81), (0.14, 0.86); pad clusters at (0.70, 0.56) with 4 pads, (0.26, 0.38) with 3 pads and (0.42, 0.74) with 1 pad; title top-left with max-width 50vw so it never touches the bridge; dock across the bottom. On resize or rotation (debounced 150ms) the anchors are re-laid out, static parts are redrawn into their caches, and fish keep their positions, clamped into view.
   Motion: Boot is synchronous: create the canvases, build the scene from the seeded generator, then run 300 simulation steps (5 seconds of pond time) before the first paint so the first frame shows fish spread along natural arcs, 14 leaves or petals already floating and 8 in the air. Draw the 2D layers in the first animation frame even if the shader is still compiling; canvas#water has a CSS background of a radial gradient from #0E3B43 at the center to #082A31 at the corners, so the frame is complete without WebGL. Total JavaScript stays under 150 KB gzipped.
2. **Water, floor and caustics** — A single raw WebGL fragment shader on a full-screen triangle, written from scratch (no shader library). It paints the pond floor in Ink Teal #0E3B43 with soft value-noise mottling of plus or minus 6 percent lightness and a vignette toward Deep Water #082A31 in the corners, then adds light caustics: a web of thin bright veins in Cream #F5EFE0 with cells about 90u to 140u across, added at 12 percent strength by day. Build the veins from two layers of an animated cellular pattern (distance to the nearest cell edge, sharpened with a power of 6), the second layer at 1.7 times the scale; where veins of both layers cross, the light pools brighter. Seasonal tint: spring pure cream, summer 25 percent brighter, autumn mixed 40 percent toward Gold #E0B04A, winter 60 percent strength and slightly cooler.
   Layout: Fills the viewport behind everything. Uniforms: time, resolution, season mix, night amount, rain amount and an array of up to 24 ripples (x, y, radius, strength). Each ripple displaces the floor and caustic lookup by up to 6u along the ring's normal within an 18u-wide band around its radius, so caustics visibly bend as a ring passes. Fallback when WebGL is unavailable or the context is lost: generate three tileable caustic textures on offscreen 2D canvases at boot (stroked cell edges, softened by drawing them at three slightly different scales) and draw two of them with the 'lighter' blend mode at 10 percent alpha, drifting in opposite directions.
   Motion: The cell points orbit inside their cells so the web breathes with a period of about 7 seconds; the two layers drift in opposite directions at 5u and 8u per second. The motion is slow and continuous, never flickering. Under rain the caustics fade to 35 percent over 1.5s because the sun is gone; at night they fall to 5 percent and read as faint moonlight.
3. **Koi** — [KOI_COUNT] procedural koi (9 by default) drawn on canvas#life, sorted by depth. Roster in order, lengths in u: 1) the elder, 240, cream body with three vermilion saddle patches; 2) 200, solid vermilion with cream-edged fins; 3) 190, gold with a cream head; 4) 180, cream with one round vermilion spot on the crown; 5) 175, vermilion with ink speckles along the back; 6) 170, cream with gold and vermilion patches; 7) 160, solid gold with a faint darker scale net; 8) 150, all cream and slightly translucent; 9) 150, vermilion head fading to a cream tail. A smaller count takes the first N; a larger one repeats the roster from 2 with lengths between 150 and 200. Each fish is built on a spine of 12 points (9 on the low tier). The body is a closed smooth path offset left and right of the spine by a width profile: rounded nose, widest at 30 percent of the length (0.21 of the length across), tapering to 0.035 at the tail root. Patches are 2 to 4 soft blobs stored in body coordinates and clipped to the body, so they bend with it. Two ink eye dots sit 8 percent back from the nose, a thin ink dorsal ridge runs from 30 to 60 percent, and a cream highlight at 12 percent alpha runs along the back. Pectoral fins at 24 percent are translucent fans (cream at 55 percent alpha with five thin ribs). The tail is a two-lobed fan 0.26 of the length long, body color at 70 percent fading to transparent at the tips. Under each fish a soft shadow in Deep Water at 28 percent alpha is offset by (10u, 14u), drawn as the body shape twice at 1.0 and 1.12 scale instead of using canvas blur. Deeper fish are 8 percent smaller, 18 percent more teal and have a closer shadow.
   Layout: Fish live in the whole viewport and may pass under the bridge, the stones and the lily pads, which are drawn above them. Steering combines separation (radius 0.9 body lengths), a little alignment (weight 0.3) and cohesion (weight 0.15) with a slow heading wander whose period is 6 to 11s per fish, plus a soft turn-back that starts 140u from any viewport edge. The school loosely orbits its home point but each fish keeps its own line.
   Motion: The head leads and each spine point follows the one ahead at a fixed distance, which gives natural follow-through in turns. On top of that a travelling sine wave runs head to tail, one wavelength per body length, its sideways amplitude rising from 0 at the head to 0.11 of the length at the tail. Tail-beat frequency follows speed: 0.9 Hz at cruise (38 to 55u per second depending on size, big fish slower), up to 2.4 Hz in a burst (190u per second). Each fish alternates kicks and glides as set in the motion rules. Pectoral fins row between 25 and 70 degrees from the body in antiphase with the tail and flare to 85 degrees when the fish brakes or turns hard. The tail trails with its own spring (stiffness 40, damping 8) and exaggerates the bend of the last two spine segments by 1.6 times, so it sweeps like silk behind the body. Depth drifts slowly for each fish. In winter cruise speed drops to 60 percent.
4. **Lily pads, stepping stones and bridge edge** — Lily pads: 11 on the wide layout and 8 on the tall one, radius 34u to 66u, each a disc in Pad Green #2E6F5E with a 28-degree V notch at a random rotation, nine thin veins in Pad Light #4C9A7A at 25 percent alpha, a slightly darker rim and a soft shadow on the water offset (8u, 11u) at 30 percent. Stepping stones: flat irregular rounded shapes, radius 46u to 70u, in Stone #6F8480 with lighter speckles, a dark waterline rim in Deep Water and a small moss patch on two of them; the outer ones are cut off by the viewport edge. Bridge edge: only the corner of a wooden deck is visible. Planks 44u wide in Bridge Wood #7A4A2E run perpendicular to the edge with 2u ink gaps and alternating lightness, two or three grain lines each. Along the edge runs a 10u lacquered rail in Vermilion #F2542D with a thin cream highlight, and two round posts sit on the rail at 30 and 72 percent of its length, each with a Gold #E0B04A cap and a round paper lantern beside it (cream by day, unlit). The bridge and stones cast a soft shadow on the water offset (14u, 18u). No crests, seals, characters or lettering on any of them, and the bridge is a generic deck, not a recognizable real bridge.
   Layout: Positions as given in the stage section. Stones and bridge are static: render them once per resize and per season into an offscreen canvas and blit it each frame. Pads are drawn live because they move.
   Motion: Each pad drifts on a tiny closed path (plus or minus 3u, two different periods between 5 and 9s) and rocks plus or minus 2 degrees. When a ripple ring passes a pad it is pushed 4u outward and swells to 1.03 scale, then springs back over 500ms. Pads within 60u of a drawn current slide up to 6u along it and return. Stones and bridge never move.
5. **Title and wordmark** — On load the pond is presented like a poster: the title '[BRAND]' in the display face, the tagline '[TAGLINE]' under it, and under that one row of three gesture hints: 'Tap for ripples', 'Hold to feed', 'Drag a current'. After the visitor's first interaction with the water the large title gives way to a small '[BRAND]' wordmark. When the builder supplies a credit line (see the Credit section), show it as an 11px cream link at 60 percent opacity in the bottom-left corner; it hides together with the dock.
   Layout: Top-left, inset 56px on the wide layout and 20px on the tall one. Title: display face, weight 500, size clamp(44px, 8.4vw, 128px), line-height 0.95, letter-spacing -0.01em, Cream, allowed to wrap to two lines. Tagline: text face 17px at 78 percent cream, 16px below the title. Hints: 13px uppercase labels separated by 20px, each with a 14px icon (droplets, hand, waves), 20px below the tagline; on phones they stack vertically. Text sits directly on the water with the soft text-shadow, no panel. The small wordmark is display face, weight 700, 22px, in the same corner.
   Motion: On the first tap, hold or drag on the water, the title block fades and slides up 12px over 600ms (in-out) while the wordmark fades in over 400ms after a 300ms delay. The hint row stays 24px under the wordmark; each hint dims to 35 percent and swaps its icon for a gold check the first time its gesture is used, and the row fades out 2s after all three are done or 20s after the first interaction. Before any interaction nothing here moves.
6. **Control dock** — One floating dock with, in order: a four-way season switch (Spring with the flower-2 icon, Summer with sun, Autumn with leaf, Winter with snowflake), a hairline divider, three toggles (Night with moon, Rain with cloud-rain, Sound with volume-x when off and volume-2 when on) and the Focus button (timer icon and the label 'Focus [FOCUS_MINUTES]:00'). In winter the Rain toggle's label and tooltip read 'Snow'. Keyboard: 1 to 4 pick a season, N night, R rain, M sound, F focus, Escape leaves focus mode. Every control is a real button with an aria-label and aria-pressed, and a 2px gold focus-visible ring offset by 2px.
   Layout: Bottom-center, 24px above the safe area. Background rgba(8, 42, 49, 0.62) with backdrop-filter blur(14px) saturate(1.2), a 1px border of cream at 14 percent alpha, height 56px, full pill. Wide layout: season buttons show icon and label, toggles are 44px icon buttons with a tooltip that appears above after 400ms of hover or on keyboard focus, the Focus button is a Gold #E0B04A pill with Ink Teal text. The active season sits on a Cream thumb with Ink Teal icon and text. A toggle that is on shows its icon in gold with a 4px gold dot beneath. Tall layout: the dock spans the width with 12px margins as eight equal cells, icons only (the Focus cell shows the timer icon and the number of minutes), each at least 36px wide and 48px tall.
   Motion: The season thumb slides to the chosen button in 360ms with the soft-out easing. Buttons brighten on hover in 240ms and press to 0.96 scale. The dock and wordmark stay fully visible until the visitor's first interaction; after that they fade to 0 opacity and drop 8px after 6s without pointer movement, touch or key press (never while the pointer is over the dock or a control has focus), and return in 240ms on any pointer movement, touch or key. For its first 8 seconds the Sound toggle carries one slow gold ring pulse every 2.4s as an invitation; it stops for good when any control is used.
7. **Gestures: tap, hold, drag** — Three gestures on the water, the same for mouse, pen and touch through Pointer Events, with up to three pointers at once. Tap (released within 250ms, moved less than 12px): ripples. Press and hold (350ms without moving 12px): scatter food for as long as the press lasts, following the finger if it then moves. Drag (moved 12px before the hold threshold): draw a current. The long-press context menu, text selection and callout are suppressed on the canvases, and the mouse cursor over the water is a 20px cream ring drawn as an inline SVG data URI.
   Layout: Tap: three concentric rings start 0, 140 and 300ms after the tap. Each grows from 6u to 240u radius, stroke from 2.2u to 0.6u in Cream. At most 24 rings are alive (16 mid tier, 12 low); the oldest is dropped. Hold: while the press is building, a thin gold ring around the pointer fills clockwise over the 350ms so the gesture is discoverable. Then pellets fall at 9 per second within 46u of the pointer: 3.5u Amber #C98F3A dots with a cream speck, each landing with a small ring that reaches 26u in 0.7s. At most 60 pellets are alive (36 on low); uneaten pellets drift with currents and fade after 14s. Drag: the path is sampled every 24u and kept for 9s. It is shown as three thin cream streaks at 35 percent alpha following the path with dashes that travel in the drag direction at 120u per second, fading over the last 3s. At most three currents exist at once.
   Motion: Ripple radius eases out (cubic) over 2.6s; opacity follows 0.55 × e^(-2.2t) across the ring's life with a linear fade to zero in the last fifth. The same rings are sent to the water shader so the caustics bend. Koi within 140u of a tap dart directly away at burst speed for 0.6s and settle back to cruise over 1.8s; koi between 140u and 380u turn toward the spot after 500ms, drift past it and resume. Food: every koi notices pellets, but each reacts after its own delay of 150 to 900ms so the school turns in a wave, not at once. They approach at 1.6 times cruise, slow inside 90u, and circle the feeding spot as a loose rotating rosette. When a mouth comes within 10u of a pellet it vanishes with a tiny cream ring and the fish flicks its head. When the food is gone they linger 2 to 3s, then peel away outward one by one. Current: koi within 180u of the path align to its direction (weight 0.8) and ride it at 1.3 times cruise like a stream, leaving at its end; floating petals, leaves and pellets are carried along at 60u per second.
8. **Seasons** — Four switchable seasons, opening in [START_SEASON]. Each has a name and a line shown on a season card: Spring, 'Petals on the water'; Summer, 'Lotus and dragonflies'; Autumn, 'Ginkgo gold'; Winter, 'Thin ice, slow fish'. Spring: pads are smaller (0.8 radius) and fresher (Pad Light), 60 percent of them present; up to 46 petals in the air and 60 afloat, each a rounded teardrop in Cream with a Blush #F6B8A8 base. Summer: all pads at full size; three lotus blooms on pads, each with two rings of pointed petals in cream with blush tips around a gold seed head; two dragonflies (one on the low tier) with a thin gold body, two pairs of translucent cream wings and a shadow offset (22u, 30u) because they fly high. Autumn: 80 percent of the pads, some with amber edges; up to 38 ginkgo leaves, fan-shaped with a center notch and a short stem, in Gold #E0B04A and Amber. Winter: 30 percent of the pads with a cream frost rim; five to seven large polygonal ice plates in Ice #CFE6E4 at 16 percent alpha with cream crack lines at 35 percent and dark open water between them; snow caps on the stones; 140 snowflakes (98 mid, 60 low) as cream dots 1.5u to 4u.
   Layout: Falling things are drawn on canvas#surface above the pads, with a faint shadow on the water that closes in as they descend; once landed they lie flat on the surface below ripple rings. The season card appears centered horizontally at 38 percent of the height: the name in the display face at clamp(40px, 6vw, 92px), the line under it in the text face at 15px and 78 percent cream. It is not shown on first load, only when the season changes.
   Motion: Switching takes 2.4s with the in-out easing. In the first 1.2s the outgoing season stops spawning and its particles sink and fade; across the whole 2.4s the caustic tint, pad sizes (each pad on a spring, staggered 40ms) and fish speed blend to the new values; from 1.2s to 2.4s the incoming season's spawn rate ramps from zero to full. The season card rises 12px and fades in over 500ms (soft out), holds 1600ms and fades out over 700ms. Petals tumble as they fall (rotation plus a flip in width), land with a tiny ring and then drift on a breeze of 8u per second toward the lower left. Ginkgo leaves fall with a pendulum sway of plus or minus 28 degrees at 0.5 Hz, land with a ring and turn slowly as they float. Lotus blooms open petal by petal over 1.8s when summer arrives and sway 2 degrees. Dragonflies hover with a fine jitter for 1.2 to 2.6s, dart 180u to 320u in 0.35s with a hard ease-out, and now and then rest on a pad or bloom for 3 to 5s. Ice plates drift at 2u per second; koi under ice look a quarter dimmer. A tap on ice does not ring: it draws a star crack of five to seven fine cream lines 30u to 70u long in 180ms, which heals over 6s, with one muted ring at 40 percent strength beneath; a tap on open water ripples as usual. Snowflakes drift diagonally, larger ones faster, shrinking as they near the surface, then vanish on water or settle on ice.
9. **Night mode** — An independent toggle that works on top of any season; the pond opens with it [START_NIGHT]. Water shifts to Night Water #061C24, a tint of #0A2230 at 46 percent is drawn over the whole scene, and lights are added on top with the 'lighter' blend mode: the two bridge lanterns glow (gold core, vermilion rim, a soft halo of 70u), each lays a reflection on the water below the bridge edge, and fireflies appear over the pond: 26 on the high tier, 18 mid, 12 low, at full count in summer and half in spring and autumn. In winter there are no fireflies; instead snowflakes within 220u of a lantern catch its light and turn gold.
   Layout: The tint is one full-screen fill on canvas#surface after all surface objects and before the lights. Each lantern reflection is a gold streak reaching 160u out from the bridge edge, built from seven horizontal slices (five on mid and low tiers) that narrow and fade with distance. Each firefly is a 2u Gold #E0B04A point with a 10u halo and a fainter glow dot on the water directly beneath it.
   Motion: Day to night and back take 1.8s with the in-out easing; lanterns light up 400ms after the tint starts so the dark arrives first. Reflection slices slide sideways independently by plus or minus 6u at 0.4 to 0.9 Hz, and a ripple ring crossing them triples that wobble for 1s. Fireflies wander on slow curved paths at 12u to 20u per second and pulse on their own cycles of 2.8 to 4.5s with a sine ease, dark for about a third of each cycle.
10. **Rain** — A toggle that seeds the surface with raindrops and changes the light and the sound. Drops land at random points: 14 per second on the high tier, 10 mid, 7 low. In winter the same toggle thickens the snowfall to 2.5 times the flakes instead of making drops.
   Layout: Each drop is one ring growing from 4u to 46u in 0.9s with a small cream dot at its center for the first two frames. Raindrop rings count toward a separate cap of 40 and are not sent to the shader. While it rains the whole scene is 8 percent darker.
   Motion: Rain ramps in over 2.5s and out over 4s with the in-out easing: drop rate, darkening and the caustic fade all follow the same ramp. Floating leaves and petals jitter slightly when a drop lands within 30u. Koi ignore rain.
11. **Generative soundtrack** — All sound is synthesized with the Web Audio API; there are no audio files. Sound is off on load and starts only when the visitor turns on the Sound toggle (which also creates the audio context inside that click). The toggle is the mute control and shows its state at all times. Layers: a drone of two soft oscillators at D3 and A3 through a 900 Hz low-pass with a 0.07 Hz tremolo; a melody of bell-like notes (a sine plus a quieter triangle an octave up, 20ms attack, 3.2s exponential decay) picked by a random walk of at most two steps on a pentatonic scale, one note every 1.4 to 4.2s with a one-in-four chance of a second note 380ms later, fed into a feedback delay (0.42s, feedback 0.35, 30 percent wet); a water bed of generated noise through a band-pass that sweeps 400 to 900 Hz at 0.11 Hz. Scale by season: spring and summer D major pentatonic (D E F# A B), autumn D minor pentatonic (D F G A C), winter the same minor scale an octave higher with gaps of 3 to 7s and a glassier tone. Night drops the melody an octave and, outside winter, adds synthesized crickets (short 4.2 kHz chirp triplets every 1.5 to 3s, very quiet). Rain adds a high-passed noise bed and about three small pitched drips per second. Touch sounds: a tap plays a soft 'bloop' (a sine gliding from 520 to 260 Hz in 160ms) panned to the tap's horizontal position; pellets tick lightly (rate-limited to 12 per second); a crack on ice is a short bright click; a season change plays a rising two-note interval from the new scale.
   Layout: Signal path: every layer into a master gain (0.5), a gentle compressor, then the output. No visual panel beyond the Sound toggle.
   Motion: The master fades in over 1.5s and out over 0.8s. Rain and night layers follow the same ramps as their visuals (2.5s in, 4s out; 1.8s). Notes are scheduled slightly ahead on the audio clock so timing stays even when frames drop. Sound keeps playing when the tab is in the background so the pond can accompany other work.
12. **Focus mode** — The Focus button turns the pond into a desk background with a [FOCUS_MINUTES]-minute timer. The dock, wordmark, hints and cursor ring fade away, leaving only the scene, a hairline progress line and small remaining-time digits. The water still answers taps, holds and drags. Moving the pointer or touching the screen reveals one small pill in the top-right corner with 'Pause' (or 'Resume') and 'Exit focus'; Space also pauses and Escape exits. At zero a soft chime plays, one slow gold ring spreads from the center of the pond, and a card appears: heading 'Session complete', line '[FOCUS_MINUTES] minutes by the water. The koi kept watch.', buttons 'Another round' and 'Back to the pond'. The chime is the timer's purpose, so it plays even when the ambient soundtrack is off (starting focus mode is the gesture that unlocks audio).
   Layout: Progress line: 2px tall along the very bottom edge, full width, track in cream at 10 percent, fill in Gold at 55 percent growing left to right. Digits: display face, 28px, cream at 28 percent opacity, bottom-left with the standard inset, format MM:SS, each character in a fixed-width slot of 0.62em so the numbers never jitter. The pill matches the dock's style at 40px height. The card is centered, 360px wide at most, 20px radius, dock background, with the heading in the display face at 36px and the primary button in gold.
   Motion: Entering: interface fades out over 800ms (in-out) and the progress line and digits fade in over the same time. The pill appears in 240ms and hides after 3s without input. The timer is computed from wall-clock timestamps, not frames, so it stays correct when the tab is hidden; where the Screen Wake Lock API exists, hold a screen wake lock during the session and release it on exit, failing silently otherwise. The chime is three strikes 1.6s apart, each a bell of A4, A5 and E6 partials with a 6s decay. The gold ring grows to the far corner in 4s with the ripple easing, and the card fades up 12px in 600ms (soft out) one second after the first strike.
13. **Adaptive quality and phones** — The pond must stay smooth on phones, aiming for 60 frames per second and never settling below 30. Pick a tier at boot: low when the primary pointer is coarse or the shorter viewport side is under 600px; otherwise mid when the device reports 4 or fewer logical cores or 4 GB or less of memory; otherwise high. High: 2D canvases at min(devicePixelRatio, 2), water at min(devicePixelRatio, 1.5), all [KOI_COUNT] koi, full particle counts. Mid: 2D at min(devicePixelRatio, 1.5), water at 0.75 of CSS pixels times min(devicePixelRatio, 1.5), 80 percent of the koi, 70 percent of particles. Low: 2D at min(devicePixelRatio, 2), water at 1.0 of CSS pixels (pixel ratio 1), 60 percent of the koi (at least 4) with 9-point spines, 45 percent of particles, one caustic layer instead of two.
   Layout: No visible quality control. The tier-specific counts quoted in the other sections (rings, fireflies, raindrops, pellets, snow, lantern slices) all come from one table in src/quality.ts.
   Motion: A governor watches the average frame time over the last 90 frames. Above 22ms for 2 seconds it steps one tier down while running: surplus koi swim off-screen and do not return, and particles stop spawning until they are under the new cap, so nothing pops. Below 12ms for 10 seconds it may step back up, never above the tier chosen at boot. Hot loops allocate nothing per frame: ripples, pellets and particles come from fixed pools. The loop stops while the tab is hidden and resumes without a time jump.
14. **Reduced motion** — When prefers-reduced-motion is set to reduce (checked at boot and on change), the pond is still a finished, living picture but much calmer: koi swim at 35 percent speed with half the tail amplitude and never burst; caustics drift at a quarter speed; petals, leaves and snow rest on the surface at 60 percent count with nothing falling; one dragonfly rests on a pad; fireflies stay in place with a slow 6s glow; lantern reflections hold still. A tap makes a single ring lasting 1.2s and pads do not bob. Rain falls at 3 drops per second. Feeding and currents still work, at the reduced fish speed.
   Layout: Same composition and controls.
   Motion: Season, night and focus changes become 400ms opacity cross-fades with no movement; interface transitions are 150ms opacity only; the invitation pulse on the Sound toggle and the sliding of the season thumb are removed.

## Assets
- image: None to download. Every visual is drawn in code: the water in a WebGL fragment shader, everything else with Canvas 2D paths. No photographs, textures, sprite sheets, video or audio files anywhere in the project. public/favicon.svg and the cursor ring are hand-written SVG.
- icon: lucide-static (ISC), installed from npm and inlined from its icons folder: flower-2, sun, leaf, snowflake, moon, cloud-rain, volume-2, volume-x, timer, pause, play, x, check, droplets, hand, waves. If a name is missing in the installed version, draw an equivalent 24px stroke icon by hand. Listed in ASSETS.md.
- font: Self-hosted through npm: @fontsource/shippori-mincho-b1 (Latin subset, weights 500 and 700) and @fontsource-variable/instrument-sans, both OFL-1.1. Vite bundles the woff2 files into dist/. Listed in ASSETS.md with package name, source URL, author and license.

## Don'ts
- Do not show a black or white screen, a loading spinner, a progress bar, a splash screen or a 'click to start' state. The first frame, within 2 seconds, already contains koi, caustics, lily pads, the title and the dock.
- Do not change, approximate or re-tint the four core colors: #0E3B43, #F2542D, #F5EFE0 and #E0B04A are used exactly as written.
- Do not use system default fonts for the title or labels, and do not load fonts from any CDN or font service. Fonts come only from the two Fontsource packages and ship inside dist/.
- Do not add any image, video or audio file: no photo textures, sprite sheets, sampled nature recordings or music loops. Everything is drawn and synthesized in code.
- Do not add a UI framework, an animation library, a 3D engine or a shader library. Raw WebGL, Canvas 2D, the Web Audio API and vanilla CSS only.
- Do not add a backend, API calls, analytics, cookies, forms or any third-party request. Everything is local and static.
- Do not use CDN script or link tags. Do not hotlink anything.
- Do not ship source maps or copy src/ into dist/. Keep dist/ far under 20 MB (it should be well under 1 MB).
- Do not use absolute asset paths; keep Vite's base at './' so the site works from any subfolder. The site is the single file index.html.
- Do not autoplay sound. Audio starts only from the Sound toggle or from starting focus mode, and the Sound toggle always shows the current state.
- Do not add marketing sections, scrolling content, pricing, testimonials, sign-up prompts or a second page. The pond is the whole site.
- Do not move things for decoration: no pulsing buttons (beyond the one 8-second invitation on the Sound toggle), no looping interface animation, no parallax on the title, no screen shake.
- Do not let fish spin in place, turn instantly, swim in sync or pop in and out of existence. Counts change only by fish leaving or entering at the viewport edge.
- Do not hard-cut between seasons or between day and night, and do not snap when a transition is interrupted.
- Do not ignore prefers-reduced-motion, and do not render above the pixel-ratio caps of the quality tiers.
- Do not let a long press open the context menu, select text or scroll the page on touch devices.
- Do not draw recognizable real gardens, temples, bridges or landmarks, and no crest, seal, logo-like mark or lettering on lanterns, stones or the bridge.
- Do not include characters or creatures from films, anime or games, or any named or mascot-like fish, dragons or spirits. The koi are anonymous animals.
- Do not imitate the interface, sounds, mascots or slogans of existing pond or focus-timer apps.
- Do not mention any AI model, tool or company in the copy or interface, and do not use real brand names anywhere. [BRAND] is invented.
- Do not log errors or warnings: zero console output at 1440×900 and at 390×844, with and without WebGL.

---
Inspired by Code-drawn koi pond web toy with switchable seasons, night mode and a focus timer by @ann_nnng — https://www.24vids.com/video/never-seen-a-model-this-powerfulclaude-fable-5-just-helped-me-build-this-whole-p-tw-2072648308846370897
— Prompt by VibeFather · https://vibefather.ai/t/koi-pond-web-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.