Designing a 3D command deck portfolio

This site is a 3D "routing console": a central hub streams particles out to gpt, claude, gemini, and qwen nodes. The hard part wasn't the scene — it was keeping it from eating the message.

Lessons from the build

1. The 3D must serve the story, not bury the headline. I added a readability scrim behind the copy and pushed the particle field back in depth so the text stays the focal point. A scene that out-shouts the words is a failed scene.
2. Animate with the compositor, not layout. Reading scrollWidth every frame to drive a marquee stuttered the whole page. Moving everything to transform let the GPU carry it and the jank disappeared.
3. Respect reduced-motion and ship a static fallback. When the OS asks for less motion, the streams freeze into a still composition — no spinning, no fragility, same information.
4. A ⌘K palette makes a portfolio feel operable. Jumping between sections like an app, not a brochure, sells the "console" idea more than any shader.

Built with Next.js, React Three Fiber, drei, and framer-motion. The console is the pitch — but only when it gets out of the reader's way.