Behind the scene

Verdant is a fictional tea house whose design brief was one word: gradual. Every technique on the page is some form of slowness made visible. One HTML file, all vegetation drawn by hand in SVG or CSS.

01 · The vine that grows as you read

A fixed SVG runs down the left edge. Its stem uses the classic line-drawing trick — stroke-dasharray set to the path's total length, and stroke-dashoffset bound to scroll progress — so the vine literally grows with your reading position, and shrinks if you scroll back. Six leaves each carry a threshold (data-at=".25" etc.); when scroll progress passes it, the leaf scales up and fades in. Progress-bound rather than time-bound animation means the plant is honest: it is exactly as grown as your attention.

path.style.strokeDasharray  = length;
path.style.strokeDashoffset = length * (1 - scrollProgress);

02 · Organic shapes without images

• Morphing blobs — two stacked divs whose 8-value border-radius animates through four keyframe states, running at different durations (14s and 19s, one reversed) so the composite never visibly repeats.
• The teacup — bowl, tea surface, handle, and saucer are four styled divs; the tea is a radial-gradient ellipse. It sits on the blobs like a product photo that costs 0 bytes.
• Steam — three SVG bézier curves with a short dash (36 units) travelling along a 260-unit gap, staggered by 1.6s. Dash animation along a curved path is the cheapest convincing smoke on the web.
• Parallax leaves — hand-drawn SVG leaf outlines drifting at 0.12–0.32× scroll speed with a slight rotation, for depth.

03 · A typeface with a SOFT axis

The serif is Fraunces — but unlike its crisp editorial cut, here every instance sets font-variation-settings: 'SOFT' 100, 'WONK' 1. SOFT rounds the corners of the letterforms; WONK enables the quirky alternate glyphs. Same font file, completely different temperament — a variable-font capability most sites never touch. Karla provides the plain-spoken body voice.

04 · Slowness as a motion language

Reveal transitions run a full second. Hover states drift rather than snap (menu rows ease 22px rightward; tea dots — irregular border-radius circles like pressed leaves — swell and rotate on a gentle back-out curve). The palette is four greens anchored by one terracotta, warm like the only glazed thing on a wooden table.

05 · Reproduce it

Bind one continuous SVG stroke to scroll progress and your page has a spine. Draw flora as SVG paths (a leaf is two béziers). Animate 8-value border-radius for blobs. And if you use Fraunces, try the axes nobody uses — SOFT and WONK are where its personality lives.