TITLE: The Trellis — A Botanical Garden That Grows As You Read

PROMPT: Build a single self-contained HTML page that is a light, paper-textured botanical garden whose vines draw themselves on scroll. Palette: linen #f3efe2, forest #2f5d3a, leaf #7aa874, bloom #e07a5f, pollen #d9b44a, with 18%-alpha forest rules. Body background layers two soft radial tints over a 4px repeating-linear-gradient paper grain. Type: headings system-ui 600 with tight negative tracking, Latin names Georgia italic, captions ui-monospace uppercase at .2em+. Layout: slim header (garden mark plus a mono meta block), then a two-column hero — left: mono kicker with a rule, a display headline "Grow something" with a Georgia italic "slowly" on its own line, a lede, and a four-item meta row (Vines 5 / Leaves 26 / Blooms 7 / Season late spring); right: a seed packet card rotated -2.4deg with a dashed inner border, a hand-drawn inline SVG poppy (stem, two leaves, three petals, pollen centre), "Papaver rhoeas" in Georgia italic, and a sow/depth/light footer — it straightens and lifts on hover. Then three "movement" sections separated by hairline rules, each headed by a mono numeral, a system-ui heading and a right-aligned mono caption. Movement I is the trellis: a centred panel (max 900px) holding an inline SVG with viewBox 0 0 900 1500 — a faint 5x5 lattice, a soil band, five hand-authored bezier vine paths (two deep forest, three leaf green), plus two runtime-populated layers for leaves and flowers. Vines are drawn with stroke-dasharray = getTotalLength() and stroke-dashoffset mapped from scroll progress through the panel: p = (scrollY + innerHeight - panelTop) / (panelHeight + innerHeight), with each vine given its own start/end fraction and a smoothstep ease. 26 leaves and 7 flowers are positioned by sampling path.getPointAtLength() at hand-picked fractions and rotating each along the path tangent (+/-44deg for leaves, side alternating); leaves scale 0 to 1 and flowers scale 0 to 1 with rotate -70deg to 0 using an ease-out-back curve, so they pop like real growth. A warm sunbeam gradient (190% wide, soft multi-stop, no blur filter) sweeps across the panel with scroll. A footer row under the panel has a growth meter (scaleX fill plus a percentage readout) and a "Re-plant" button. Movement II is a three-card garden index: each card has an inline SVG icon (climber, perennial, seed head) that rotates and recolours on hover, a system-ui heading, a Georgia italic Latin name, a paragraph and a mono caption; the card lifts and its top gradient rule wipes in. Footer lists eight Latin names in a dotted-rule two-column list with a colophon. Interaction: scrolling grows the garden; clicking anywhere on the panel waters it — 11 droplet particles fall with a CSS keyframe using --dx/--dy custom properties and a boost value (max 0.42) is added to the growth and decays 6% per frame; hovering or focusing a flower raises a Georgia italic tooltip with its Latin name positioned from the pointer or the element's bounding box; Re-plant resets the growth multiplier to 0 and eases it back to 1 over about a second, so the garden visibly re-sprouts. prefers-reduced-motion disables the card/packet transitions and makes droplets instant.

DESCRIPTION: A quiet, printed-herbarium page in linen and forest green where the artwork is the growth itself. The trellis starts nearly bare and draws five climbing vines as the visitor scrolls, each leaf unfurling a beat behind its stem and each flower opening last with a springy overshoot. The seed-packet hero and the Latin-name index carry the printed-garden mood, while the water interaction lets the visitor accelerate a vine with a shower of droplets and re-plant the whole bed with a single button.

TECHNIQUES: scroll-progress mapping of stroke-dashoffset on hand-authored cubic bezier paths; getPointAtLength + atan2 tangent sampling to seat leaves and flowers on the vines; ease-out-back pop for leaf and flower scale/rotation; runtime SVG assembled as an innerHTML string assigned to an existing SVG group (no namespace URL); smoothstep-eased per-vine growth windows; droplet particles with per-element CSS custom properties and animationend cleanup; a decaying boost value for the watering interaction; a re-plant multiplier eased back with a rAF loop; scroll handler throttled to one write per frame with a lastP dirty gate; warm blur-free gradient sunbeam swept by scroll; inline SVG botanical icons; Georgia italic display accents; prefers-reduced-motion media query plus a matchMedia flag.

INTERACTION: Scroll to grow the garden — the five vines draw upward in sequence, 26 leaves unfurl with a springy overshoot as their point on the stem is reached, 7 flowers rotate open at the tips and along the vines, the sunbeam sweeps across the panel and the growth meter fills toward 100%. Click anywhere on the trellis panel to water it: droplets fall from the click point and the vines surge ahead of the scroll for a moment before the boost decays. Hover or keyboard-focus a flower to raise a Georgia italic tooltip with its Latin name. Press Re-plant to reset the growth multiplier to zero and let the whole bed visibly re-sprout. Hover the seed packet to straighten its tilt, and hover a garden-index card to lift it, wipe in its top rule and rotate/recolour its icon. Everything re-measures on resize.