Type that notices you.

The brief: a second, fundamentally different personal page for Kemi Osinibi (founder of Countam). Her other concept is a living painted sky; this one is its opposite — a stark typographic monograph where the letterforms themselves are the animation. No canvas, no WebGL, no images. Ink, bone, one signal orange.

The one big idea

The whole site is set in Anybody, a variable font with two wide axes: weight (100–900) and width (50–150). Every letter of the headline is its own span, and every frame the script measures the distance from your cursor to each letter and eases the axes accordingly:

t = max(0, 1 − distance / radius)     // falloff
e = t·t·(3 − 2t)                      // smoothstep
wght = 800 → 180 · e                  // heavy letters go thin
wdth = 100 → 135 · e                  // …and stretch wide

So the name KEMI OSINIBI behaves like a keyboard being pressed by your attention — letters exhale where the cursor passes and recover behind it. At the bottom, SAY HELLO runs the same system in reverse (thin by default, bold under the cursor) and, when nobody's near, it breathes on a sine wave. Updates are batched in one requestAnimationFrame and skip any letter outside the viewport, so the effect is effectively free.

Design system

• Palette: bone #F2F0EA, ink #141311, and a single signal orange #FF4D00 that is only ever allowed to do one job per screen.
• Type: Anybody (display), Inter Tight (prose), Space Mono (folios, captions — the archivist's voice).
• Structure: a hairline frame around the whole viewport labeled like a book plate ("K·O — MONOGRAPH / VOL. 01"), a printed ruler strip separating hero from body, and chapters numbered like a catalogue (01 Manifesto, 02 Index of works, 03 Correspondence).

Typographic devices

• The manifesto alternates solid, outlined and signal words in one block — outline text is just -webkit-text-stroke with transparent fill.
• The index of works is a table of contents where rows stretch on hover — the width axis animates from 96 to 125 via transition: font-variation-settings.
• A marquee of her vocabulary (MONEY · CLARITY · CALM · COUNT AM) alternates solid and outline glyphs.
• Letters of the name arrive one at a time on load, each unsquashing from scaleY(1.15) — like type being set.

Ship it

One HTML file, no dependencies, fonts from Google Fonts, deployed to Netlify via the Netlify MCP connector. As with its three sibling sites, the agent ran three full review passes on its own work — driving a headless preview, dispatching synthetic mouse events to prove the variable-type falloff actually worked, and measuring the DOM wherever screenshots were ambiguous.

Do it yourself

Variable fonts are the highest ratio of wonder-to-kilobytes on the modern web. Pick one with two expressive axes, split your headline into spans, and map cursor distance to the axes with a smoothstep. Then delete everything else on the page that moves — one living thing, fully alive, beats ten half-animated ones.