What tools do I need to build a cinematic website?

A bundler, Three.js for the WebGL layer, and GSAP with ScrollTrigger for the scroll timeline. No framework is required and no smooth-scroll library should be used. The heavy lifting is in the frame assets, not the dependency list.

Do I need 3D modelling skills?

Not necessarily. Many cinematic sites are frame sequences rendered ahead of time, which means the runtime is playing back images rather than rendering geometry live. You need assets, from film, generation or 3D, but you do not need to render in real time.

Why does my cinematic site crash on iPhone?

Almost certainly because you are decoding whole frame sequences. A 1920x1080 frame is roughly 8MB decoded, so a 240-frame shot is about 2GB. Load frames on a sliding window and serve downscaled frames to phones. A desktop browser at phone width will not reproduce this; you must test on a real device.

Can I make a cinematic website in Webflow or Framer?

You can get a cinematic hero and good scroll motion. A true one-canvas scroll film needs custom WebGL, which means custom code. If the goal is the feeling rather than the architecture, a strong hero on a fast page is often the better trade.

How long does it take to build one?

The engine is days. The assets and the pacing are where the time goes. We ship full cinematic builds in weeks, and most of that is producing and sequencing shots rather than writing the scroll logic.

How to Make a Cinematic Website (2026): The Actual Build Path

To make a cinematic website: pin one canvas for the length of the experience, drive a 0-to-1 timeline from scroll position, composite scroll-scrubbed frame sequences onto a 2D canvas with alpha cross-dissolves, then draw that through a fullscreen shader for the grade. Use GSAP ScrollTrigger with native scroll, never a smooth-scroll library, and load frames on a sliding window or phones will crash.

This is the build path we actually use, including the parts that cost us days the first time. If you want the unedited version with the mistakes in order, read the streetsofpunk.com build log.

1. Decide the film before you write code

The shot order is the emotional arc, and it is much cheaper to change in a list than in a build. A sequence that works:

cold open, hero, a statement beat on black, object beats, a showreel, a proof or numbers beat, real footage, contact.

Write that list first. It becomes your data structure in step 3.

2. Scaffold, and leave things out

Vanilla bundler, Three.js, GSAP with ScrollTrigger. That is the whole dependency list.

Do not add a smooth-scroll library. Lenis and its relatives break stacked and pinned ScrollTriggers, and you will spend a day discovering that. Use native scroll with scrub.

3. One pinned canvas, one timeline

A single ScrollTrigger pins one element and spans N viewport heights. Scroll progress P runs 0 to 1 and drives everything on the page. There are no other scroll animations.

Shots live in an array. Each entry is either a frame sequence (directory, count, fit mode, motion style) or a DOM overlay kind. The array order is the film order, which means restructuring the film is reordering a list.

Index your DOM overlays from their document order rather than hand-numbering them, or inserting one beat will force you to renumber everything.

4. WebGL as a post-process, not a renderer

This is the decision that matters most, and the one most tutorials get wrong.

Each frame: composite the visible shots onto an offscreen 2D canvas, cross-dissolved by alpha. Upload that 2D canvas as a texture. Draw it through a fullscreen shader that adds the grade: chromatic aberration, grain, vignette, bloom.

The 2D composite is the proven, debuggable layer. The shader only seasons it. Trying to place and light objects in a real 3D scene is a much harder path and you will fight it for hours for a result nobody can tell apart.

5. The mobile trap that will bite you

Never decode whole frame sequences. A 1920x1080 frame is roughly 8MB decoded. A 240-frame shot is about 2GB. This works fine on desktop, and it crashes iOS Safari outright.

Two fixes, both required:

A per-frame sliding window: keep a handful of frames around the current position, not the shot.
Downscaled frames for phones: serve a 720p variant.

A desktop browser resized to phone width will not reproduce the crash. Test on a real device or you will ship it broken.

6. The letterbox problem

The most common visual failure is the contain-fit letterbox. A 16:9 frame with a small centered subject, drawn into a portrait phone viewport, becomes a tiny object floating in black.

Two fixes: generate objects in square frames with the subject filling most of the frame, and give each object a per-object growth multiplier that goes much larger on mobile.

7. Verify by reading the DOM, not by screenshotting

A continuous animation loop plus lazy frame fetches means the page never settles, and the WebGL canvas reads all black in headless screenshots because the drawing buffer is not preserved.

So expose your ScrollTrigger instance and a debug object on window, then drive the film by setting scroll position and calling update, and read back transforms, opacity and text content. This is the workflow. Fighting the screenshot path is wasted time.

8. Grade it with real eyes

Once it runs, the remaining work is pacing. Vary shot lengths. Give each object a different motion. Do not reuse the same footage twice, which reads as obviously as it sounds. Open on the most characteristic thing in the subject’s world.

Should you build it yourself?

Honestly: if this is your first WebGL project and the site matters commercially, the engine is the easy part and the pacing is not. The list above will get you a working scroll film. It will not automatically get you one that feels good.

If you would rather buy it, our Cinematic/3D Flagship starts at $3,000 fixed and ships in weeks. The cost breakdown explains what moves that number.

Where to go next

Cinematic web design: the architecture explained, and when not to use it.
Cinematic website examples: ten builds worth studying.
What is a scroll-driven 3D website: the anatomy in more depth.
The streetsofpunk.com build log: every trap, in the order we hit them.