1755 Quake
A scroll-driven web experience for the 1755 Quake variable typeface, inspired by the 1755 Lisbon earthquake. Three.js particle systems with earthquake physics, custom GLSL shaders, variable font animation along a Richter scale axis, and a font sampler with PNG/GIF export. The typography itself embodies the destruction.
[About]
This was the most creatively challenging front-end project I have worked on. I wrote custom GLSL vertex shaders that simulate earthquake physics — displacement, fracture, collapse — applied to a 3D particle field rendered through React Three Fiber. The variable font morphs along its weight axis in sync with scroll position, so the typography itself becomes the experience. The hardest technical problem was coordinating three separate animation systems without frame drops: Three.js running its own WebGL render loop, GSAP ScrollTrigger driving the scroll-based narrative, and Framer Motion handling page transitions. I synced the WebGL clock to scroll position and kept the Three.js canvas on a separate animation frame to avoid blocking the main thread. All heavy assets — textures, font files, 3D geometry — are lazy-loaded to protect the initial paint. I also built an interactive font sampler where users type, adjust the Richter scale, and export compositions as PNG or animated GIF — rendered entirely client-side using html2canvas and gif.js. This is the project that pushed me deepest into WebGL, shaders, and creative coding on the web.
[Stack]