How I Accidentally Opened a Portal to the Upside Down (with Next.js)

It started innocently enough. I just wanted a "cool" portfolio. You know, something that says "I am a serious engineer" but also "I definitely binge-watch 80s nostalgia horror series."

So I decided to clone the Stranger Things intro experience. In the browser. Because why not?

The "Simple" Idea

The concept was straightforward:

1. User clicks a button.
2. Screen goes dark.
3. Spooky red letters float around.
4. User is impressed and hires me immediately.

Reality, as it turns out, has a bias against "simple" ideas involving specialized CSS mixed-blend-modes and audio synchronization.

Entering the Void (Layout Animations)

If you've ever used Framer Motion's layoutId, you know it feels like cheating. You give two totally different elements the same ID, and Framer Motion just... morphs them. It's magic.

// This shouldn't work, but it does
<motion.div layoutId="void-portal" className="w-10 h-10 bg-white" />

// ... somewhere else in the DOM ...
<motion.div layoutId="void-portal" className="fixed inset-0 bg-red-900" />

I abused this feature. Heavily. I created a transition where the entire UI seamlessly expands from a tiny generic button into a full-screen immersive hellscape.

Did it break the first 50 times? Yes. Did the z-index wars confirm that CSS is actually the Mind Flayer? Absolutely.

The Audio API is Scary

Visuals are only half the battle. To truly sell the "Upside Down" vibe, I needed audio that felt physical.

I used the Web Audio API to create spatial sound effects. When you hover over the "Enter" button, the sound doesn't just play; it low-pass filters the background track to create that muffled, underwater feeling of being in the shadow dimension.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioCtx.createOscillator();
// I have no idea what I'm doing but it sounds cool
oscillator.type = 'sawtooth';

Did You Know?

Trivia: The "particles" floating in the background aren't images. They're actually <div>s with border-radius: 50% and a chaotic CSS animation delay. I call it "DIV soup," but my browser's profiler calls it "Please stop."

Conclusion

Building Stranger Ram taught me two things:

1. The browser is a surprisingly capable game engine if you ignore enough best practices.
2. Red neon text makes everything look professional.

If you haven't seen it yet, check out the live demo. Just don't stay too long, or the demogorgon (Vercel bandwidth limits) might get you.