Case Study · 2025
Vanta Studio
Portfolio site for a motion design studio — full-bleed WebGL hero, magnetic cursor, and a case-study reel that never stops moving. All tuned to feel light even on mid-range hardware.
SOTD
Award
60
FPS (mobile)
< 80kb
JS bundle
5 wks
Timeline
Awwwards
Site of the Day
Role
Frontend & motion development
Stack
Vue 3 · Nuxt · GSAP · Three.js
Team
Solo (design by studio)
Award
Awwwards Site of the Day
The problem
Motion studios deserve sites that actually move.
Vanta's previous site was a PDF-in-a-browser — static case study images in a vanilla carousel, no sense of how their work actually felt in motion. Prospective clients couldn't experience the studio's craft before picking up the phone. Conversion from site visit to inquiry was under 3%.
The challenge: build something that matches the studio's ambition without becoming a GPU-melting nightmare on the devices their clients actually use.
The solution
One easing curve to rule them all.
I established a single cubic-bezier easing curve used for every transition site-wide — page enters, scroll reveals, cursor magnetics, and the WebGL camera drift. The consistency makes the site feel authored, not assembled. Nothing fights anything else.
The WebGL hero uses Three.js with a custom shader that renders at half-resolution and upscales — imperceptible at viewing distance, but the performance headroom let us hit 60fps on an iPhone 12.
WebGL hero
Custom Three.js shader with half-res rendering + upscaling. Degrades gracefully to a CSS gradient when WebGL is unsupported.
Magnetic cursor
Every interactive element exerts a pull on a custom cursor. Built with GSAP QuickTo for butter-smooth spring physics without libraries.
Scroll-driven reel
Case study videos scrub with scroll position using a progress-mapped playback rate — no autoplay, no forced waiting.
Process
Five weeks, zero compromises on feel.
Wk 1
Motion language & prototyping
Built five isolated prototypes to test the easing curve, cursor feel, and scroll-scrub approach. Presented to the studio for direction before touching the actual site.
Wk 2
WebGL hero
Developed the Three.js shader, optimized for performance, implemented the fallback, and wired the camera drift to a shared spring value.
Wk 3–4
Layout, reel & cursor
Built the Nuxt layout with the magnetic cursor system, the scroll-driven video reel, and the case study transition animations.
Wk 5
Performance audit & submission
Profiled on a range of real devices. Reduced Three.js bundle by 40% via tree-shaking. Submitted to Awwwards the day we launched.
Outcome
Awwwards SOTD. Inquiry rate up 3×.
The site won Awwwards Site of the Day on launch day and went on to be nominated for Site of the Month. The studio's inquiry rate tripled in the first quarter post-launch, and two projects were directly attributed to clients who mentioned finding the site through the Awwwards gallery.