Build guide · site 28 of the Fable collection

How Two Winds was made, honestly.

The concept

Two Winds is a ceremony guide for rapé written openly from a Western seat: the medicine belongs to the Yawanawá, Huni Kuin, Katukina, Nukini, Kuntanawa, Apurinã and their neighbors, and the page says so before it says anything else. The design brief followed from that stance. The site had to feel like the ceremony itself: unhurried, grounded, warm. Every technical choice below is really a pacing choice.

The techniques, named

It is a pure static site: one HTML file, one stylesheet, one script, no build step. The drifting smoke in the dark sections is a <canvas> simulation: about two dozen soft radial-gradient wisps pushed around by a tiny hand-rolled value-noise field, capped at 1.5× pixel density and disabled entirely under prefers-reduced-motion (a still gradient stands in). The page travels between three palettes (forest dusk, warm sand, firelit dusk) by swapping a data-theme attribute with GSAP ScrollTrigger while long CSS color transitions do the actual drifting. The tepi and kuripe are hand-drawn SVG paths that draw themselves via the classic stroke-dasharray / stroke-dashoffset trick, scrubbed to scroll. The breath pacer is a requestAnimationFrame loop easing a ring’s dash offset through a 4–2–8–2 cycle, because in this practice the long exhale is the whole point. Type settles in with GSAP power2.out reveals; nothing bounces. A paper-grain overlay is one inline SVG feTurbulence data URI. Fonts are Newsreader and Inter from fonts.bunny.net.

The process

Three full passes of build → screenshot → self-critique, using a Playwright harness that captures desktop, mid-scroll, and 390px mobile shots and reports every console error and failed request. Each pass had to produce at least five concrete improvements (spacing rhythm, contrast, motion timing, copy honesty) before the next.

How the constraints shaped it

The cultural-integrity rules were the real art direction. No tribal patterns, no feathers, no borrowed iconography, which forced all the reverence into typography, space, and plain honest sentences. The banned aesthetics turned out to be a gift: when you can’t decorate, you have to mean it.

To build something like this

Prompt an AI agent with the stance first, not the styling: name whose medicine it is, forbid the kitsch explicitly, demand honest notes alongside every instruction, and require a verification loop with screenshots the agent must actually read. Then ask for slowness everywhere, in the easings, the palette travel, the copy, and hold it to that.