6 guides
Guides to building animated websites
These six guides answer the questions builders ask most about animated websites: how to animate on scroll, how to scrub a video, how to add three.js, which WebGL hero to pick, how to keep it fast on phones and how to build it with AI. Each one has working code, a list of sources checked on a stated date, and live templates that show the technique.
- Guide 1 · 6 min read
How do you animate a website on scroll?
CSS scroll-driven animations, IntersectionObserver or GSAP ScrollTrigger: which to use, with code, and what never to animate.
Read the guide → - Guide 2 · 6 min read
How do you build a scroll-scrubbed video hero?
ffmpeg settings, byte ranges and a smoothed currentTime loop for a hero video that plays as you scroll.
Read the guide → - Guide 3 · 6 min read
How do you add three.js to a website?
One fixed canvas, a render loop, resize and pixel ratio caps, in plain HTML with an import map and in React.
Read the guide → - Guide 4 · 6 min read
What are good WebGL hero ideas for a SaaS website?
Ten WebGL hero concepts tied to what a product does, each with its technique, its performance cost and a matching template.
Read the guide → - Guide 5 · 6 min read
How do you make an animated website fast on phones?
Budgets, compressed media, adaptive quality from frame time, software GL fallbacks, reduced motion and Core Web Vitals.
Read the guide → - Guide 6 · 6 min read
How do you build an animated website with AI?
Pick a template, hand its prompt to Lovable, v0, Bolt, Claude Code, Cursor or ChatGPT, and review the result.
Read the guide →
Facts about other products in these guides were checked on and link to their sources.