Scenes Panel

3 min read

The Scenes Panel allows you to create, manage, and switch between multiple scenes in your project. Scenes are separate canvas states that can be chained together for multi-scene animations.

Location

The Scenes Panel is located at the bottom of the screen, sharing space with the Timeline Panel. Access it by:

  • Clicking the Scenes button in the left toolbar
  • Or pressing C

Panel Overview

The panel has two tabs:

  • Scenes — Manage your scenes (default view)
  • Timeline — Keyframe animation editor

Scene Cards

Each scene appears as a card showing:

  • Thumbnail — Preview of the scene content
  • Name — Editable scene name
  • Duration — How long the scene plays
  • Item count — Number of elements in the scene

Actions

Action How
Select scene Click on the scene card
Load scene Double-click the card
Rename Click the name and type
Delete Click the × button on the card
Reorder Drag cards left/right

Adding Scenes

Click the + New Scene button to save the current canvas as a new scene.

Tip: Each scene captures the current state of your canvas, including all items, animations, and background settings.

Timeline Scrubber

Below the scene cards is a timeline showing:

  • Scene blocks — Colored blocks representing each scene’s duration
  • Scrubber — Red playhead showing current position
  • Total duration — Combined duration of all scenes

Scrubber Controls

  • Drag the red playhead to preview different times
  • Click on a scene block to jump to that scene

Playback Controls

Control Shortcut Action
▶ Space Play all scenes
⏸ Space Pause playback
⏹ — Stop and reset

Device Capability Badge

The top-right shows your device’s performance tier:

  • Green — High performance (smooth animations)
  • Yellow — Standard (may need optimization for complex scenes)
  • Red — Limited (consider simpler animations)

Click the info icon for detailed capability information.

Scene Transitions

Scenes play sequentially. To customize transitions:

  1. Set duration for each scene
  2. Use keyframe animations within scenes for smooth effects

Tips

Tip: Save your canvas as a scene before making major changes. You can always switch back to previous scenes.

Note: Scenes are stored in browser local storage. Export your project to save permanently.