Vibe Board is an interactive node-based canvas where you connect your creative instincts and it reveals your unique Design DNA.
I kept seeing the same types of Framer projects — landing pages, waitlists, simple tools. I wanted to prove that Framer can host something that feels more like a real application. A canvas where your choices actually lead somewhere felt like the right challenge to take on.
You have four columns of nodes — Mood, Industry, Color Palette, and Typography. Drag and connect one from each column. The moment all four are linked, the canvas fades away and your Design DNA card appears. It gives you a named persona, a curated color palette, a font pairing, and a one-line brand personality specific to the combination you chose. No two people who make the same connections will feel like they got a generic result. That was the whole point.
The entire thing runs on a drag-and-connect node canvas with real-time SVG bezier lines that physically draw themselves onto the screen as you make each connection. There is a live progress tracker at the bottom that reacts as you lock in each vibe, and when you complete all four, a reveal animation takes over the screen.
The hardest part was the connection system. Keeping track of which nodes are linked, recalculating the SVG bezier curve math in real time as nodes are dragged, and syncing all of that with the progress HUD and the final output card is genuinely complex state logic. Agents handled the heavy lifting and let me focus on making the experience feel good rather than debugging coordinate math for hours. I was honestly surprised by how well Agents dealt with interactive logic specifically, not just laying out components. When you give it a clear structure and work in small steps, it builds things that people actually want to touch.
Pick one node from each column. Connect them. See who you are as a designer.
Built with Framer 3.0
Vibe Board is an interactive node-based canvas where you connect your creative instincts and it reveals your unique Design DNA.
I kept seeing the same types of Framer projects — landing pages, waitlists, simple tools. I wanted to prove that Framer can host something that feels more like a real application. A canvas where your choices actually lead somewhere felt like the right challenge to take on.
You have four columns of nodes — Mood, Industry, Color Palette, and Typography. Drag and connect one from each column. The moment all four are linked, the canvas fades away and your Design DNA card appears. It gives you a named persona, a curated color palette, a font pairing, and a one-line brand personality specific to the combination you chose. No two people who make the same connections will feel like they got a generic result. That was the whole point.
The entire thing runs on a drag-and-connect node canvas with real-time SVG bezier lines that physically draw themselves onto the screen as you make each connection. There is a live progress tracker at the bottom that reacts as you lock in each vibe, and when you complete all four, a reveal animation takes over the screen.
The hardest part was the connection system. Keeping track of which nodes are linked, recalculating the SVG bezier curve math in real time as nodes are dragged, and syncing all of that with the progress HUD and the final output card is genuinely complex state logic. Agents handled the heavy lifting and let me focus on making the experience feel good rather than debugging coordinate math for hours. I was honestly surprised by how well Agents dealt with interactive logic specifically, not just laying out components. When you give it a clear structure and work in small steps, it builds things that people actually want to touch.
Pick one node from each column. Connect them. See who you are as a designer.
Built with Framer 3.0
Reem Magdi