Lumen — A Design System That Moves

A component library with motion baked in ✨

Lumen is a React + TypeScript component library I built for a fintech client to unify six product surfaces. Every primitive ships with reduced-motion defaults, full keyboard navigation, and a token layer that scaled from two brands to eleven — without rewriting a single component.

Pocket Atlas — A Travel App In Your Browser

Pocket Atlas is a Progressive Web App I designed and shipped solo over four weekends. It caches 120 curated city guides for offline reading, uses view transitions for route changes, and scored 98 on Lighthouse across every category — on a mid-tier Android phone, not an unlocked laptop.

Sprites on the Web — A Developer Talk

At RenderConf I gave a 25-minute talk on bringing game-dev spritesheet techniques to the modern web. The demo site hit 60fps scrolling 400 animated characters in Safari on an iPhone 11 — with zero canvas, no WebGL, just CSS background-position and a tiny React hook.

Subgrid Layouts for a Publishing Client

A long-form publisher needed article layouts with perfectly aligned pull-quotes, figures, and footnote rails across eight breakpoints. CSS Subgrid made it possible without nested grids or magic margins. The result shipped a 34% faster first-paint and cut the layout CSS in half.

Springs & Bounces in Native CSS

The magic of the linear() timing function

An exploration of the new linear() easing keyword, published on my blog and picked up by CSS-Tricks. The companion playground lets readers tweak spring parameters and copy a ready-to-paste CSS snippet — no JavaScript required once the animation is defined.