Loading…
3D & Motion — Interactive Web Experiences
These projects explore how interactive 3D and WebGL can make a product or brand story feel tangible inside the browser. Each experience connects motion and visual effects to a specific user journey.
- Role
- Interactive web and WebGL development — concept, 3D scene setup, shader work, and GSAP/scroll choreography from start to finish on each project.
- Stack
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Overview
A camera that becomes a viewfinder into someone's memories, a keyboard where each key is a scattered tool waiting to be unified, particles that morph because the product itself is about transformation. This is a collection of that work — full landing pages built around one 3D idea, and smaller standalone studies exploring a single technique at a time.
Static screenshots don't do this work justice — each page earns its 3D by tying it directly to the story it's telling.
Interface
Five stories, five techniques
Everline — Car Rental Showcase
A cinematic ignition-to-showroom journey — step into a cockpit, then watch a fleet reveal itself under studio lighting.
Interface
Five stories, five techniques
Everline — Car Rental Showcase
A cinematic ignition-to-showroom journey — step into a cockpit, then watch a fleet reveal itself under studio lighting.
Lab elements
Not every idea needs a full page around it
Standalone studies — one technique, isolated and pushed further than a single landing page would ask for.
Lab elements
Not every idea needs a full page around it
Standalone studies — one technique, isolated and pushed further than a single landing page would ask for.
Chromatic glass stone
A particle cloud trapped inside faked chromatic glass — refracted twice, bloomed in isolation so the glow stays contained inside the silhouette instead of leaking out.
Particle configurator
Tens of thousands of GPU points shaded as vapor or lit spheres, morphing between shapes with live controls for placement, motion, and look.
Ridged shader field
An abstract animated surface built entirely from material properties — reflections and gradient lights moving across a shader to fake a rippling, ridged field.
Technical approach
Five habits that keep these experiences from becoming the reason a page loads slowly or a phone gets hot — built up across projects, then carried into every category of work since.
Getting heavier every time, getting lighter every time
01
Model optimization starts in Blender, not in code01Model optimization starts in Blender, not in code
Reducing polygon count and texture size before a model ever reaches the browser — the cheapest performance win happens before a single line of Three.js is written.
02
Nothing loads until it has to02Nothing loads until it has to
Heavy scenes and models load dynamically and defer until they're actually needed — the initial page load isn't paying for a 3D scene the user hasn't scrolled to yet.
03
Animations pause outside the viewport03Animations pause outside the viewport
A scene that isn't visible doesn't need to keep rendering. Animations and render loops stop when a section scrolls out of view, and scenes tear down entirely if the tab loses focus.
04
GSAP triggers stay close to what they animate04GSAP triggers stay close to what they animate
ScrollTrigger instances are scoped to the section they belong to and only activate as that section approaches — not one large timeline trying to account for the whole page at once.
05
Mobile gets a different scene, not a smaller one05Mobile gets a different scene, not a smaller one
Heavy WebGL scenes are swapped for lighter versions or static images on mobile, rather than forcing the same scene to run at a lower quality — a decision made per project, not a blanket fallback.
Results
Not a metrics story — a craft one
Five distinct 3D/motion narratives shipped, each built around a different technique — metaphor-driven scenes, cinematic scroll storytelling, custom shader work, and a persistent scroll-reactive character
A consistent set of performance habits — model optimization, deferred loading, viewport-aware pausing — carried forward and refined across every project
Standalone shader and particle studies built independently of any landing page, as deliberate technique practice
The same instinct for structure from dashboard and SaaS architecture work, applied back into how these scenes are organized and loaded