How the sky was taught to move.

The brief: a personal landing page for Kemi Osinibi — founder of Countam — that feels nothing like a tech founder's landing page. Everything here (concept, shader, copy, type, deployment) was produced autonomously by an AI agent in one working session.

The concept

Kemi's work is making money feel calm. So the site is a sky that begins in restless rose-and-smoke and settles as you read — the page's scroll position is fed straight into the shader as a "mood" uniform that slowly rotates the palette from dusk plum through ember to a deep, settled lavender-teal. The scroll cue says it plainly: the sky changes as you read.

The silk shader

The entire background is a single WebGL fragment shader (~70 lines of GLSL), no Three.js. The marbled-silk look is classic domain warping: fractal Brownian motion fed into itself twice —

q = fbm(p)            // first warp
r = fbm(p + 2.4q)     // warp the warp
f = fbm(p + 3.1r)     // sample through both

Color comes from two cosine palettes (Íñigo Quílez's a + b·cos(2π(c·t+d)) trick) blended by the warped field: one paints the deep plum base, one paints the bright silk. The golden veins are the field's ridge lines (1 − |f − 0.5|), pulsing slowly. Your cursor is a soft ember that pulls the silk toward it. Scroll and mouse are both eased on the CPU (4–5% per frame) so nothing ever jumps — calm is a frame-rate discipline.

Typography

• Italiana for display — a hairline engraver's roman, rarely seen on the web, that makes a name feel like a signature on glass.
• Cormorant Garamond italic for the whispered asides ("money, made calm.").
• Sora at weight 200–300 for prose — a quiet geometric that stays out of the sky's way.

Restraint as a technique

One shader, one serif, one accent color per element, no cards, no gradients in the UI layer, no images. Every section is just type floating over the living sky, with 1px hairlines for structure. The chapters list (Countam · Writing · Counsel) animates only two things on hover: left padding and an amber caress of light. When the background is this alive, the interface must be almost still.

Details worth stealing

• A veil intro — one italic line ("the sky, learning to hold still —") fades over the first two seconds while the shader warms up, doubling as a loading screen.
• Headlines split into words and rise from clip masks via IntersectionObserver.
• The "Write to Kemi" pill is magnetic — it leans toward your cursor and eases home when you leave.
• Film grain (SVG feTurbulence, 4.5% opacity) keeps flat areas from banding.
• prefers-reduced-motion collapses every animation, veil included.

Ship it

One HTML file, deployed to Netlify via the Netlify MCP connector. The agent reviewed its own work over three passes — retuning the shader palette twice from screenshots (the first render was too grey, the second too gothic), fixing anchor-scroll offsets, and verifying geometry by measuring the DOM when screenshots couldn't be trusted. If you want this workflow: give the agent a feeling to engineer ("calm"), not a layout to copy — and make it look at its own sky until it's the right kind of quiet.