Spotlight Builder

Builder Overview

The spotlight builder uses a three-panel layout with two modes:

• Storyboard mode — When no scene is selected, the center canvas shows all scenes as a storyboard grid. The left panel lists all scenes with drag-to-reorder.
• Scene edit mode — Click a scene to enter it. The center canvas shows the full image with draggable region overlays. The left panel switches to a region list with prev/next scene navigation.
• Right panel — Context-sensitive settings: global spotlight settings (when in storyboard mode), scene settings (when a scene is active), or region properties (when a region is selected).

Setting Up

1. Create a new experience and choose Spotlight as the type.
2. Click Add Scenes to open the Filerobot Asset Picker and select one or more images. Multi-select is supported.
3. Scenes appear in the storyboard. Click a scene to enter it and start adding regions.
4. Click Add Region to create a highlight area, then drag its corners to position it.

Scenes

A spotlight experience is built from one or more scenes. Each scene is a separate image with its own set of highlight regions.

• Reorder — Drag scenes in the left panel to change their order.
• Navigate — Use the prev/next arrows in scene edit mode to move between scenes.
• Delete — Remove a scene from the left panel.
• Escape — Press Escape to deselect a region, or press again to exit back to the storyboard.

Regions

Regions define the highlighted areas within a scene. Each region has:

Regions can be reordered by dragging in the left panel. The order determines the numbered badge and the playback sequence.

Mask & Overlay

The mask darkens or blurs the area outside the highlighted regions, drawing attention to the spotlight area:

• Mask style — Color overlay or blur effect.
• Mask opacity — How dark the non-highlighted area appears (0–1).
• Mask color — Color of the overlay (default black).
• Blur radius — Blur strength when using the blur mask style.
• Per-scene toggle — Each scene can disable the mask independently.

Global Settings

The right panel in storyboard mode shows settings that apply to the entire experience:

Scene Settings

When a scene is active and no region is selected, the right panel shows scene-level settings:

• Scene title — Name shown in the storyboard and as the scene heading.
• Annotation — Scene-level title and description text.
• CTA — Optional call-to-action button for the scene.
• Mask toggle — Enable or disable the mask overlay for this specific scene.

Tips

• Use multiple scenes to create a step-by-step walkthrough of a product or feature.
• Keep regions focused — highlight one feature per region for clarity.
• Use the blur mask style for a more subtle focus effect compared to the color overlay.
• Add a CTA on the final scene to drive viewers to take action.
• Preview on mobile using the responsive preview toggle in the builder top bar.
• Changes auto-save every 3 seconds. Look for the "Saved" indicator in the top bar.