Lab

Pinning a menu or tooltip to a button used to mean JavaScript. CSS anchor positioning does it instead: tether with anchor(), place with position-area, size with anchor-size(), and let position-try flip it at an edge.

A grayscale photo plus two flat colors, blended in CSS, make a two-ink duotone. multiply takes the highlights, screen takes the shadows, and the pickers let you re-ink it live.

Staggering a list used to mean stamping --i:0, --i:1, --i:2 onto every child. sibling-index() gives you that number for free, so the animation-delay computes itself. No inline styles, no JavaScript.

Derive a whole component's states from one color token by pulling its channels out and doing math on them. Drag one hue, watch hover, active, border, and ring re-theme live.

A 90s sticky hand toy built with Verlet integration. Drag the handle or the hand: it sticks to walls, stretches slime threads when pulled off, and vibrates on impact.

The first native API that draws real HTML into a canvas context. Not a screenshot, not a workaround. Documenting what I've tried, what surprised me, and why this one matters.

Register a custom property with a type and the browser can interpolate it. Without it, custom properties are untyped strings: transitions and keyframes have no effect on them.

A quick reference for the four easing curves in the motion token system, visualised side by side so the differences are immediately readable.

Interactive L, C, H sliders and a hue uniformity comparison: the parts of oklch that don't click until you can touch them.

Variable font axes are animatable CSS properties, which means animation-timeline can drive font weight, letter-spacing, and more directly from scroll position.

How far can you push linear() easing before you actually need Framer Motion? Generating spring curves from a physics equation, no JS at runtime.

Trying to reproduce Apple's liquid glass effect using only SVG filters. Documenting what works, what breaks, and why it's harder than it looks.