Cinematic web
Turns a flat website into a landing page with cinematic motion, in a day or two.
Web and interface · JavaScript · Browsable demo
The problem
The motion that sets an expensive website apart is usually solved with AI-generated video: heavy, billed monthly, and it ages badly. Building it in code weighs a fraction, looks the same or better, and carries no subscription.
What it does
- Eight reusable cinematic modules: scroll parallax, reveals, interactive galleries and real-time 3D.
- Motion is built with GSAP and React Three Fiber, in code, not with video.
- A documented five-phase process, from analysing the original site to delivery.
- Deployed, browsable demo.
What was decided while building it
- Motion is built in code, not filmed
- There is not a single video in the project. Solving motion with generated video is heavy, costs money every month and ages badly: changing a headline means regenerating it. In code, the headline is text — indexed, translated and corrected in a minute.
- Each module cleans up after itself
- Animations are registered with their own scope, so they leave when the component unmounts. Without that, scroll-linked animations pile up as you navigate between pages and the site gets slower with nothing ever raising an error.
- 3D is rationed: one section, not the whole page
- Seven of the eight modules are two-dimensional motion and only one mounts a three-dimensional scene. The 3D library is the expensive part of the bundle: a landing page that does not need it stays at a fraction of the weight simply by leaving that module out.
- Branding enters through variables, not find-and-replace
- Colours, typefaces and brand copy live in a single object injected as style variables at start-up. For a new client you replace that object and the whole site re-themes itself, instead of chasing colour codes across twenty files.
How far it goes
- What is published is the module pack and a template that builds. The five-phase process is documented, not automated: no script runs it.
- The demo brand is invented. Name, address and copy belong to a business that does not exist: it is there to show the motion, not as a client case.
- Including the three-dimensional scene takes the bundle to a little over three hundred kilobytes compressed. That is the cost of real-time 3D, and it is worth deciding at the start rather than at the end.
- The full process, as documented, leans on external services with their own keys for imagery. That part is not solved in the repository.
- 8 motion modules
- 0 videos
- 5 documented phases
Built with
- Vite
- React
- GSAP
- React Three Fiber