Alireza Azizi

Posted on Jun 4

Vibe Coding: When Building a 3D React Component Felt Easier Than Making Coffee

#ai #vibecoding #gsap #react

Introduction

Creating an interactive 3D component with drag controls, smooth animation, and React compatibility typically involves hours of development. But what if the process could be driven by conversation instead of code?

This article documents how I used AI tools to build a complete 3D cube component, publish it as an npm package, and support both React and vanilla JavaScript environments—all without manually writing a single line of code.

Starting with a Single Prompt

The process began with a prompt in Canva Code:

Create a smooth and interactive 3D rotating cube where
each of the six faces displays a different image.
The cube should rotate continuously around both the X and Y axes using GSAP.
Users must be able to click and drag to manually rotate the cube in any direction.
While the user is interacting with the cube, the automatic rotation should pause
and resume shortly after interaction stops

Canva generated the initial HTML, CSS, and JavaScript in seconds. The output wasn’t just functional—it was surprisingly refined for a first version.

Why Canva Performed So Well

One likely reason Canva produced such a solid starting point is its training on a vast visual design and UI database. Its model seems particularly adept at UI generation, possibly because it has learned design heuristics and layout logic from countless web-based interfaces. While it may not be ideal for backend logic, it excels when the task involves layout, animation, or user interaction patterns.

Expanding with Cursor and Claude

After generating the base version in Canva, I imported the project into Cursor IDE and began refining it with Claude Sonnet. Through a series of short conversations, I introduced several enhancements:

Adding Interactivity

Asked for drag rotation with inertia
Claude provided a natural-feeling drag-and-rotate mechanic

Supporting Multiple Use Cases

Requested a variation for videos, and another for dashboard previews
AI split the codebase into reusable templates

React Conversion

Asked to port the vanilla version into a React component
Code was restructured with prop support and a reusable API

Mobile Compatibility

Requested mobile touch controls and responsive design
AI adapted the interactions to work across devices

The Final Component

The end result is a configurable, flexible, and well-structured React component:

<Cube3D
  faces={[
    { type: 'image', content: '/path/to/image1.jpg' },
    { type: 'video', content: '/path/to/video.mp4' },
    { type: 'html', content: '<div>Custom HTML</div>' },
    { type: 'image', content: '/path/to/image2.jpg' },
    { type: 'image', content: '/path/to/image3.jpg' },
    { type: 'empty' }
  ]}
  autoRotate={true}
  rotationSpeed={0.5}
  enableDrag={true}
  size={300}
  borderRadius={10}
/>

Supported Features

Image, video, HTML, and empty faces
Configurable auto-rotation and speed
Drag interactions with momentum
Mobile and touch support
Responsive design
Custom styles and sizing
TypeScript types

Packaging Without Manual Commands

I didn’t manually write a package.json, run a CLI, or push to npm. The AI handled:

Creating and configuring the package
Writing documentation
Publishing to npm
Managing folder structure for both React and vanilla versions

Folder Structure Overview

react-interactive-cube3d/
├── React/                 // React components
├── HTML-CSS-JS/          // Vanilla JavaScript version
├── packages/             // NPM package files
└── examples/             // Usage demos

Practical Use Cases

This component has potential in various settings:
Game inventory interfaces
Corporate landing pages
Personal portfolios
Mobile app widgets
Media gallery previews

Reflections on Vibe Coding

Using AI tools to build this project highlighted some key insights:

1. High-Level Thinking

Instead of diving into syntax, I was able to focus on design goals, behavior, and end-user experience.

2. Conversational Development

All iterations were prompt-based. I never had to switch mental models or get lost in implementation details.

3. Consistent Documentation

The AI tools created docs, examples, and comments by default, leading to a clean and approachable codebase.

4. Reduced Technical Debt

Because the AI iteratively refined the code and tested various edge cases, the component remained relatively robust without shortcuts.

Installation and Usage

 import { Cube3D } from 'react-interactive-cube3d';
 import 'react-interactive-cube3d/dist/cube3d.css';

function App() {
  const faces = [
    { type: 'image', content: '/image1.jpg' },
    { type: 'image', content: '/image2.jpg' },
    { type: 'video', content: '/video.mp4' },
    { type: 'html', content: '<h2>Hello World!</h2>' },
    { type: 'image', content: '/image3.jpg' },
    { type: 'empty' }
  ];

  return (
    <Cube3D
      faces={faces}
      size={300}
      autoRotate={true}
      enableDrag={true}
      rotationSpeed={0.5}
    />
  );
}

Closing Thoughts

This project was a small but meaningful glimpse into what’s possible when interface design and development are driven by intent rather than implementation. By offloading low-level tasks to AI tools, developers can focus on structure, interaction, and creativity.

It’s not about avoiding code, it’s about spending your energy where it matters most.

Links
GitHub: react-interactive-cube3d
NPM: react-interactive-cube3d
Live Demo: CodeSandBox Demo

DEV Community