Playground
A GPU particle field that morphs between three states — scattered, the letterforms of my name, and eleven bars, one per production application I have shipped. 110,000 particles, one draw call, anduProgresson a slider so you can sit inside the morph and see where it breaks.
Changing this rebuilds all three position buffers, so the field re-seeds rather than interpolating.
World-space radius. Push it up and additive blending saturates the accent to flat yellow — the reason per-particle alpha drops as particles lock.
Rigid bodies
The letters are rigid bodies. matter-js runs the physics and owns positions and rotations; the drawing is hand-written canvas, because matter's own renderer produces debug wireframes and has no concept of a glyph. Bodies are rectangles rather than glyph outlines on purpose — concave collision is expensive and unstable, and at this size nobody can tell the R is colliding as a box.
How it works
Each particle carries three candidate positions as vertex attributes: a scattered position, a position sampled from the rasterised letterforms of BRIJESH, and a position inside one of eleven bars — one per production application I have shipped. The vertex shader blends between them from a single uniform.
Nothing is recomputed on the CPU per frame and no geometry is rebuilt. The entire morph is one interpolation on the GPU, which is why 110,000 particles cost one draw call and stay inside a frame budget.
The wordmark positions come from drawing the text to an offscreen 2D canvas, reading the pixels back, and resampling the ones above an alpha threshold. Sampling the bitmap directly clumps toward wide glyphs, so candidates are collected first and then resampled evenly.
The two details that took the longest were both counter-intuitive. Drift has to fall off as the square of lock, because otherwise the residual motion is wider than a letter stroke and the type dissolves. And per-particle alpha has to drop on lock, not rise — packing the field into a few glyphs stacks additive blending past 1.0 and turns the amber into flat yellow.
Tooling
Giving a dozen Shopify themes one TypeScript toolchain
The toolchain underneath most of the client work above. Shopify themes have no build step by default — this adds strict TypeScript, per-section bundling and automatic shared-chunk extraction, without changing how a theme is deployed.
An MCP server that turns a Figma frame into a Shopify section
A Model Context Protocol server that reads a Figma design and emits a Shopify section — Liquid markup, the schema block, and the matching styles. Built because translating designs to sections is the most repetitive part of theme work and the least deserving of a person's attention.
I automated my own job hunt, and learned where to not trust a model
A local-first tool that collects job listings, tailors a resume and cover letter per role, and tracks everything through to outcome. Built for one user — me — which is exactly why it is the most honest thing in this list.