How I Built the Bloomin Grid Images

The Problem

I knew the website had a grid layout, and I wanted to maintain the legacy flower imagery despite it being a bit cliche. But I wanted to make it feel a little bit more digital, so the goal was to create an aggressive disclosure of parts of the image.

The effect needed to feel technical and modern while still allowing the organic flower imagery to peek through in an intentional way.

Why Not Figma?

I knew that if I built the design in Figma, it would take a long time and actually wouldn't do the animations I wanted. Static mockups can only take you so far when the core of the design IS the animation.

So I went straight to thinking about vibe coding the style guide for it. This meant building the actual interactive component as the design artifact itself.

Once the app is created, having sliders and different settings allows you to quickly finesse, alter, and tune the effect. As a designer, that adds a level of perfection that can't really be achieved without days of work otherwise.

The Vibe Coding Approach

Instead of designing then building, I coded the visual effect directly using Factory Droid as my AI coding assistant. It lets me move fast and iterate on ideas without getting bogged down in boilerplate. As well as Factory Droid, I used Wispr Flow so that I could use natural language to describe everything I wanted. I did, however, have a quite good idea in my own head of what I wanted to produce, so I wasn't stabbing around in the dark.

My go-to tech stack for quick builds like this is Next.js, Tailwind CSS, and shadcn/ui components. It's a combination that lets me focus on the creative problem rather than fighting with tooling.

Try It Yourself

I've made the tool free for everyone to use. You can upload your own images, adjust the grid parameters, and export the result for your own projects.

You might have noticed that I've used an image of robots, and it has the link to Volume11.ai. That is our main company for AI software development. Check them out!