SANDBOX

"Build. Animate. Present."

🖥️ Recommended: Play on a Computer

Sandbox is a desktop-first creative tool. While it works in any browser, a mouse and keyboard are strongly recommended for the best experience. Mobile and touchscreen use is limited.

About the Game

Sandbox is a browser-based creative studio where you design visual scenes from scratch using shapes, images, text, and lines — then bring them to life with animations and present them as slideshows. It's part drawing tool, part presentation builder, part motion designer. Create anything from diagrams and layouts to animated scenes and full slide decks, all without leaving your browser. Your projects are saved locally and can be backed up and restored at any time.

Getting Started

  • Click "New Project" on the home screen to create a blank canvas
  • Name your project by clicking the title in the toolbar
  • Use the toolbar modes to start building your scene
  • When done, hit Play to preview your project as an animation
  • Use Playlists to chain multiple projects into a full presentation

Toolbar Modes

  • 🟦 Build (Shift+B) — Click the canvas to place shapes: Rectangle, Square, Circle, Triangle, Plank, Pillar. Pick color, finish, pattern, and border before placing
  • 🖼️ Image (Shift+I) — Drop an image onto the canvas, paste with Ctrl+V, or upload manually. Supports opacity, corner radius, and clip options
  • ✏️ Line (Shift+L) — Drag to draw a line. Set width, style (solid, dashed, dotted), and color
  • 🔤 Text (Shift+T) — Drag to create a text box, double-click to type. Full font, size, color, and alignment controls
  • Move (Shift+M) — Drag any object to reposition. Rotate with snap to 45° increments
  • ↔️ Stretch (Shift+S) — Drag handles on a selected object to resize. Corner handles resize freely
  • 🗑️ Delete (Shift+D) — Click any object to remove it from the canvas

Shape Options

Each shape can be customized with a finish (Matte, Gloss, Metallic, Neon), a pattern overlay, and a border style. After placing, select a shape to adjust its color, opacity, corner radius, and more from the right panel.

Motion & Animation

  • Click Motion in the toolbar to open the animation editor
  • Every object (shapes, images, text, lines) can have its own entrance and exit animation
  • Choose from a range of animation types, set duration and delay, and control whether objects stay or exit
  • Use the timeline to stagger animations for cascade effects
  • Hit Play to preview all animations in sequence

Playlists

  • Chain multiple projects into a presentation
  • Set transitions per scene: Cut, Fade Black/White, Slide Left/Right/Up/Down, Zoom In/Out, Wipe Left/Right
  • Set transition duration per scene
  • Add audio per scene (record voice or upload) plus a global track for the whole presentation
  • Click Play Playlist to run the full presentation in fullscreen

Saving & Data

  • Projects save automatically to your browser's local storage
  • Use Backup Data to export all projects and playlists to a JSON file
  • Use Restore to reload from a backup file
  • Use Download App to save Sandbox itself as a standalone HTML file to run offline

Keyboard Shortcuts

  • Ctrl+Z — Undo
  • Ctrl+Y — Redo
  • Ctrl+C — Copy selected shape
  • Ctrl+V — Paste shape or image
  • Shift+B/I/L/T/M/S/D — Switch toolbar modes

Tips

  • Use Plank and Pillar shapes to build structures, frames, and layouts quickly
  • Stack shapes with different finishes (Neon on top of Matte) for layered visual effects
  • Stagger animation delays in the Motion editor for flowing cascade entrances
  • Record voiceover directly in the Playlist editor for each scene — no external software needed
  • Download the app as an HTML file to use Sandbox completely offline