Replacing a 3D Portfolio with Sticky Tabs and Scroll Tracking

We built a 3D WebGL scroll corridor for the portfolio section of our site. It looked impressive. It also got replaced.

Here's what happened and what we replaced it with.

The Original Approach

The ScrollCorridor was a Three.js scene with neon wireframe walls, a camera that pushed forward as you scrolled, and holographic project cards floating in 3D space. We spent real time on it: CorridorWalls, ProjectCard3D with holographic shader effects, a scroll position tracker tied to the camera rig.

It worked. It looked like something from a showreel. But it wasn't serving the actual goal of the section, which is to let someone quickly understand what we've built and decide if we're the right fit.

The 3D experience asked you to explore. The portfolio section needs to answer a question.

What We Replaced It With

A sticky sidebar and IntersectionObserver.

Each project gets a full viewport-height section. As you scroll, an IntersectionObserver tracks which project is centered in the viewport and updates the active state in the sidebar. A Framer Motion layoutId animates the accent bar between tabs as you move through. On click, the sidebar smooth-scrolls to the target. On mobile, the sidebar collapses and sections stack vertically.

The whole component is about 200 lines of TypeScript.

Why Simpler Won

The 3D version had render issues on certain GPUs. It loaded heavier. And it buried the actual content inside an experience that was competing for attention.

The sticky-tab pattern flips that: the content is the focus, and the navigation is quietly useful in the background. Someone scanning the page can tell at a glance what we've built and for whom, and jump to any project without scrolling past everything else.

We use IntersectionObserver instead of scroll event listeners because it's more efficient and doesn't need debouncing. The rootMargin trick, -40% 0px -55% 0px, means a project only becomes active when it's near the center of the viewport. That keeps the sidebar honest about what you're actually reading.

When This Pattern Makes Sense

Anywhere you have 4 to 8 items that each deserve breathing room: services, case studies, team bios, feature comparisons. The scroll-through format forces you to give each item real copy and space, which usually improves the content itself.

We've since adapted this pattern for a client site. It builds fast, works across devices without any fallback logic, and doesn't require a GPU.

The lesson wasn't that 3D is bad. It was that an immersive experience needs to serve the user's goal, not just look good in a screen recording. When those two things are the same, build the flashy thing. When they're not, ship the simple thing and move on.