Let’s face it: the world doesn’t need another “minimalist portfolio.” It needs an atmosphere.
When we sat down to build the digital home for director Jason Bergh, we made a pact: no boring grids, no generic transitions, and absolutely no “safe” choices. We wanted to build a presence: a cinematic statement about taste, rhythm and the beauty of the pause. Here’s how we translated Brooklyn grit and high-end luxury into a living, breathing web experience.
01. The Prologue: Storytelling from Second Zero
We don’t believe in ‘loading bars’. If a user has to wait, they should be entertained. The client’s brief was clear: capture attention from the very first pixel.
We designed one Seamless front loader that acts as the site’s opening titles. To use Barba.jswe have bridged the gap between the initial load and the Index page. Instead of a jump, the user experience flows into the site like a slow zoom-in. We’ve merged the Index and Works pages into one, focusing on Jason’s handiwork. The moment the preloader is ready, you are not just “on a website”: you have already started the journey.
02. Visual DNA: the ‘cursive rebellion’
Before we wrote a single line of code, we had to define the “smell” of the site. Jason’s work sits at the intersection of raw street culture and polished, high-end luxury. A standard portfolio with a white background would have felt like putting a classic Mustang in a sterile showroom.
The palette of a dark room
We have omitted the standard #000000 for something with more gravity. Our main background is #1e1e1e– it’s not just black; it’s the depths of a dark editing suite at 3am. We have combined this with #FFEEC8 And #FFFBF2. These are not just “off-white” colors; they are creamy, organic tones that are reminiscent of outdated film material and the warmth of a studio spotlight.
Typography with a heartbeat
We opted for the cups PP editoriala font with an inherent elegance. But to keep it from feeling too ‘precious’, we have what we call the Cursive rebellion. The first letter of each main heading is italicized. It’s a small, rhythmic gesture that suggests movement, like a frame that hasn’t quite settled into the projector yet. It gives the layout a soul and a sense of “planned imperfection” that reflects Jason’s cinematic style.
03. The analog minds: small things with a big meaning
The most iconic element of the user interface is the Two digital lines with tracking numbers running through each page. These lines are our tribute to the edges of a 35mm film strip.
They move in opposite directions, with their speed tied to the inertia of the scroll Soft. To give the site the feeling of being one continuous recording, we save the position of these lines sessionStorage. When you navigate via Barba.jsthe incoming page picks up these coordinates for the JavaScript even loads completely. The result is a perpetual motion machine; the rules are never reset, they just keep flowing no matter what page you are on.
Waiting mode: the digital pause
Inspired by the bouncing “DVD player” logo and the aesthetics of old monitor jams, Waiting mode transforms standstill into an experimental work of art. It’s a playful nod to the analog era, proving that even a “paused” state can be a stylistic choice.
04. Creative mode: the digital concierge
We wanted the user to feel like they were part of the production process. To achieve this we built two different ‘modes’ that change the entire behavior of the UI.
Creative mode: the director’s lens
When you shift gears Creative modethe site turns into a professional monitor. We implemented a habit Viewfinder mask that follows your cursor. As you move, you ‘reveal’ the content through the eye of a camera. It adds a layer of tactile immersion that makes browsing feel like filming.
Luxury means taking care of the guest. Using the Network Information APIwe built a concierge system that monitors the user’s connection.
The logic: If the API detects a slow connection or a “Data Saver” mode, the site scales back. It disables heavy preloads and simplifies animations to ensure that even with a weak signal the experience remains premium and not frustrating.
function isConnectionFast() {
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (!connection) return true;
if (connection.saveData === true) return false;
return connection.effectiveType === '4g'; // Only 4G gets the full Creative Mode
}05. The Tech War: Swiper vs. Virtual Scroll
This was our main technical battle. Jason’s work should be viewed in two ways: cinematic with high impact Slider (for mood) and a functional, fast List (to delve deep into the archive).
The Hover machine (Slider) is DOM heavy and holds all slides at once. The Virtual scrolling (List), powered by Softcreates and destroys elements on the spot for performance. Synchronizing the two was a nightmare that required a custom state management system.
The handshake: To make the switch between slider and list mode invisible to the user, we have a Chain of promises:
- Blur: Animate current mode elements.
- Rebuild: The DOM is silently rebuilt, assigning scroll indices to list templates.
- Fade in: The new mode appears. To “glue” this transition, a background video is played continuously, so that there is never a moment of static silence.
06. The ‘mature’ player: surgical precision
The transition from a thumbnail to a full-screen video is the most critical moment for a director’s site. We ditched the standard embeds and used a custom engine Light box as a base.
When you click on a project in the list, the player grows from the exact spot where you clicked.
- The problem: In a virtualized list, the project you just clicked can literally disappear from the DOM as the player opens.
- The solution: We fix the selection frame (
getBoundingClientRect) the millisecond when the click occurs and save the coordinates in CSS variables. - The return: When you close the player, the system first scrolls the list back to the correct project and recalculates new position, and only then outputs the “shrink” animation back to the thumbnail. It is surgical, seamless and completely custom.
07. The archive: the “echo effect”
Directors often have legendary archive footage that was not shot in 4K. Displaying a low-resolution video on a 27-inch Retina display usually looks like a mistake. We decided to make it a feature.
The echo effect: Instead of one blurry video, we show four small, synchronized copies of the same fragment.
- In the Sliderthey act as a rhythmic accent.
- In the Listthey function as a multi-window background texture. By repeating the images we mask the lower resolution and create an energetic ‘surveillance-like’ aesthetic that fits perfectly with the grit atmosphere of Brooklyn.
08. The audio bio: reading with your ears
The About page is usually where users stop communicating. We wanted to make Jason’s biography an immersive experience.
To use SplitTypewe split the text into individual lines and assigned a CSS variable --fill. We recorded and used a voiceover from the biography requestAnimationFrame to synchronize the text fill with audio playback. As you listen, the text “lights up” line by line. It’s a “hands-free” way to get to know the director while remaining fully immersed in the atmosphere of the site.
09. The ‘happy accident’: serendipity in the slider
In the “Common Capture Destinations” section, we tried to transfer a complex clip path reveal animation from the home page. Due to the asymmetrical layout, the animation directions clashed in a way we didn’t expect.
The images revealed themselves in a ‘shocking’ way that looked exactly like a camera shutter malfunctioning or a roll of film getting stuck in a projector. It felt raw, human and perfectly in line with Jason’s ‘Grit’ aesthetic. We didn’t ‘fix’ it; we spent three days polishing that “bug” until it became one of our favorite features on the site.
10. Mobile: the art of timing
Translating a cinematic ‘heavy’ experience to mobile is always a risk. You can’t just copy and paste. We had to rethink the Cadence:
- The timing: On the desktop, a 0.6 second transition feels ‘luxurious’. When you swipe with your thumb, it feels laggy. We shortened all mobile transitions to 0.3s.
- The wobble: We have reduced the delay between appearing elements to 0.05s. It’s faster, but still retains the “orchestrated” feel.
- Optimization: We’ve removed the heavy viewfinder masks on mobile devices to save GPU cycles, and instead focused on snappy, responsive content delivery.
11. The 404: The Big Idea Never Ends
Even the 404 page is a directed scene. We used Unicorn Studio to create a WebGL experience that takes over the movement of the analog lines. We didn’t want the “Page not found” message to break the spell. In our world, even an error is treated with the same cinematic care as the homepage. It reminds us that even when you’re lost, the story continues.
The final framework
Jason Bergh’s site is an invitation to stop scrolling and start feeling. It’s a place where ‘Happy Accidents’ are welcomed, where the audio tells the journey, and where technology doesn’t come before the art: it becomes the lens through which you see it.
Now stop reading, go watch some movies and for heaven’s sake stay creative.
Stack under the hood
- Webstream: Basic platform and CMS.
- GAP: The undisputed muscle (ScrollTrigger, Observer, Draggable, InertiaPlugin).
- Barba.js: The magic glue for seamless transitions.
- Embla.js: The motor for smooth sliders.
- Soft: For that buttery-smooth, tactile, customized scrolling experience.
- Light box: Our cinematic lens for hi-fi viewing.
Credits
#Cinematic #Presence #Directing #Jason #Bergh #Experience #Codrops