Home

Pixels Pushed

Recent Projects

It's such an incredible time to be a designer. These are experiments, visual explorations, various other pixels I've been pushing recently.

A visual sitemap tool that transforms website architecture into navigable spatial maps. Built with React and React Flow, Atlas was a fun exploration into some new interaction patterns.

React FlowNext.jsTypeScript
Atlas
Atlas
Atlas

Built a custom layer rendering system from using native Canvas 2D. Each layer extends BaseLayer and implements its own render() method. The drag-and-drop layer reordering and 3D transformations are all done without WebGL, keeping it lightweight and direct.

Canvas 2DGenerative ArtProcedural Design
Tangle Map
Tangle Map
Tangle Map

A web-based split-flap display that captures the nostalgic mechanical charm. Built with Supabase live realtime DB and careful attention to the satisfying letter-flipping.

ReactCSS AnimationsSupabase
Board
Board
Board

Tracer

A Chrome extension that extracts design systems from any website in real-time. Tracer automatically catalogs typography, color palettes, spacing systems, and component patterns, generating comprehensive style guides from live production sites.

Chrome ExtensionCSS ParserDevTools Protocol
Tracer
Tracer
Tracer

Kitchen Sync

A collaborative family planner app that shows a shared calendar, has a screensaver with Google Photos images, and tracks chores with slick emoji blast effects.\n\nThis is a current WIP.

ReactFirebasedesign
Kitchen Sync
Kitchen Sync
Kitchen Sync

I got this phrase stuck in my head and just couldn't shake it. Turns out the domain was available so I bought it and threw up some slick typography with WebGL.

TypographyFun DomainShaders
Basic Sorcery
Basic Sorcery
Basic Sorcery

Gallery

Screenshots, recordings, and visual artifacts from various projects and experiments.

Encore 3
Encore 2
Tracer
Tracer 2
Encore 1
Tangle Map 1