## Overview

In this tutorial, we test if AI can build a 3D image carousel without us typing code by hand.
I use Claude Code together with Three.js, the Three.js Shading Language (TSL), and WebGPU to make a smooth 3D carousel inspired by the Eleven Labs music page.

You’ll see how I guide the AI step-by-step, add rounded corners to images, make the carousel move with the mouse wheel or by dragging, and set nice visual effects when images move into view.

## Vibe Coding

By watching this tutorial, you will not only learn how to make a 3D carousel but also see how to give AI the right instructions, fix its mistakes, and adjust the results to get a polished final version. This is a useful skill for any developer who wants to work faster while keeping full control over the project.

## Tech Stack

- **[Claude Code](https://www.anthropic.com/claude-code)**
- **[Three.js Shading Language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)**
- **[Three.js](https://threejs.org/)**
- **[React Three Fiber](https://r3f.docs.pmnd.rs/getting-started/introduction)**

## Experience the project in action 

- [Live Demo](https://3d-carousel.wawasensei.dev)
- [Final Code](https://github.com/wass08/r3f-carousel-slider)
- [Starter Code](https://github.com/wass08/r3f-webgpu-starter)


#threejs #vibecoding #claudecode

Learn how to Vibe Code a 3D Carousel with Claude Code & Three.js