Upload a 2D floor plan. Watch it transform into a photorealistic render. Explore it as a fully interactive 3D scene.
All powered by Google Gemini.

Live Demo  ·  Try the App  ·  Devpost  ·  Source Code

Project page: Astro on Devpost

A cinematic, scroll-linked experience where a background video scrubs frame-by-frame as you scroll. Built with canvas-based frame pre-extraction for buttery-smooth playback, floating gold particles, parallax glass cards, and staggered reveal animations.

A three-step AI pipeline:

1. Upload a 2D architectural floor plan (PNG, JPG, WEBP, HEIC)
2. Generate 3D Render — Gemini transforms your blueprint into a photorealistic interior visualization
3. Generate 3D Scene — the render is converted into an interactive, explorable HTML scene with Three.js voxel geometry

Download the rendered image or the full 3D scene as a standalone HTML file.

Floor Plan (2D image)
        │
        ▼
   Gemini Image Model
   (photorealistic render)
        │
        ▼
   Gemini Streaming Model
   (extract walls → build base → add furniture → validate)
        │
        ▼
   Interactive 3D HTML Scene
   (Three.js + WASD controls + city environment)

Each generation phase streams thinking progress to the UI in real time.

.
├── astro-demo.mp4                 # Demo video for landing page
├── start-dev.sh                   # Launch both dev servers
├── scroll-landing/                # Landing page (Vite + vanilla TS)
│   ├── index.html
│   ├── vercel.json                # Rewrites for /app proxy
│   └── src/
│       ├── main.ts                # Video scrubber engine + particles
│       └── style.css              # Cinematic noir luxury theme
└── Astro/
    └── floor-plan-3d/             # App (Vite + React + TypeScript)
        ├── index.html
        ├── vite.config.ts
        └── src/
            ├── App.tsx            # State machine + user flow
            ├── App.css            # Dark luxury UI theme
            ├── components/        # Stepper, UploadZone, Viewer, LoadingOverlay
            ├── services/gemini.ts # Gemini API calls (render + voxel generation)
            └── utils/html.ts      # HTML post-processing (camera, WASD, environment)

• Node.js 18+
• A Gemini API key

# Clone
git clone https://github.com/Abtinz/Astro.git
cd Astro

# Install dependencies
(cd scroll-landing && npm install)
(cd Astro/floor-plan-3d && npm install)

# Set your Gemini API key
echo "GEMINI_API_KEY=your_key_here" > Astro/floor-plan-3d/.env

# Start both servers at once
./start-dev.sh

Or run them separately:

# Landing page — http://localhost:5173
cd scroll-landing && npm run dev

# App — http://localhost:3001
cd Astro/floor-plan-3d && npm run dev

(cd scroll-landing && npm run build)
(cd Astro/floor-plan-3d && npm run build)

Both apps are deployed on Vercel from this repo:

The landing page uses Vercel rewrites to proxy /app requests to the app deployment.

Set GEMINI_API_KEY in the app project's environment variables on Vercel.

Both the landing page and app share a cohesive cinematic noir luxury aesthetic:

• Dark background with warm gold (#D4A853) accents
• Glassmorphic cards with backdrop blur
• Outfit (headlines) + DM Sans (body) typography
• Film grain overlay, radial vignette
• Staggered entrance animations, shimmer gradients
• Orbital loading spinner with phase progress

• API calls are made client-side. Do not expose production keys in public deployments without a backend proxy.
• .env files are gitignored and never committed.

All source code is publicly available at: github.com/Abtinz/Astro

MIT