Forem: Alireza Azizi

From Inspiration to NPM: How I Built a React Library with "Vibe Coding"

Alireza Azizi — Mon, 16 Jun 2025 14:10:19 +0000

It all started with a spark of inspiration. I was Browse through Awwwards and stumbled upon a stunningly fluid, infinite gallery: 300.yourmajesty.co. I was captivated by the seamless, multi-directional drag experience. It felt like exploring a vast, endless world of images.

The immediate developer thought kicked in:

How would I build this?

But then, a more interesting challenge emerged:

How quickly could I build this by using AI as my primary tool, guiding it instead of writing every line of code myself?
This set me on a fascinating journey to see how far I could push AI-assisted development, a process I like to call "Vibe Coding."

Step 1: The AI Prototype in Canva

Why start with a tool like Canva instead of jumping straight into a code editor? For highly visual, self-contained components, I've found that visual AI generators can create a strong baseline much faster. To give the AI the best chance of success, I crafted a single, comprehensive prompt that detailed everything I wanted, from the core mechanics to the interaction details.

This was my starting prompt:

Please create a highly performant, infinite image gallery inspired by the website 300.yourmajesty.co.

Core Mechanics:

The gallery should be an infinite grid of images that can be freely explored by dragging in any direction (horizontal and vertical), with smooth, inertia-based movement.
It must be truly infinite, wrapping around seamlessly in all directions. If a user scrolls continuously, they should eventually return to the start, like navigating a 2D torus.
Layout & Visuals:

Use a collection of 60 unique images in a clean, structured grid with generous spacing between them.
The images should be fixed in their grid positions, with no fade-in or move-in animations on load or scroll. They should feel like part of a pre-existing world.
Interaction:

The drag interaction should be natural: dragging right should move the content to the left, and dragging up should move the content down.
Remove all hover effects.
When an image is clicked, it should smoothly animate to a fullscreen lightbox. The lightbox must be closable by clicking outside the image or pressing the Escape key.

After providing this detailed prompt and iterating with the AI through a few versions to refine the output, I had a strong code base to work with. While Canva doesn't have a direct 'export code' feature, there's a simple workaround: if you inspect the live preview, you'll find the complete code for the project rendered cleanly inside an iframe, ready to be saved.

Step 2: From Raw Code to a React Component with Vibe Coding

Now I had a working prototype, but it was just a collection of static files. My goal was to turn it into a reusable React component.

I brought the code into Cursor, an AI-first code editor. This is where "Vibe Coding" really shined. Instead of manually rewriting everything, I began a back-and-forth conversation with the AI. I guided it to refactor the entire codebase into a proper React component. When bugs inevitably appeared during the conversion, like the grid alignment breaking on window resize, I described the unwanted behavior and worked with the AI through prompts to fix it. It was a process of wrangling and refining the logic, all done conversationally, without me manually typing the implementation code.

Step 3: The Final Product, Published and Ready to Use! ✨

After a few final tweaks with the AI, the component was ready. Of course, this is a more foundational version of the incredibly polished Awwwards site, but it captures the core infinite-scrolling mechanic and serves as a great starting point for more complex projects.

It was clean, functional, and ready to be shared. I published it to both GitHub and NPM, making it available for anyone to use.

Here is the result of this AI-powered journey:

🎨 Live Demo: See it in action on CodeSandBox
📦 NPM Package: Install it in your project with npm i react-infinite-gallery - View on npmjs
👨‍💻 Source Code: Fork it, star it, or contribute on Github

Conclusion: Your New AI Pair Programmer

This experiment was a powerful reminder that the role of a developer is evolving. It's becoming less about the syntax we type and more about our ability to clearly articulate a vision and guide intelligent tools to realize it.

This process of "Vibe Coding," or conversational development, didn't replace me. It augmented me. It handled the tedious work of boilerplate, refactoring, and debugging, which freed me up to focus on the creative and architectural decisions. It turned a weekend-long project into an afternoon's work.

What will you build with your new AI partner?

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

Alireza Azizi — Wed, 04 Jun 2025 17:59:35 +0000

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