About
I care about the last five percent of an interface.
The easing curve, the empty state, the weight of a shadow, the feel of a click. That last stretch is where an interface stops being screens and starts being a product.
Craft
Interface engineering
Design-system-grade React and TypeScript. Components with real states, real edge cases, and APIs the next engineer will thank you for.
Motion and 3D
GSAP, React Three Fiber, and WGSL compute shaders straight on the GPU. Motion that explains what just happened instead of decorating it.
Tools for builders
Editors, prompt generators, agent monitors. I like building the thing that makes the next thing faster to build.
Lab
Four WebGPU sketches, written in WGSL and TSL. The one behind this page is the last of them.
- Open WaterTessendorf FFT, three cascades, Jerlov optics
- Free WaterRay-marched SDF, Rayleigh modes, Fresnel, Beer-Lambert, HDRI
- Rasengan!A cage of 144 circles on four shells, orbiting arcs, HDR bloom
- Curl FieldCompute shader, instanced draw, additive blending
- Still WaterPing-pong render targets, rgba16float, wave equation
- Paper WeatherFragment shader, fBm domain warping
Work
MsgLens
A browser-based viewer for Outlook .msg and .eml files. There is no backend, which makes “your file is never uploaded” a structural fact rather than a promise. Bodies are recovered through compressed-RTF de-encapsulation, which 17 of 20 real business messages turn out to need.
Next.js · React 19 · Tailwind · Cloudflare Pages
Payroll Icon System
54 payroll, time and billing icons generated from a base × modifier system, so a new state composes across every base instead of being redrawn. Published to npm, with a script that rasterises all 1,326 pairs at 16px and scores them on shared ink.
SVG · TypeScript · React · npm
UIPrompt
A visual component editor that turns designs into spec-grade prompts for Claude Code, Cursor, and v0. Tune radius, colors, states, and motion; the prompt updates live.
Next.js · React 19 · Zustand · Supabase · Paddle
AgentPulse
A macOS menu bar app that watches Claude Code sessions in real time, parsing the session stream to surface what your agents are doing.
Swift · SwiftUI · macOS
Mech Keyboard
An interactive 3D mechanical keyboard you can type on in the browser, with per-key sound and choreographed scroll animation.
React Three Fiber · GSAP · Howler
Practical AI Stack
A blog of 30 hands-on guides to the AI tool stack, written for people who ship with these tools every day.
Writing · SEO
Now
Shipping small, sharp tools.
MsgLens is the most recent one, a viewer that parses Outlook mail entirely inside the browser. Alongside it, the Lab: four sketches that run straight on the GPU, most recently an ocean built the way film ocean is, by inverse transforming a wave spectrum. And I write Practical AI Stack, hands-on guides to shipping with AI tools.
Contact
Say hi.
ay0933@gmail.com