Building Buttery WebGL Page Transitions with Three.js
A step-by-step guide to shader-based image transitions in Three.js — texture loading, a displacement shader, GSAP timing and graceful fallbacks.
The blog
Notes on craft, code and motion.
Practical, long-form articles about building fast, accessible and delightful interfaces — WebGL transitions, Core Web Vitals, motion systems and the rest of the creative frontend toolkit.
Write the article you needed six months ago.
Latest article
More articles
Browse the archive
Core Web Vitals for Creative Websites: A Practical Playbook
How to keep LCP, INP and CLS green on sites full of WebGL, video and animation — with budgets, lazy loading and real-user measurements.
Designing a Motion System: Principles for Meaningful UI Animation
Tokens for duration and easing, choreography rules and reduced-motion fallbacks — how to turn one-off animations into a coherent motion system.
Astro or Next.js? Choosing a Stack for Content-Heavy Sites
Why this portfolio uses Next.js for the interactive homepage and Astro for the blog — and a checklist for deciding on your own project.
Generative Music in the Browser with the Web Audio API
Build a tiny lo-fi generator with oscillators, filters, a lookahead scheduler and a convolution reverb — the same engine behind this site's music player.
JSON-LD Recipes: Structured Data That Actually Ships
Copy-paste JSON-LD for Person, FAQ, Product, Review, Event and Breadcrumb markup — plus how to test it before search engines do.
Accessible Custom Cursors and Pointer Effects
Custom cursors and mouse trails can delight — or exclude. How to build them so they respect touch devices, reduced motion and assistive technology.