Service
Cinematic websites
A cinematic website is one where scrolling directs attention the way a camera directs a shot: each section is a scene, motion has weight and intent, and the page tells a story instead of listing information.
The page you're reading was built this way — and it's the most honest argument I have. Scroll this site's home page and watch what happens to the particles: that's WebGL tied to the scroll, running at 60fps, without choking phones, and degrading gracefully for anyone who asked their system for less motion.
What makes a website 'cinematic'?
It isn't the amount of effects — it's direction. Award-winning sites almost always have a single masterstroke and keep everything else sober enough to let it breathe. What separates cinema from template is weight in the motion (custom easing, inertia, anticipation), rhythm between dense moments and silence, editorial-scale typography, and a tight palette with consistent lighting direction across HTML and 3D. Effects piled up without hierarchy look like a library demo, not a product.
Doesn't that make the site slow?
It does when it's done badly — and that's how most attempts die. I work with a performance budget defined before the first line of code: LCP under 2.5s, 60fps while scrolling, no animating expensive properties, WebGL loaded on demand and paused when off screen. On the site you're reading, all of three.js sits in a separate chunk that only downloads after the first paint.
What about people who can't or don't want animation?
The content is still there. Every site I deliver is built in layers: semantic HTML works on its own with JavaScript disabled, and animation is progressive enhancement on top. Anyone with 'reduce motion' enabled gets the page without the motion and without a broken layout. This isn't only accessibility — it's also what lets Google read the page.
Who is this worth it for?
For anyone selling something where perceived quality is part of the price: a product launch, a premium brand, a studio portfolio, a fundraising deck's companion site. If the goal is converting paid traffic at the lowest possible cost, a simple fast landing page wins — and I'll say so before you spend.
What the delivery includes
Stack
- Next.js
- TypeScript
- GSAP ScrollTrigger
- Lenis
- React Three Fiber
- three.js
- GLSL
- Tailwind CSS
- Vercel
Questions that always come up
How long does a cinematic website take?
Two to four weeks for a single page with one 3D scene, art direction included. Multi-page sites with more than one scene take longer. A good part of the timeline goes into visual decisions, not code — the clearer the brand already is, the faster it moves.
Does it work on mobile?
It does, with a version designed for mobile rather than just shrunk down. Pinned scroll and heavy 3D scenes choke mid-range phones, so mobile gets fewer particles, no pinned sections and shorter animations. That's a design decision, not an accident.
Do I need an existing brand identity?
No. If you have one, I work from it. If you don't, art direction is part of the project — palette, typography and lighting direction are decided with you before any animation happens.
Can this be applied to an existing site?
Yes, and it's often the cheaper path. The layered architecture exists for this: content and routes stay, and motion goes on top, layer by layer, without rewriting the whole site.
Tell me what you want to build.
A 30-minute conversation about the problem usually settles more than three email threads about technology. If it isn't for me, I'll say so right away.
andre@andrebordignon.dev · Brasília, Brasil