Resources / The modern web stack
The modern web stack
What Lenis, GSAP, Rive and three.js each do, when to use them, and where to learn them. One page.
By Raunak Singh Bhogal. Published 18 September 2026, updated 26 September 2026.
The short version
We opened the code of one of the best-known athlete websites to see what makes it feel expensive. Five tools do almost everything you see. Here is what each one does, when to use it, and the order to learn them in.
Webflow webflow.com
The base. Pages, content and hosting live here, so the team can edit without a developer in the room.
What it does: the site itself.
Lenis lenis.darkroom.engineering
Smooth scroll. It replaces the browser's stepped scrolling with one continuous glide, which is why everything feels expensive.
What it does: the feel.
GSAP + ScrollTrigger gsap.com
The animation engine. Every reveal, pin and parallax is timed to your scroll position, not to a clock.
What it does: the choreography.
Rive rive.app
Vector animations that react to input and weigh almost nothing. On this site it drives the page transitions.
What it does: the living graphics.
three.js threejs.org
WebGL in the browser. Real 3D objects and shaders, rendered live on your graphics card.
What it does: the 3D.
Built by OFF+BRAND itsoffbrand.com
The studio behind it. The tools are free to learn. The taste and the months of craft are what you are looking at.
Credit where it is due.
Where to start lenis, then gsap
Add Lenis to any site in ten lines. Then learn one GSAP ScrollTrigger. Those two get you most of the feel for none of the 3D pain.
Learn in this order: Lenis, GSAP, Rive, three.js.
What you get
- What each of the five tools does, in one line
- When to use it, and when to skip it
- Where to learn each one, and the order to learn them in
Free. PDF.
Tell us what you're launching.
Send the brief, the product or just the problem. We reply with an approach and a quote.