Case Studies
Featured
Harmonica.dev
harmonica.dev
A music education platform helping harmonica players build the mental model they can not see. Configuration-driven charts, lazy-loaded audio tools, and programmatic SEO powering 2,160 unique pages.
Horizontal Journey
A horizontal timeline experience driven by vertical scrolling — 6 narrative chapters, each owning the full viewport, with GSAP ScrollTrigger pinning and progress tracking.
City Skyline Parallax
A stylized parallax cityscape with 6 SVG depth layers, scroll-driven day-to-night color transition, animated window lights, and sun-to-moon swap — zero images loaded.
CSS-Only Effects
Pure CSS animations and effects — morphing blobs, glassmorphism, 3D card flips, animated gradient borders, glitch text, and living backgrounds. Not a single line of JavaScript.
Canvas Particle System
An interactive particle field with proximity connections, mouse attraction, and click scatter — built with vanilla Canvas 2D and zero external dependencies.
Terrain Flythrough
A procedurally generated low-poly landscape with depth fog, height-based coloring, and scroll-driven camera flythrough — zero textures or 3D models loaded.
3D Product Configurator
An interactive 3D product viewer with orbit controls, real-time color customization, material switching, wireframe toggle, and clickable feature hotspots projected from 3D to screen space.
Morphing Geometry
Abstract 3D shapes that morph between an icosahedron, torus knot, and sphere — displaced by simplex noise and reactive to mouse position via custom vertex shaders.
WebGL Shader Effects
GPU-powered visual effects built with raw WebGL fragment shaders — animated gradient meshes, interactive hover distortion, and liquid metaball blobs running at 60fps.
Three.js Globe
An interactive 3D particle globe with animated connection arcs, mouse-driven rotation, and live renderer stats — built with Three.js and WebGL.
GSAP ScrollTrigger
Scroll-driven animations featuring pinned sections, SVG path drawing, text split reveals, horizontal scroll galleries, and before/after image wipes — all powered by GSAP ScrollTrigger.
Parallax Storytelling
An immersive scroll-driven page with multi-layer parallax, animated counters, and scroll-triggered reveals — built with zero animation libraries.