DEV Community

Hrishikesh Dalal
Hrishikesh Dalal

Posted on AI-assisted

Brutalist House: A 3D Spatial Wall & Local AI Color Palette Inspector

#devchallenge #weekendchallenge #hf26challenge

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

I built Brutalist House—a local AI-powered interior color palette generator and interactive 3D spatial room inspector.

I built this for a friend who is an interior design enthusiast and architect. They love brutalist architectural aesthetics—unprocessed concrete bases, raw functional zoning, and high-visibility accent pops—but constantly struggled to visualize how a 4-color palette translates onto actual 3D walls in a room. Plain HEX swatches on a flat screen just don't tell you how a room will feel when light hits specific surfaces.

Brutalist House solves this problem by taking local AI-generated color palettes (powered by Gemma 4 via Ollama) and applying them directly across:

  1. An Interactive 3D Room Box Inspector: View each room (Living Room, Bedroom, Kitchen, Bathroom) as an interactive 3D box. Rotate the camera along $X$ and $Y$ axes, inspect individual walls (North, East, South, West, and Floor), and reassign specific colors to individual walls on the fly.

  1. A 2D Architectural Floorplan: A high-contrast SVG plan view showing scale, room transitions, furniture accents, and door swings.

  1. Automatic Local Storage History: Saves every generated palette and wall configuration locally so my friend can switch back and forth between design iterations with a single click.

Demo

Code

Below is a snippet of how the 3D Spatial Box handles pure CSS 3D matrix transforms and per-wall color assignments without requiring heavy external 3D engine bundles:

<div 
  className="relative w-[280px] h-[220px] transition-transform duration-300 ease-out"
  style={{
    transformStyle: 'preserve-3d',
    transform: `rotateX(${tiltX}deg) rotateY(${rotationY}deg)`
  }}
>
  {/* NORTH WALL */}
  <div 
    onClick={() => setSelectedWall('north')}
    className="absolute inset-0 border-4 flex flex-col items-center justify-center cursor-pointer"
    style={{
      backgroundColor: currentRoomWalls.north,
      borderColor: colors.primary,
      transform: 'translateZ(-140px) rotateY(180deg)',
    }}
  >
    <span className="text-xs font-black uppercase bg-white px-2 py-1 border border-black">NORTH WALL</span>
  </div>

  {/* FLOOR */}
  <div 
    onClick={() => setSelectedWall('floor')}
    className="absolute w-[280px] h-[280px] border-4 flex flex-col items-center justify-center cursor-pointer"
    style={{
      backgroundColor: currentRoomWalls.floor,
      borderColor: colors.primary,
      transform: 'translateY(70px) rotateX(90deg)',
    }}
  >
    <span className="text-xs font-black uppercase bg-white px-2 py-1 border border-black">FLOOR</span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

How I Built It

  • Local Open-Weight AI Model: Powered by Gemma 4 running locally through Ollama (/api/ollama). The model acts as the "brutalist design consultant," returning structured JSON containing color variables (background, primary, secondary, accent) and an architectural design rationale.
  • Frontend Framework: Built with Next.js (App Router), TypeScript, and Tailwind CSS.
  • 3D Engine: Implemented using pure CSS 3D transforms (perspective, preserve-3d, rotateX, rotateY, translateZ) to deliver fluid 60FPS room rotations without adding heavy 3D library dependencies.
  • Persistence Layer: Integrated standard localStorage pipelines so that custom wall color tweaks and past palette history persist seamlessly across sessions.

Why Does Open Innovation Matter?

  1. Local-First Privacy & Zero Vendor Lock-in: Design concepts, room ideas, and creative prompts stay 100% on the user's local machine. Running open-weight models like Gemma 4 via Ollama ensures complete data ownership.
  2. Zero API Costs & Unlimited Iteration: Traditional proprietary APIs charge per token, making rapid palette generation and real-time prompt experimenting costly. Open-weight inference allows infinite generation cycles without rate limits or subscription paywalls.
  3. Fine-Tuned Control: Open models allow developers to inspect, fine-tune, and customize prompt structures directly, tailoring responses to niche aesthetic movements (like brutalism or minimalism) without closed-system alignment filters over-sanitizing creative output.

Prize Categories

  • Build for a Friend
  • Best Use of Local AI / Open Weights (Gemma & Ollama)

Top comments (0)