Nite Riot: Minimalism Gets a Wild Side

Nite Riot isn’t just one person, it’s a powerhouse team of creatives crafting high-voltage promos and commercials for the biggest names in music, fashion, and entertainment. The kind of work that makes your jaw drop and your brain scream, “Damn, that’s cool”! So, when we got the chance to build their digital playground, we knew one thing: it had to hit just as hard as their portfolio.

It just so happened that while working on this project, I was deep into Louis Paquet’s Awwwards masterclass, Memorable UI Design For Interactive Experiences. I challenged myself to apply a whole new approach: “Big Idea”. It became the driving force behind everything that followed.

Less Noise, More Punch

Nite Riot’s work hits like a lightning bolt—loud, bold, and impossible to ignore. The website needed to do the opposite: create space for that energy to shine. We stripped away the noise and leaned into a minimal black-and-white aesthetic, relying on a dynamic grid layout and a Difference (Blend) Mode to do the heavy lifting.

We went through multiple visual directions at the start: concepts were sketched, tested, and tossed. Only the strongest ideas made the cut, forming a clean yet bold design system.

And we didn’t wait for the homepage to make a first impression. The preloader set the tone from the jump—not just functional, but atmospheric. It’s the handshake, the deep breath before the plunge. I always think of the preloader as the overture of the experience.

Big Idea

My guiding light? Difference Mode. It didn’t just influence the design; it became the heartbeat of the entire site.

• Typography treatments
• Imagery overlays
• Video hovers
• Case study rollovers
• Page transitions
• Scroll effects
• The logo itself
• Dark/Light theme toggling
• Drag scroll on the Inspired page
• Even the 404 page

Enter the Difference Mode

The goal wasn’t simply to layer on visual effects; instead, it was about crafting a rhythm. Difference Mode brought contrast and edge to every element it touched. Hover states, transitions, and page reveals all flowed together, each following the same beat.

But the impact wasn’t confined to the visual side. On the technical front, Difference Mode allowed us to create a smooth dark/light theme experience without the need for redundant styles. With a single toggle, the entire color palette reversed seamlessly, ensuring both sharpness and performance.

Design Index Page

We experimented with multiple layouts to strike the perfect balance. The client didn’t want a fullscreen visual overload, but at the same time, they wanted a strong presence of imagery—all within a minimalist aesthetic. The result? A carefully structured design that offers a rich visual experience without overwhelming the user, maintaining the sleek and intentional feel of the site.

Case Study: A Scrolling Cinematic Experience

Case studies aren’t just pages on this site—they’re a journey. Forget the standard click-and-load experience; here, case studies unfold like a film reel, one seamless story rolling into the next.

• On desktop, the layout moves horizontally—because why should scrolling always be up and down?
• No matter if a title is one line or three, we made sure everything adapts beautifully.
• We developed a multi-case format, so you’re never locked into just one story.
• And the showstopper? The ultra-smooth case study transition. Instead of abruptly ending one project and making you manually start the next, we designed a flow where the next case subtly appears, teasing you into it. You can either click and dive in or keep scrolling, and like magic, you’re onto the next visual masterpiece.

Inspired? You Will Be.

Our favorite part? The Inspired page. Imagine a canvas where images float, shift, and react to your every move. Drag, drop, hold—boom, Difference Mode kicks in. It’s a playground for the restless creative mind, where inspiration isn’t just consumed—it’s interacted with.

404, But Make It Rockstar

Most 404 pages are where fun goes to die. Not here. Ours is a full-blown experience—an Easter egg waiting to be discovered. The kind of 404 that makes you want to get lost on purpose.

Oh, and did we mention? We applied double Difference Mode here. Because why not?

I accidentally duplicated a video layer that had Difference Mode on—and turns out, the number shapes had the same mode. That happy accident created a unique setup with a ton of character. And the best part? It was insanely easy to build in Webflow with just the native tools.

Animation

Most 404 pages are where fun goes to die. Not here. Ours is a full-blown experience—an Easter egg waiting to be discovered. The kind of 404 that makes you want to get lost on purpose.

Every animation began in Figma. Once we nailed the tone and pacing, I moved it all into After Effects, tweaking easings and timings to hit that sweet spot between smooth and snappy.

I leaned on three key easing patterns to shape the site’s movement:

easeSlowStartFastEnd
cubic-bezier(0.2, 0, 0.1, 1)

easeFastStartSmoothEnd
cubic-bezier(0.75, 0, 0, 1)

easeHeadings
cubic-bezier(0.75, 0, 0, 0.35)

When it came to development, GSAP gave us the control and nuance to bring those animations to life on the web.

Development Choices

We didn’t have an unlimited budget, but we had a clear vision. So we chose tools that gave us flexibility without compromising on polish.

We pushed Webflow and GSAP to their limits to bring this vision to life—fully custom interactions, smooth performance, and pixel-perfect precision across all devices. Every scroll, hover, and transition was carefully crafted to support the story.

Stack Under the Hood:

• Webflow: our base platform
• GSAP: the animation engine
• Barba.js: for seamless page transitions
• Embla.js: smooth slider on the homepage
• Lenis: buttery custom scroll experience
• Glightbox: for full-screen video playback

Barba.js and Lenis worked perfectly together for our infinite scroll effect and horizontal case study navigation.

Tech Breakdown: From Stack to Story

Global

• Page transitions powered by barba.js + GSAP, including smooth element reveals on entry.

Index Page

• Case slider built with Embla Carousel for the title timeline and mobile image switching.
• GSAP handles pagination animations and desktop image transitions.

Inspired Page

• Drag-to-explore canvas with floating images and color inversion using vanilla JS + CSS.als on entry.

Work Page

• List item hover effects with highlight and background transitions using JS + CSS + GSAP.

About Page

• Section overlap animation with background scaling and masked reveals powered by CSS + GSAP.
• On-scroll reveal of text and imagery using GSAP ScrollTrigger.
• Hover animations on cities (desktop) + auto image rotation (mobile) via JS + GSAP.
• Smooth scrolling handled by lenis.js.

Case Studies

• Horizontal scroll experience using lenis.js + GSAP.
• Pagination updates animated with JS + GSAP.
• Parallax effects on H1, media, and next-case blocks powered by GSAP.
• Tab transitions via barba.js + GSAP.
• Scroll-based transition to the next case using JS + barba.js + GSAP.
• Back button transition animated with JS + barba.js + GSAP.
• Full-screen video block with smooth entry/exit animations using JS + GSAP + glightbox.

404 Page

• Scrolling text ticker via CSS animations.
• Cursor-following 404 block on desktop using JS + GSAP.
• Chaotic digit displacement animated with GSAP.
• Motion-reactive number shift on mobile/tablet via JS + Device Orientation API.

Visual Optimization

Performance mattered—especially on case study pages packed with video previews and hi-res imagery. Our toolchain:

• Handbrake for compressing videos
• Picflow for bulk image optimization
• tinypng for WebP polishing

Picflow let us handle massive batches of photos way faster than Squoosh ever could. Big time-saver.

CMS

We built everything in Webflow’s CMS. Super clean and fast to update. Adding a new case is as easy as filling out a form.

Not Just a Portfolio. A Vibe.

This wasn’t about making another nice-looking site. It was about building a space that feels alive. Every pixel, every transition, every weird, wonderful interaction was designed to make people feel something. Minimalism with an edge. Order with a dash of chaos. Just like Nite Riot.

Oh, and speaking of hidden gems—let’s just say we have a soft spot for Easter eggs. If you hover over the Nite Riot logo, you might just stumble upon a couple of surprises. No spoilers, though. You’ll have to find them yourself. 😉

Click. Explore. Get Lost.

This is not just a website. It’s an experience. A digital world built to be played with. So go ahead—dive in, mess around, and see what happens!

Visit the Nite Riot Site

Credits

Creation Direction: BL/S®

Art / Creative Director: Serhii Polyvanyi

UI / UX Design: Vladyslav Litovka

PM: Julia Nikitenko

Dev Direction: V&M, Yevhenii Prykhodko