v0 Blocks

A 3D block building application built with React, Three.js, and Next.js.

About · How to Use · Tech · Features · Author

About

v0 Blocks is an interactive 3D block building application that lets you create, save, and load your own brick constructions. Inspired by classic building block toys, this application provides a digital canvas for your creativity.

How to Use

• Build Mode (B): Add blocks to your creation
• Move Mode (M): Rotate and move the camera
• Erase Mode (E): Remove blocks from your creation
• Keyboard Shortcuts:
  • Number keys (1-8): Select colors
  • [/]: Adjust block width
  • ;/': Adjust block depth
  • S: Swap dimensions
  • Ctrl/Cmd+Z: Undo
  • Ctrl/Cmd+Shift+Z: Redo
  • Ctrl/Cmd+Enter: Play/Stop animation
  • Ctrl/Cmd+S: Save creation
  • Ctrl/Cmd+O: Load creation

Tech

• React & Next.js
• Three.js for 3D rendering
• Vercel KV (powered by Upstash) for storage
• Tailwind CSS for styling
• Shadcn/UI components

Features

• Real-time 3D block building
• Multiple color themes
• Adjustable block dimensions
• Save and load creations
• Undo/redo functionality
• Animation mode
• Mobile-responsive design
• Keyboard shortcuts

Author

• Chris Tate (@ctatedev)