Keyframe Editor

Create custom shot keyframes by composing multiple image layers from your project's assets, uploads, and AI-generated content.

Overview

The Keyframe Editor is a multi-layer image composition tool that lets you build custom keyframes for your shots. Instead of relying solely on AI-generated images, you can combine multiple image layers—cast members, props, locations, and uploaded images—to create precisely the composition you need.

Key Concepts

• Keyframe: A single composed image that serves as the visual representation for a shot
• Layer: An individual image element on the canvas that can be positioned, resized, and transformed
• Assets: Your project's cast members, props, locations, and other visual elements that can be added as layers
• Canvas: The 16:9 (or 9:16) composition area where you arrange and manipulate layers
• Keyframe Variations: Multiple saved keyframes per shot, allowing you to compare and choose the best composition
• Selection Status: Mark keyframes as Selected, Rejected, or Pending to designate the official shot keyframe

When to Use the Keyframe Editor

The Keyframe Editor is ideal when you need:

• Precise character placement: Position cast members exactly where you want them in the scene
• Custom compositions: Combine multiple elements that AI generation might not capture correctly
• Quick iterations: Experiment with different arrangements without regenerating images
• Background replacement: Use a location as a background and overlay characters on top
• AI-enhanced merging: Use the Merge & Save feature to intelligently blend layers with AI assistance

---

Accessing the Keyframe Editor

From the Storyboard

1. Navigate to your project's Storyboard tab
2. Find the shot you want to edit
3. Click the Edit in Keyframe button on the shot card

Navigation

• Click Back to Storyboard in the header to return to the storyboard
• If you have unsaved changes, a confirmation dialog will ask if you want to discard them

---

Understanding the Interface

The Keyframe Editor has three main areas:

Left Sidebar

The sidebar contains all the controls for managing your keyframe:

Main Canvas Area

The central canvas is where you compose your keyframe:

• Canvas: 16:9 or 9:16 aspect ratio composition area (1920x1080 or 1080x1920 pixels)
• Grid Background: Helps with alignment and positioning
• Toolbar: Controls for selection, panning, zooming, and saving

Canvas Toolbar

Bottom Thumbnail Strip

The thumbnail strip displays all saved keyframes for this shot:

• Each thumbnail displays the keyframe image and creation date
• Click a thumbnail to load that keyframe version into the canvas
• Selected keyframes display a green badge
• Rejected keyframes display a red badge
• Pending keyframes display no badge
• Delete button on each thumbnail to remove that version
• Download button to export the keyframe image
• Thumbnails are ordered newest first and support horizontal scrolling

---

Multiple Keyframe Variations

The Keyframe Editor supports saving multiple keyframe variations per shot, allowing you to explore different compositions and compare them before committing to a final choice.

Creating Variations

Each time you click Save Keyframe, a new keyframe variation is created:

1. The canvas layers are flattened into a single 1920x1080 PNG image
2. The image is saved with a unique timestamped filename
3. A new thumbnail appears in the bottom strip
4. Previous keyframes are preserved (not replaced)

Browsing Variations

Use the thumbnail strip to review your saved keyframes:

• Click a thumbnail to load that keyframe in the canvas
• Selected thumbnail is visually highlighted
• Scroll horizontally to access more thumbnails when you have many variations
• Thumbnails display newest keyframes first

Building on Previous Work

When you click a saved keyframe thumbnail:

1. The keyframe loads as the background in the canvas
2. You can add new layers on top of it
3. Saving creates a new variation (does not overwrite the original)

This allows iterative refinement of previous compositions.

Starting Fresh

Click New Keyframe in the sidebar to:

• Clear all layers from the canvas
• Start with a blank composition
• Previously saved keyframes remain in the thumbnail strip

---

Selection Workflow

Each keyframe has a selection status to help you track which version is the official shot keyframe.

Selection Statuses

Setting Selection Status

1. Click a keyframe thumbnail to select it
2. In the sidebar, find the Selection Status dropdown
3. Select "Selected", "Rejected", or "-----" (pending)
4. The change saves immediately

One Selected Keyframe Per Shot

Only one keyframe per shot can be selected at a time:

• When you select a keyframe, any previously selected keyframe is automatically reset to pending
• This happens instantly—no confirmation required
• Selection badges in the thumbnail strip update immediately

Selection and Downstream Workflows

The selected keyframe is used by downstream processes:

• Video generation uses the selected keyframe as the shot's visual
• Exports include the selected keyframe
• If no keyframe is selected, some operations may use the most recent keyframe or require selection first

---

Working with Layers

Adding Layers from Assets

1. In the Assets section of the sidebar, click on an asset category (e.g., "Cast Member")
2. The category expands to display individual assets
3. Click on an asset name (e.g., "Pilot")
4. A dialog opens displaying all available images for that asset
5. Toggle Selected Only to filter images by selection status
6. Click an image to add it as a new layer on the canvas

Default Layer Sizing

When you add a layer, it's automatically sized based on the asset type:

Selecting Layers

You can select a layer in two ways:

• From the Sidebar: Click the layer name in the Layers list
• On the Canvas: Click directly on the layer image

When selected, the layer displays:

• Resize handles at corners and edges
• Rotation handle above the layer
• Layer manipulation toolbar to the left

Manipulating Layers

With a layer selected, you can:

• Move: Drag the layer to reposition it on the canvas
• Resize: Drag corner handles to scale (maintains aspect ratio)
• Rotate: Use the rotation handle to turn the layer

All transformations are saved immediately to the layer state.

Layer Order (Z-Order)

Layers are stacked on the canvas—top layer in the sidebar list appears in front:

• Reorder: Drag layers up or down in the sidebar Layers list
• Visibility: Click the eye icon to hide/display a layer
• Hidden layers don't appear on canvas but remain in the list

---

Layer Tools

When you select a layer, a vertical toolbar appears to the left of the layer:

AI Operations

When using Remove Background or Manipulate with AI:

• A loading overlay blocks the entire interface
• You cannot interact with anything until the operation completes
• If the operation fails, the original layer remains unchanged
• Credits are consumed for AI operations

---

Canvas Controls

Zooming

Use the canvas toolbar to control zoom:

• Zoom In (+): Magnify the canvas for detailed work
• Zoom Out (-): Reduce magnification to see more of the canvas
• Reset Zoom: Return to the auto-fit zoom level
• The current zoom percentage is displayed in the toolbar

Panning

When zoomed in beyond the default level:

1. Select the Pan Tool (hand icon) from the toolbar
2. Click and drag on the canvas to move the view
3. Switch back to Select Tool to manipulate layers

Note: Pan only works when zoom exceeds the default level.

---

Saving Keyframes

Save Keyframe

Click Save Keyframe to save your composition:

1. All visible layers are flattened into a single image
2. The image is saved at 1920x1080 (16:9) or 1080x1920 (9:16) resolution
3. A new keyframe variation is created (previous keyframes preserved)
4. The saved keyframe appears in the thumbnail strip
5. The "unsaved changes" flag is cleared

Merge & Save Keyframe

The Merge & Save button provides AI-assisted merging of your canvas layers into a polished, cohesive keyframe.

When to use Merge & Save:

• When you want AI to intelligently blend layers with consistent lighting and smooth edges
• When simple layer stacking doesn't achieve the visual quality you need
• When you want AI to enhance the composition based on a prompt

How to use Merge & Save:

1. Compose your scene with 1-4 visible layers on the canvas
2. Click Merge & Save in the toolbar
3. A dialog appears with:
   • Prompt field: Describe how to blend the layers (e.g., "blend the character into the background naturally")
   • Model dropdown: Select which AI image model to use for the merge
4. Click Generate to start the merge
5. The AI processes your layers and creates a merged keyframe
6. The result is saved as a new keyframe variation

Layer limits for Merge & Save:

• Minimum: 1 layer
• Maximum: 4 layers
• If you have more than 4 layers, you'll see an error message
• Only visible layers are included in the merge (hidden layers are excluded)

Note: Merge & Save consumes credits based on the selected AI model.

---

Managing Keyframes

Deleting Keyframes

To delete a keyframe variation:

1. Find the keyframe in the thumbnail strip
2. Click the Delete button on the thumbnail
3. The keyframe is removed from the strip

Important notes:

• If the deleted keyframe was currently displayed, the canvas loads another available keyframe or displays an empty state
• If the deleted keyframe was selected, the shot loses its selected keyframe reference
• Deletion is immediate—there is no undo

Downloading Keyframes

To download a keyframe:

1. Select the keyframe in the thumbnail strip
2. Click the Download button
3. The keyframe image downloads to your browser's download location

Use this to:

• Archive keyframes locally
• Share with stakeholders outside the platform
• Use in external editing applications

---

Unsaved Changes

The Keyframe Editor tracks unsaved changes:

• Adding, modifying, reordering, or removing layers creates unsaved changes
• Attempting to navigate away triggers a confirmation dialog
• Choose to stay and save, or discard changes and leave

---

Supported File Formats

When uploading images directly:

---

Tips and Best Practices

Composition Tips

• Start with the background: Add location layers first, then overlay characters and props
• Use the grid: The canvas grid helps align elements consistently
• Layer visibility: Hide layers temporarily to work on elements behind them
• Save variations: Create multiple keyframe versions to compare compositions

Using Merge & Save Effectively

• Keep layer count low: For best results, use 2-4 well-positioned layers
• Write descriptive prompts: Be specific about how you want layers blended (e.g., "match lighting between character and background")
• Experiment with models: Different AI models may produce different merge styles
• Compare with Save Keyframe: Try both regular save and Merge & Save to see which gives better results

Performance Tips

• Reasonable layer count: Keep to 4 or fewer layers for optimal performance
• Remove unused layers: Delete layers you don't need rather than just hiding them
• Use appropriate zoom: Work at 100% zoom for final positioning accuracy

Workflow Tips

• Selected images: Use the "Selected Only" filter to quickly find production-ready assets
• Iterate with versions: Save different compositions as separate keyframes, then select the best one
• AI enhancement: Use "Manipulate with AI" to add details or fix issues without regenerating the entire image
• Set selection early: Select your preferred keyframe so downstream processes know which to use

---

Common Questions

Can I undo changes?

Currently, the Keyframe Editor doesn't have undo/redo. Work carefully and use the visibility toggle to hide layers rather than deleting them immediately.

Why can't I pan the canvas?

Panning only works when you're zoomed in beyond the default level. Zoom in first, then select the pan tool.

What happens to my layers when I save?

Saving flattens all visible layers into a single image. Your layer arrangement is not preserved—only the final composite image is saved.

Can I edit a saved keyframe?

Saved keyframes are flat images. However, you can click a saved keyframe to load it as a background, add new layers on top, and save again to create a new variation.

Why can't I use Merge & Save?

Merge & Save requires:

• At least 1 visible layer on the canvas
• No more than 4 visible layers on the canvas
• Sufficient credits for the AI operation

If you have more than 4 layers, remove or hide some before using Merge & Save.

What's the difference between Save Keyframe and Merge & Save?

How do credits work in the Keyframe Editor?

What happens if I select a different keyframe?

When you select a keyframe, any previously selected keyframe for that shot is automatically reset to pending. Only one keyframe per shot can be selected at a time.

Can I have multiple selected keyframes?

No, each shot can have only one selected keyframe. Selecting a new keyframe automatically resets the previous one to pending status.

---

Next Steps

• Video Editor - Generate videos from your selected keyframes
• Dialog Editor - Add voice audio to your shots
• Subscriptions & Credits - Understand credit usage for AI operations