Let’s be trustworthy: the world doesn’t want one other “minimalist portfolio.” It wants a vibe.
After we sat right down to construct the digital dwelling for director Jason Bergh, we made a pact: no boring grids, no generic transitions, and completely no “protected” selections. We wished 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 internet 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 consumer’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 a substitute of a leap, 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 heart. The second the preloader finishes, you aren’t simply “on a web site”—you’ve already began the journey.
02. Visible DNA: The “Italic Rise up”
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. A typical white-background portfolio would have felt like placing a basic 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 enhancing 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 stop it from feeling too “valuable,” we launched what we name the Italic Rise up. 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 type.
03. The Analog Ghosts: Small Issues with Nice That means
Probably the most iconic aspect of the UI is the Two Digital Traces with monitoring numbers, working by way of each web page. These strains are our tribute to the sides of a 35mm movie strip.
They transfer in reverse instructions, with their pace tied to the scroll inertia supplied by Lenis. To make the positioning really feel like one steady take, we save the place of those strains in sessionStorage. Once you navigate through Barba.js, the incoming web page picks up these coordinates earlier than the JavaScript even totally masses. The result’s a perpetual movement machine; the strains by no means “reset,” they only hold flowing, no matter what web page you might be on.
Ready Mode: The Digital Pause
Impressed by the “DVD Participant” bouncing brand 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 is usually a stylistic selection.
04. Artistic Mode: The Digital Concierge
We wished the consumer to really feel like they’re a part of the manufacturing course of. To attain this, we constructed two distinct “Modes” that change your complete UI habits.
Artistic Mode: The Director’s Lens
Once you toggle Artistic Mode, the positioning transforms into knowledgeable monitor. We carried out a {custom} Viewfinder Masks that follows your cursor. As you progress, you “reveal” the content material by way of a digicam’s eye. It provides a layer of tactile immersion that makes shopping really feel like filming.
Luxurious means caring for the visitor. Utilizing the Community Info 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.
perform isConnectionFast() navigator.webkitConnection;
if (!connection) return true;
if (connection.saveData === true) return false;
return connection.effectiveType === '4g'; // Solely 4G will get the complete Artistic Mode
05. The Engineering Battle: Swiper vs. Digital Scroll
This was our most vital technical battle. Jason’s work must be seen in two methods: a high-impact, cinematic Slider (for temper) and a useful, quick Record (for deep-diving into the archive).
The Swiper (Slider) is DOM-heavy, holding all slides directly. The Digital Scroll (Record), powered by Lenis, creates and destroys components on the fly for efficiency. Synchronizing these two was a nightmare that required a {custom} state administration system.
The Handshake: To make the change between Slider and Record modes invisible to the consumer, we used a Chain of Guarantees:
- Fade Out: Present mode components animate out.
- Rebuild: The DOM is silently rebuilt, mapping Slider indices to Record templates.
- Fade In: The brand new mode seems. To “glue” this transition, a background video performs repeatedly, making certain 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 probably the most vital second for a director’s website. We ditched normal embeds for a custom-built engine utilizing Glightbox as a base.
Once you click on a venture within the Record, the participant grows from the precise spot you clicked.
- The Drawback: In a virtualized listing, the venture you simply clicked would possibly 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: Once you shut the participant, the system first scrolls the listing again to the right venture, 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. Displaying a low-res video on a 27-inch Retina show normally seems like a mistake. We determined to make it a characteristic.
The Echo Impact: As a substitute of 1 blurry video, we show 4 small, synchronized cases of the identical clip.
- Within the Slider, they act as a rhythmic accent.
- Within the Record, they perform 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 together with your Ears
The “About” web page is normally the place customers cease partaking. We wished to show Jason’s biography into an immersive expertise.
Utilizing SplitType, we broke the textual content into particular person strains 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 pay attention, the textual content “lights up” line by line. It’s a “hands-free” option to get to know the director whereas staying totally immersed within the website’s ambiance.
09. The “Blissful Accident”: Serendipity within the Slider
Within the “International Shoot Locations” part, we tried to port a posh clip-path reveal animation from the homepage. Due to the uneven structure, the animation instructions clashed in a manner we didn’t predict.
The photographs revealed themselves in a “jittery” manner that seemed precisely like a digicam shutter misfiring or a movie reel getting caught in a projector. It felt uncooked, human, and completely consistent with Jason’s “Grit” aesthetic. We didn’t “repair” it—we spent three days sharpening that “error” till it grew to become one among our favourite options on the positioning.
10. Cell: The Artwork of the Timing
Translating a cinematic “heavy” expertise to cellular is all the time a danger. You may’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 cellular transitions to 0.3s.
- The Stagger: We decreased the delay between showing components to 0.05s. It’s quicker, but it surely nonetheless maintains the “orchestrated” really feel.
- Optimization: We eliminated the heavy Viewfinder masks on cellular to avoid wasting GPU cycles, focusing as a substitute on snappy, responsive content material supply.
11. The 404: The Large 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 strains. We didn’t desire 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 if you’re misplaced, the story continues.
The Last Body
Jason Bergh’s website is an invite to cease scrolling and begin feeling. It’s a spot the place “Blissful 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 way of which you see it.
Now, cease studying, go watch some movies, and for heaven’s sake—keep artistic.
Stack Beneath 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 clean sliders.
- Lenis: For that buttery, tactile {custom} scroll expertise.
- Glightbox: Our cinematic lens for high-fidelity playback.
