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

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?