How KUDZU was grown

i.The signature element

A continuous SVG vine grows down the entire page as you scroll, branching at every section. It is generated in JavaScript after layout: section positions are measured, a seeded pseudo-random walk plots stem points down a left rail, and a Catmull-Rom pass converts them to smooth cubic béziers. The stem's stroke-dashoffset is scrubbed by a single ScrollTrigger mapped to document scroll, so the growing tip always rides just below the fold. Branches, leaves, and tendril curls get their own one-shot triggers keyed to absolute scroll positions: branches draw in, then leaves unfurl with an elastic.out spring anchored at their stem attachment point (transformOrigin: 50% 100%). The whole thing rebuilds deterministically on resize — same seed, same vine.

ii.Palette

Everything is argued for by the subject: forest floor, new growth, dried leaf litter. No accent colour exists that a plant did not make.

iii.Type

iv.Techniques

• Generated SVG vine — seeded random walk → Catmull-Rom smoothing → dashoffset scrub (GSAP ScrollTrigger). Numeric scroll triggers per leaf; deterministic rebuild on resize.
• Blob morphing — hero and sample-box blobs are CSS radial gradients whose border-radius morphs through three keyframed states over 16s, drifting on a second offset animation.
• Springy hovers — one shared spring curve, cubic-bezier(.34,1.56,.64,1), on cards, buttons, swatches, and the brand leaf. Motion vocabulary stays consistent.
• Living details — grown leaves sway on slow sine.inOut loops; leaves within 90px of the cursor flutter (rAF-throttled, pointer:fine only); a ticker counts how many millimetres kudzu has grown since you opened the page.
• Paper grain — a data-URI feTurbulence tile at 5% opacity, fixed over the whole page. No raster images anywhere.

v.Iteration log

• Leaf unfurl origin was wrong. GSAP's 0px 0px origin meant leaves scaled from their bounding-box corner, not the stem joint. Changed to 50% 100% — the attachment point — so they open like leaves, not stickers.
• Moss failed contrast at label sizes. #4F772D on cream is exactly 4.5:1 — too tight for 13px eyebrows and dates. Added --moss-ink: #47682B (5.5:1) for all small text; the vine keeps true moss.
• Content flashed on load. Hidden states were applied on window.load, so copy appeared, vanished, then animated. Initial states now set the moment the parser reaches the script.
• The stem dove into the dark footer where moss-on-forest lost all contrast. It now ends 36px above the footer, plus dead code removed from the branch loop.

• Leaves now live after they open — each grown leaf sways on its own randomised 2.4–3.8s loop, so the vine reads as alive rather than stamped.
• Second-read detail: the rustle. Move the cursor along the vine and nearby leaves flutter with a quick spring pulse (900ms cooldown per leaf so it never gets frantic). Nothing announces it; you find it.
• Terminal tendril — the vine no longer just stops; it ends in a drawn-on curl reaching toward the footer, mirroring the curls scattered up the stem.
• Brand leaf wiggles on hover with the same spring curve as the cards — the motion system extends to the smallest element.

• 375px audit — vine rail compresses to a 20px corridor with 7px wobble; branch reach drops to 44px so tips never cross the 56px text margin; grids collapse to single columns.
• Reduced motion verified end-to-end — CSS kills keyframes and transitions; JS skips every tween and trigger, leaving the vine fully drawn and all copy visible. Same static path covers a failed GSAP CDN.
• Skip link was position:absolute — useless once scrolled. Now fixed. Focus-visible rings confirmed on nav, buttons, and footer links.
• Chanel rule — removed the hero's second blob. One breathing shape is a horizon; two were wallpaper.