WorkI'veDone

Shopify Editions#

The work I'm most proud of is helping create and build the Shopify Editions websites. I've worked on most of them and they're always headspinning, imagination-stretching, feats of engineering.

Here's my favorites:

Shopify Winter '25 Edition — “The Boring Edition” #

I led development of Boring TV, a 3D easter egg for Shopify's Winter '25 Edition: an interactive retro television featuring 188 AI-generated videos about Shopify's latest product releases.

The TV screen used a Three.js render target, which allowed us to layer in custom CRT-style shader effects, including screen curvature, scanline treatment, and static when switching channels.

I built the in-scene TV interface with React Three Fiber's Textcomponent, using dynamically generated SDF text for crisp typography inside the 3D environment. We also added a 3D remote control with fully functioning buttons. I implemented the remote's press interactions with React Spring, which paired well with React Three Fiber for smooth, interruptible animation states.

Shopify Winter '24 Edition — “Foundations” #

I led development of the 3D hero for Shopify's Winter '24 Edition, working closely with a 3D designer to bring an abstract architectural model from Cinema 4D into React Three Fiber.

A key challenge was matching the final WebGL scene to the designer's rendered visuals. To preserve the exact color and material treatment, we baked the texture and used Three.js MeshBasicMaterial, allowing the model to display consistently without being affected by scene lighting.

I also built a custom camera-path visualizer using Catmull-Rom curves, which gave us a way to fine-tune the camera animation as it moved around the structure. For accessibility, I layered semantic HTML over the 3D scene, ensuring the hero content remained readable and navigable outside the canvas.

Finally, I crafted the transition from the hero into the first content section using GSAP. The most complex part was synchronizing the 3D scene's rotation with the incoming HTML animation, then adapting that choreography across responsive breakpoints.

Shopify Editions — Record Albums Index Page#

I was one of two lead developers on the Shopify Editions Record Albums index page, a 3D record-store-inspired experience that served as an archive for past Shopify Editions.

The scene combined baked and dynamic rendering techniques: the shelves used a baked 3D texture for visual fidelity and performance, while the individual albums used dynamic shadows to respond naturally within the space. Fine-tuning those shadows was one of the harder challenges, especially balancing softness, quality, and frame rate. In a future iteration, I'd explore texture projection as a more performant approach for the album shadows.

We also worked through a complex rendering challenge around blur. Our initial goal was to use Three.js's default render path on load, then switch to a custom post-processing pass only when blur was needed. That switch introduced a subtle but persistent color shift between rendering paths. After extensive debugging, including inspecting compiled shaders with Safari's shader debugger, we chose to use the custom post-processing pipeline consistently across the experience.

The out-of-the-box React Three Fiber blur effect caused FPS issues, so we implemented a custom golden-ratio blur shader instead. This gave us precise control over the blur parameters, improved performance, and helped us closely match the original Cinema 4D renders.

Other Work#

Brightfield Studio#

Brightfield is a generative art studio I created to explore how WebGL shader visuals can become physical products and ecommerce experiences.

I built the project end-to-end: the brand, Shopify storefront, WebGL shaders, product presentation, custom art submission flow, launch content, and social strategy. The goal was to make generative art feel approachable and collectible while giving people a playful way to discover what's possible by adjusting shader inputs.

Brightfield brings together creative frontend development, interaction design, commerce UX, and performance-conscious implementation. It also let me test how far a single developer/designer can take an idea—from visual experimentation to a live storefront and launch campaign—using Claude as a coding partner for much of the implementation.

Shopify Universal Commerce Protocol Page#

I was the sole developer for Shopify's launch pageannouncing the Universal Commerce Protocol, a collaboration between Shopify and Google. The page launched in sync with Google CEO Sundar Pichai's keynote at the National Retail Federation Conference and served as the primary public artifact for Shopify's UCP announcement.

The project had a compressed 2.5-week timeline split by Winter Break. I owned the build end-to-end, from core implementation to performance and launch coordination. Beyond executing the page, I designed the interactive hero globe grid shader and contributed the line “forged from billions of transactions.”

A major technical challenge was creating an immersive WebGL-driven hero while maintaining performance and accessibility. I paired a pure-black-background video with CSS mix-blend-mode and an async WebGL shader grid, while ensuring the experience still worked with reduced motion enabled and with WebGL disabled. The final page achieved a Lighthouse score of 93.

I also integrated an interactive API widget requested by Ilya Grigorik. Instead of embedding it as an iframe, I imported it natively into the codebase, creating a fast iteration workflow while keeping the page architecture clean and maintainable.

The weekend before launch, I identified that our deployment plan needed to change, coordinated with the dot com platform team, ran an ad-hoc Mission Control launch channel, and shipped the page with zero launch issues.

The project was highlighted internally as a model for how engineering can partner with design early, prototype quickly, and elevate a launch through thoughtful interaction design. It became one of Shopify's highest-stakes brand and developer-facing launches of the quarter.