Skip to content

Pixel2Pieces

Pixel2Pieces is a first-of-its-kind "Generative Manufacturing" pipeline that transforms 2D images into physical 3D puzzles.

Code Video Cerebral Valley

Core trick

Gemini extracts a silhouette's volume, then geometry code cuts interlocking slot-and-tab notches sized for 3mm material into SVG.

Tags

robotics/hardwarevision

Description

Pixel2Pieces is a first-of-its-kind "Generative Manufacturing" pipeline that transforms 2D images into physical 3D puzzles. While existing AI models focus on generating digital meshes for games or virtual reality, Pixel2Pieces empowers users to turn a single photo—be it a pet, a landmark, or a personal sketch—into a tangible, interlocking sculpture. By leveraging the multimodal reasoning of Gemini 3 Flash, our application analyzes the spatial volume of an image and automatically generates a series of 2D flatpack blueprints (SVGs/PDFs) with precise interlocking notches. These can be printed on common cardstock, laser-cut, or CNC-routed for immediate manual assembly.
alemonmelon/Pixel2Pieces★ 00 forksTypeScriptCreated Mar 7, 2026 · last push Mar 7, 2026

README excerpt

# Pixel2Pieces: Neural 3D Puzzle Engine

**Pixel2Pieces** is a high-performance computational geometry engine designed for the **Gemini 3 Hackathon**. It transforms 2D visual data into 3D interlocking "Slot-and-Tab" skeletal models, optimized for precision laser-cut fabrication.

## 🚀 Features

- **Neural Skeletal Extraction**: Leverages Gemini 3.1 Pro to derive structural topology from 2D silhouettes.
- **Precision Fabrication**: Automatically calculates interlocking slots for standard **3mm material thickness**.
- **Vector Output**: Exports production-ready SVG files with XML namespaces for CAD/CAM compatibility.
- **Futuristic UI**: A sophisticated, technical interface built with React, Tailwind CSS, and Motion.
- **Interactive Feedback**: Real-time neural scan progress and success celebrations.

## 🛠️ Tech Stack

- **Frontend**: React 19, Vite, TypeScript
- **Styling**: Tailwind CSS 4, Lucide Icons
- **Animation**: Motion (Framer Motion), Canvas-Confetti
- **AI Engine**: Google Gemini 3.1 Pro API
- **Geometry**: Custom SVG path generation and slot-and-tab logic

## 📦 Installation & Setup

1. **Clone the repository**:
   ```bash
   git clone https://github.com/alemonmelon/Pixel2Pieces-Gemini-3-Hackathon-Singapore.git
   cd Pixel2Pieces-Gemini-3-Hackathon-Singapore
   ```

2. **Install dependencies**:
   ```bash
   npm install
   ```

3. **Configure Environment Variables**:
   - Copy the example environment file:
     ```bash
     cp .env.example .env
     ```
   - Open `.e

Team