One day it hit me: nobody was really reading the copy on my homepage. My old site was the traditional vertical brochure; a bio paragraph, some tech-bro lingo that no one cares about, the usual suspects. None of it was getting me leads... So I blew it up! I redid it as a 3D scene that is controlled by the user's scroll wheel. This is something I've wanted to do for a long time, and I've even dabbled with three.js before but never landed on anything that I really liked.
The site is the portfolio now, not the words about the portfolio. No one cares about the words, they care about the work. The 3D scene is the work, and the copy that is shown now is more human. The homepage is the hook, the portfolio and contact pages are the close.
The video walks through the build:
What it does
The homepage at coffey.codes is a single scroll experience. A WebGL canvas renders the 3D scene underneath; layered overlay panels render on top. GSAP ScrollTrigger maps scroll progress to a scrubbed timeline, so the same physical scroll gesture drives the camera through the scene and the overlay text in and out of view.
The canvas component is mounted with dynamic(..., { ssr: false }) because WebGL is a browser thing. The Three.js bundle only ships on the homepage route. Every other page on the site skips the WebGL code entirely.
The stack
- react-three-fiber for the Three.js renderer
- @react-three/drei for camera helpers and shader utilities
- GSAP with ScrollTrigger for the scroll-driven animation
- Next.js App Router, server components by default, client only where state and effects need it
- Tailwind CSS for the overlay chrome
Why it works better
The old homepage felt like a digital brochure—functional, perhaps, but entirely forgetable. Information density was high; engagement was low.
The redesign moves each concern to the page that actually needs it. The bio belongs on the pages where someone is deciding whether to reach out, not where someone is deciding whether to stay. Testimonials moved to /portfolio and /contact. Work samples moved to /portfolio. The homepage stopped competing for attention with itself.
What this is not
This is not a "Three.js for every site" recommendation. A 3D scene is a strong fit for a personal portfolio because the medium is the message: I build interactive things, here is an interactive thing. For a SaaS marketing site, a docs site, a content-heavy blog, the same approach would be theater rather than information.
If you want the technical deep-dive on react-three-fiber patterns, that lives in a separate article: Building Interactive 3D Experiences with React Three Fiber.