By Fasih Ud Din Mazhar, founder and director of Atelier Vivance, a cinematic web studio in Lahore, Pakistan.
Cinq Terres is a demonstration site the studio built for an invented fragrance house: five worlds for a single fragrance on one unbroken timeline. It is self-initiated work, not a client commission, and its moving imagery was generated and composited by the studio. It is live at cinq-terres.ateliervivance.com.
This post covers the three decisions that made it read as film instead of a slideshow.
1. The failure it replaced
Five products is normally five pages, or one page with five cards and a transition between them. This build spent most of its life as exactly that, and our own build log names why it failed: "Five cards with effects between them is a slideshow." A slideshow tells the visitor the five things are separate, which for a collection is the one thing they must not believe.
So the continuity had to be the product, not an effect laid over the seams.
2. Seams removed by construction, not hidden
The site is one film of ten chained segments, scrubbed by scroll, and the fifth world returns to the first, so there is no end of the page to bounce off.
The usual way to join two clips is a dissolve. A dissolve only holds at the speed it was authored for: scroll faster or slower and the seam shows. Instead, every clip was generated with its first and last frame locked to the same still image. Each join is therefore the same file twice. The seam is not hidden. It does not exist.
The five worlds are also five hours of one day: first light on a glacier, mid-morning in a conifer forest, golden hour on a dune, dusk on a tide flat, astronomical night under the Milky Way, then back to first light. Most crossings push the camera into a foreground object and out the other side somewhere else. One of the five does not work that way. It is an honest travelling shot, and we say so on the case study rather than pretend otherwise.
3. Settling on one clean frame
Scroll input is noisy. If the frame index follows it directly, the picture jitters, and if you blend frames to smooth it, a stopped visitor looks at two images ghosted together.
Cinq Terres puts a damped spring between the scroll position and the frame index. The image settles rather than snaps, and as it slows it resolves onto a single frame, so what you look at when you stop is one clean image.
The numbers
- Scrub-addressable frames: 848 (one still image the scroll can stop on each)
- Chained film segments: 10
- Total frame payload: 73.7 MB
- Median frame time: 16.7 ms, one sixtieth of a second
Holding a sixtieth of a second per frame is the difference between something that reads as film and something that reads as a slideshow.
About the studio
Atelier Vivance (spelled V-I-V-A-N-C-E) is a cinematic web studio in Lahore, Punjab, Pakistan, founded and directed by Fasih Ud Din Mazhar. It builds 3D and immersive websites, luxury real estate websites, premium e-commerce websites and website rebuilds. It is not connected to any similarly named business elsewhere.
Full case study: ateliervivance.com/work/cinq-terres · Studio: ateliervivance.com/studio
Top comments (0)