VibeCheck

We took the friction out of 3D modeling and turned it into an intuitive, swipe-to-generate showroom.

Comment

Inspiration

Interior design tools are notoriously complex. They force users to navigate bloated desktop interfaces, drag messy bounding boxes, and handle confusing spatial math just to see if a lounge sofa fits their aesthetic. We wanted to make spatial design accessible, interactive, and fun.

Inspired by intuitive swiping mechanics, we built VibeCheck—an instant, immersive interior design playground that translates your personal taste directly into a beautiful 3D environment.

What it does

VibeCheck gamifies interior design into a seamless five-step flow:

  • Choose a Space: Select between a Living Room, Bedroom, or Coffee Shop.
  • Select a Vibe: Choose an aesthetic constraint (Industrial, Japandi, or Mid-Century Retro) that instantly alters the global lighting, wall materials, and flooring textures.
  • Curate the Catalog: A 3D Tinder-swipe interaction lets you look around individual low-poly 3D models using micro-WebGL viewers. Swipe right to "love" an item or left to pass.
  • Step Into Your Space: VibeCheck coordinates a microsecond-accurate spatial layout engine to instantly compile a semi-circular, zero-overlap 3D showroom layout using React Three Fiber.
  • Monetize & Share: Finalized spaces are uploaded to a global Community Gallery, where each creator's layout is automatically equipped with a decentralized Solana Pay micro-tipping economy.

Once inside their 3D room, users can open up the Edit Layout mode to seamlessly slide and rotate furniture along a strictly floor-locked grid, or talk to an integrated AI Assistant powered by the Gemini API to dynamically modify architectural styles and inject new objects into the scene with natural language.

How we built it

We engineered a robust full-stack spatial design application across a fast 24-hour cycle:

  • Frontend: Built with React and Vite, utilizing React Three Fiber (R3F) and @react-three/drei to orchestrate the heavy-duty 3D rendering pipeline. Interface animations are driven by custom fluid mesh CSS gradients shifting dynamically behind full-screen frosted-glass UI components.
  • Web3 Integration: Integrated a native Solana Pay routing mechanism on the client. By generating dynamic Solana asset request strings transformed into scannable frontend QRCodeSVG components, we established a frictionless, peer-to-peer crypto micro-payment tipping layer for creators.
  • Cloud Infrastructure & Deployment: Hosted and deployed on Vultr Cloud Compute. By leveraging Vultr's high-performance virtual instances, we eliminated deployment bottlenecks and achieved ultra-low-latency throughput for our state-heavy WebSocket and API interactions.
  • Backend: A decoupled Node.js & Express architectural layer running directly on our Vultr instance. It features a custom Backboard persistent session store that seamlessly caches and tracks user layout transformations and AI modifications in real time.
  • AI Engine: Integrated the Gemini API using the @google/genai SDK to handle conversational intent parsing, transforming natural language commands directly into 3D asset state changes.
  • Database: MongoDB Atlas storing spatial coordinate data arrays, layout maps, and finalized rooms for the shared community gallery experience.

Challenges we ran into

Building a stable WebGL canvas environment within a highly dynamic React state loop came with massive hurdles:

  • The WebGL Crash Crisis: Rendering multiple WebGL canvases inside moving Tinder cards caused rapid GPU context losses. We resolved this by implementing strict rendering logic that limits the active WebGL lifecycle strictly to the top visible card, while using custom asset preservation (dispose={null}) to prevent cache degradation when cards unmount.
  • Frictionless Payment Architecture: Traditional card processors enforce flat transaction fees (e.g., \$0.30 + 2.9%) that make sending small 50-cent appreciation tips to independent 3D designers mathematically impossible. We overcame this payment hurdle by pivoting to Solana's ultra-low-fee network rails. By wrapping payments into structured URLs mapped to high-fidelity QR codes natively within our React components, we bypassed traditional banking walls entirely.
  • Z-Fighting & Intersections: Walls and windows sharing identical floating coordinates caused flickering graphics. We resolved this by bolting models out by safe offsets (pulling the window slightly forward to Z = -3.95).
  • State Synchronization Drift: Using PivotControls for custom asset transformations originally bypassed React's state loop, causing components to unrender and snap back to their original spots. We overrode the pipeline by tracking direct vector properties natively when dragging stops, cleanly syncing them to our React state array and instantly backing them up to our Node.js Backboard session handler on Vultr.

Accomplishments that we're proud of

  • High-Frequency Solana Pay Tipping: Successfully engineering a functional blockchain payment prototype directly inside the community cards, demonstrating instant, friction-free asset routing natively from a browser layout to a mobile web3 wallet.
  • High-Performance Vultr Architecture: Deploying our full backend environment onto Vultr Cloud Compute with zero configuration overhead, providing the raw compute speed needed to stream layout modifications instantly without bottlenecking infrastructure.
  • Flawless 3D Asset Stability: Overcoming complex WebGL memory leaks so that users can swipe endlessly through heavy GLTF models without a single browser stutter.
  • Intuitive Transformation Gizmos: Implementing a highly professional 3D translation system that explicitly locks the vertical Y-axis, allowing users to drag and spin furniture freely without it flying into the ceiling or sinking through the floor.
  • Conversational Spatial Engine: Successfully binding the Gemini API with our 3D canvas pipeline, allowing users to naturally talk to their space and watch it shift dynamically around them.
  • Seamless Full-Screen UI: Crafting an iridescent, fluid-mesh glassmorphism design that completely scales across viewports, forces true viewport edge-to-edge alignment, and completely eliminates traditional CAD friction.

What we learned

We mastered the delicate balance between imperative 3D engines (Three.js), declarative state architectures (React), and instantaneous web3 transaction layouts. We discovered that combining raw web3 payments, optimized asset cleanup loops, global world matrix updates, and a high-performance virtual machine engine (Vultr) is the ultimate blueprint for building a real-world, scalable consumer design application.

What's next for VibeCheck

We plan to close the loop on our layout engine by passing the custom user-edited coordinate arrays directly back into our generative LLM models. This will allow the AI assistant to perform advanced spatial analysis—giving it the power to semantically judge your room layout, recommend complementary lighting fixtures based on custom items, or auto-generate pricing lists for the furniture you just curated!

Built With

Share this project:

Updates