All Projects
01

Crossfader

Because sometimes you build things just because they should exist.

A personal project that proves the best design engineers don't just build for clients — they build for the joy of it.

Client
Personal Project
Role
Design & Development
Year
2024
Visit
crossfader.leonvdk.com
02
In Action
03
Overview

Crossfader is a modern reimagining of the legendary twoyoutubevideosandamotherfuckingcrossfader.com — a web application that lets you load two YouTube videos into retro 8-bit TV mockups and mix between them with a crossfader slider, complete with pitch controls and built-in YouTube search. It's a personal project with no client, no revenue, and no business model. But it demonstrates something no client project can: who Léon is when nobody's paying him. The Vue/Nuxt stack shows framework versatility beyond the React ecosystem. The YouTube API integration and real-time audio manipulation show technical depth that goes beyond marketing sites. And the sheer personality of it — the 8-bit aesthetic, the playful concept, the fact it was built purely for fun — signals something that matters enormously in client relationships: this person genuinely loves what they do.

The Challenge

Rebuilding a beloved internet novelty as a modern web application introduces a specific engineering challenge: the YouTube IFrame Player API was not designed for real-time audio manipulation. Coordinating two independent player instances — keeping them responsive, handling loading states, managing the crossfade curve smoothly, and dealing with the API's asynchronous initialization — requires careful state management. The design challenge: how do you make a technically complex audio mixing interface feel as simple as sliding a fader? And how do you honor the chaotic, irreverent spirit of the original without just copying it?

The Approach

The project uses Nuxt (Vue.js) instead of React/Next.js, demonstrating framework versatility. The crossfader maps its slider position to a volume curve applied to both players simultaneously — as one goes up, the other goes down. The pitch controls manipulate playback rate on each player independently, transforming a simple A/B mixer into something genuinely experimental. The retro 8-bit TV mockups were a deliberate design choice that solves a presentation problem: raw YouTube embeds look generic, but wrapping them in pixel-art TVs creates a visual identity that makes the project shareable and memorable. The 'Search your bangers' copy sets the tone immediately. The whole thing is a love letter to internet culture — technically interesting, visually distinctive, and genuinely fun to use.

Have a similar challenge?

04
Results
Vue/NuxtFramework Versatility

Built with a completely different stack than the client work (which runs on React/Next.js). This demonstrates genuine full-stack versatility — not 'I read the docs' versatility, but 'I shipped a product with it' versatility.

Real-timeAudio Engineering

Crossfading audio between two YouTube streams with pitch control requires real-time audio manipulation — a technical domain most web developers never touch. This isn't a to-do app with a framework logo on it.

Personality

In a portfolio full of professional client work, this is the project that makes a prospect think: 'I'd enjoy working with this person.' The retro 8-bit TVs, the irreverent name it pays homage to, the fact that it exists at all — this turns a competent portfolio into a memorable one.

05
What We Delivered
01

Retro 8-Bit TV Mockups

The YouTube players sit inside pixel-art CRT television frames — creating a visual identity that's both nostalgic and distinctive. The TV mockups give each video 'source' a physical presence that makes the crossfading concept intuitive: you're not mixing abstract audio streams, you're fading between two TVs. The aesthetic sets the tone instantly — this is fun, not corporate.

02

The Crossfader Itself

One slider. Two audio sources. Immediate response. The core interaction is so intuitive it requires zero explanation — which is the hallmark of great interaction design. Reducing a feature to its most essential form is harder than adding complexity. This single slider demonstrates the same design discipline that produces clean conversion funnels.

03

Pitch Controls

Playback speed manipulation on each video independently. This transforms a simple A/B mixer into something genuinely experimental — slowed-down hip-hop crossfaded with sped-up pop creates something new. It's feature layering done right: the base experience works perfectly alone, the advanced feature rewards exploration without demanding it.

04

'Search Your Bangers'

YouTube search built directly into the interface with copy that matches the energy of the product. It keeps users inside the experience instead of tab-switching to YouTube and pasting URLs. The language — 'Search your bangers' — would be inappropriate on a B2B site, and that's exactly why it works here. Tonal range is itself a credential.

06
Why This Worked
01

Side projects reveal what client work can't. A portfolio full of commercial work shows competence. A personal project that exists purely for joy shows passion. When a potential client sees Crossfader alongside Toolova and Happy Critics, the message is clear: this person builds things because they love building things — and that energy shows up in every engagement.

02

Polish in the absence of obligation is the strongest quality signal. Nobody asked for retro TV mockups, pitch controls, or a branded search experience. Every detail was added by choice, not by spec. When a designer applies this level of care to a project with zero budget and zero deadline, it signals what their floor of quality looks like.

03

Connecting to the official YouTube API turned a novelty concept into a real instrument. The IFrame Player API wasn't designed for real-time audio mixing — it's built for simple embed-and-play. Making two independent player instances respond to a single crossfader meant working around asynchronous initialization, buffering delays, and volume curves that needed to feel analog-smooth despite being digital step functions. The result: when you slide the fader, both sources respond instantly with no perceptible lag. That kind of seamless API integration — bending a platform's official tools to do something they weren't built for — is exactly the problem-solving that shows up in every client project.

07
Built With
Nuxt
Vue.js
YouTube API
Vercel
TypeScript
LET'S WORK TOGETHER

Got a project in mind?

I partner with founders and teams who care about craft. Fast turnaround, obsessive detail, conversion-focused from day one.

See more work