Let’s be trustworthy: the world doesn’t want one other “minimalist portfolio.” It wants a vibe.
Once we sat right down to construct the digital house for director Jason Bergh, we made a pact: no boring grids, no generic transitions, and completely no “protected” selections. We needed to construct a presence—a cinematic assertion about style, rhythm, and the fantastic thing about the pause. Right here is how we translated Brooklyn grit and high-end luxurious right into a residing, respiration net expertise.
01. The Prologue: Storytelling from Second Zero
We don’t imagine in “loading bars.” If a consumer has to attend, they need to be entertained. The shopper’s transient was clear: maintain their consideration from the very first pixel.
We designed a Seamless Preloader that acts because the opening credit of the positioning. Utilizing Barba.js, we bridged the hole between the preliminary load and the Index web page. As an alternative of a soar, the consumer expertise flows into the positioning like a gradual zoom-in. We merged the Index and Works pages into one, inserting Jason’s craft entrance and middle. The second the preloader finishes, you aren’t simply “on a web site”—you’ve already began the journey.
02. Visible DNA: The “Italic Revolt”
Earlier than we wrote a single line of code, we needed to outline the “scent” of the positioning. Jason’s work lives on the intersection of uncooked road tradition and polished, high-end luxurious. An ordinary white-background portfolio would have felt like placing a traditional Mustang in a sterile showroom.
The Palette of a Darkroom
We ditched the usual #000000 for one thing with extra gravity. Our major background is #1e1e1e—it’s not simply black; it’s the depth of a darkish modifying suite at 3 AM. We paired this with #FFEEC8 and #FFFBF2. These aren’t simply “off-white” colours; they’re creamy, natural tones that evoke aged movie inventory and the heat of a studio highlight.
Typography with a Pulse
For the headings, we selected PP Editorial, a font that carries an inherent magnificence. However to forestall it from feeling too “valuable,” we launched what we name the Italic Revolt. The primary letter of each main heading is italicized. It’s a tiny, rhythmic gesture that means motion—like a body that hasn’t fairly settled into the projector but. It offers the structure a soul and a way of “deliberate imperfection” that mirrors Jason’s cinematic fashion.
03. The Analog Ghosts: Small Issues with Nice That means
Essentially the most iconic aspect of the UI is the Two Digital Strains with monitoring numbers, working by each web page. These traces are our tribute to the sides of a 35mm movie strip.
They transfer in reverse instructions, with their pace tied to the scroll inertia offered by Lenis. To make the positioning really feel like one steady take, we save the place of those traces in sessionStorage. Whenever you navigate by way of Barba.js, the incoming web page picks up these coordinates earlier than the JavaScript even absolutely masses. The result’s a perpetual movement machine; the traces by no means “reset,” they only hold flowing, no matter what web page you’re on.
Ready Mode: The Digital Pause
Impressed by the “DVD Participant” bouncing emblem and the aesthetic of previous monitor glitches, Ready Mode turns downtime into an experimental artwork piece. It’s a playful nod to the analog period, proving that even a “paused” state generally is a stylistic selection.
04. Inventive Mode: The Digital Concierge
We needed the consumer to really feel like they’re a part of the manufacturing course of. To realize this, we constructed two distinct “Modes” that change all the UI habits.
Inventive Mode: The Director’s Lens
Whenever you toggle Inventive Mode, the positioning transforms into an expert monitor. We applied a {custom} Viewfinder Masks that follows your cursor. As you progress, you “reveal” the content material by a digital camera’s eye. It provides a layer of tactile immersion that makes looking really feel like filming.
Luxurious means caring for the visitor. Utilizing the Community Data API, we constructed a concierge system that checks the consumer’s connection.
The Logic: If the API detects a gradual connection or a “Knowledge Saver” mode, the positioning scales again. It disables heavy preloads and simplifies animations to make sure that even on a weak sign, the expertise stays premium, not irritating.
operate isConnectionFast() navigator.mozConnection 05. The Engineering Conflict: Swiper vs. Digital Scroll
This was our most important technical battle. Jason’s work must be seen in two methods: a high-impact, cinematic Slider (for temper) and a practical, quick Listing (for deep-diving into the archive).
The Swiper (Slider) is DOM-heavy, holding all slides directly. The Digital Scroll (Listing), powered by Lenis, creates and destroys parts on the fly for efficiency. Synchronizing these two was a nightmare that required a {custom} state administration system.
The Handshake: To make the swap between Slider and Listing modes invisible to the consumer, we used a Chain of Guarantees:
- Fade Out: Present mode parts animate out.
- Rebuild: The DOM is silently rebuilt, mapping Slider indices to Listing templates.
- Fade In: The brand new mode seems. To “glue” this transition, a background video performs constantly, guaranteeing there’s by no means a second of static silence.
06. The “Grown” Participant: Surgical Precision
The transition from a thumbnail to a full-screen video is essentially the most important second for a director’s website. We ditched commonplace embeds for a custom-built engine utilizing Glightbox as a base.
Whenever you click on a mission within the Listing, the participant grows from the precise spot you clicked.
- The Drawback: In a virtualized record, the mission you simply clicked may actually disappear from the DOM whereas the participant is opening.
- The Answer: We seize the bounding field (
getBoundingClientRect) the millisecond the clicking occurs and retailer the coordinates in CSS variables. - The Return: Whenever you shut the participant, the system first scrolls the record again to the right mission, recalculates its new place, and solely then performs the “shrink” animation again into the thumbnail. It’s surgical, seamless, and completely {custom}.
07. The Archive: The “Echo Impact”
Administrators usually have legendary “Archive” footage photographs that weren’t filmed in 4K. Exhibiting a low-res video on a 27-inch Retina show normally seems like a mistake. We determined to make it a function.
The Echo Impact: As an alternative of 1 blurry video, we show 4 small, synchronized situations of the identical clip.
- Within the Slider, they act as a rhythmic accent.
- Within the Listing, they operate as a multipane background texture. By repeating the footage, we masks the decrease decision and create a high-energy, “surveillance-style” aesthetic that matches completely with the Brooklyn grit vibe.
08. The Audio Bio: Studying along with your Ears
The “About” web page is normally the place customers cease participating. We needed to show Jason’s biography into an immersive expertise.
Utilizing SplitType, we broke the textual content into particular person traces and assigned a CSS variable --fill. We recorded a voice-over of the bio and used requestAnimationFrame to sync the textual content filling with the audio playback. As you hear, the textual content “lights up” line by line. It’s a “hands-free” approach to get to know the director whereas staying absolutely immersed within the website’s environment.
09. The “Completely satisfied Accident”: Serendipity within the Slider
Within the “World Shoot Locations” part, we tried to port a fancy clip-path reveal animation from the homepage. Due to the uneven structure, the animation instructions clashed in a approach we didn’t predict.
The photographs revealed themselves in a “jittery” approach that regarded precisely like a digital camera shutter misfiring or a movie reel getting caught in a projector. It felt uncooked, human, and completely in step with Jason’s “Grit” aesthetic. We didn’t “repair” it—we spent three days sharpening that “error” till it grew to become certainly one of our favourite options on the positioning.
10. Cellular: The Artwork of the Timing
Translating a cinematic “heavy” expertise to cell is all the time a threat. You’ll be able to’t simply copy-paste. We needed to rethink the Cadence:
- The Timing: On desktop, a 0.6s transition feels “luxurious.” On a thumb-swipe, it feels “laggy.” We shortened all cell transitions to 0.3s.
- The Stagger: We decreased the delay between showing parts to 0.05s. It’s quicker, however it nonetheless maintains the “orchestrated” really feel.
- Optimization: We eliminated the heavy Viewfinder masks on cell to avoid wasting GPU cycles, focusing as an alternative on snappy, responsive content material supply.
11. The 404: The Massive Thought By no means Ends
Even the 404 web page is a directed scene. We used Unicorn Studio to create a WebGL expertise that carries over the motion of the analog traces. We didn’t need a “Web page Not Discovered” message to interrupt the spell. In our world, even an error is handled with the identical cinematic care because the homepage. It’s a reminder that even whenever you’re misplaced, the story continues.
The Ultimate Body
Jason Bergh’s website is an invite to cease scrolling and begin feeling. It’s a spot the place “Completely satisfied Accidents” are welcomed, the place the audio narrates the journey, and the place expertise doesn’t stand in entrance of the artwork—it turns into the lens by which you see it.
Now, cease studying, go watch some movies, and for heaven’s sake—keep inventive.
Stack Underneath the Hood
- Webflow: Base platform and CMS.
- GSAP: The undisputed muscle (ScrollTrigger, Observer, Draggable, InertiaPlugin).
- Barba.js: The magic glue for seamless transitions.
- Embla.js: The engine for easy sliders.
- Lenis: For that buttery, tactile {custom} scroll expertise.
- Glightbox: Our cinematic lens for high-fidelity playback.
