Overview

Viktor explores Claude Code's autopilot capabilities for building 3D animated websites. The model generates Three.js scenes, WebGL shaders, and complex CSS animations that run at 60fps.

What You'll Learn

Using Claude Code for Three.js / WebGL generation
Setting up autopilot mode for continuous generation
Creating 3D hero sections with particle effects
Combining 3D backgrounds with standard HTML content

Step-by-Step Breakdown

1. Project Setup

Viktor creates a Vite project and uses Claude Code to scaffold the Three.js boilerplate — scene, camera, renderer, and resize handling. The autopilot flag lets Claude iterate without manual approval.

2. 3D Hero with Particles

A single prompt generates a particle system with 5000 points that form a sphere, slowly rotating with a gradient color shift. The particles respond to mouse position for interactive depth.

3. Scroll-Linked 3D Transitions

Claude wires up scroll events to camera position and particle dispersal. As the user scrolls, the 3D scene transforms from a sphere to scattered particles, revealing content beneath.

4. Layering HTML on 3D

The final step: overlaying standard HTML sections on top of the 3D canvas using CSS z-index and mix-blend-mode. Viktor shows how to maintain text readability against dynamic backgrounds.

Tools Used

Claude Code (autopilot mode)
Three.js
Vite
GLSL shaders

Key Takeaways

Claude Code's autopilot mode is perfect for iterative 3D work
Three.js particle systems create the most impressive hero sections
Scroll-linked 3D requires careful performance optimization
Always test on mobile — 3D falls back to static gradients gracefully