Panels and layout
The Editor uses a dockable panel system. Any panel can be dragged, resized, split, stacked into tabs, or hidden. Your arrangement persists per project, so reopening a timeline restores the layout you left.
The panels
- Preview
- Plays the current frame at the playhead. Top-right has a button to open the modal player for a clean full-sequence preview. Houses the playback controls (play, pause, scrub) and the volume sliders (narrator for A1 audio, video for V1 audio).
- Timeline
- The multi-track editor. Toolbar at top (tools, zoom, snap, markers, undo/redo). Tracks below with the ruler, playhead, and clip tiles. Dominates the bottom half of the default layout.
- Library
- Asset browser. Grid of tiles with search, kind filter, origin filter, and folder navigation. Drag any tile onto a track to create a clip.
- Scenes / Script
- Read-only view of the source storyboard's scenes and script. Click a scene to jump the playhead to its start.
- AI Gen
- Generation controls without leaving the editor. Generate images, audio, or motion directly into the Library. Images can be generated as references for existing scenes or as new B-roll.
- Characters
- Cast list. For multi-narrator storyboards, this is where you adjust voice assignments, swap presets, upload face images. Changes apply to future audio generations.
- Curve
- Context-sensitive. When a transition is selected on the timeline, the Curve panel shows a bezier editor for the transition's easing, plus preset buttons (ease-in, ease-out, linear, smooth).
- Transitions
- Drag source for transitions. Each tile represents a transition kind (fade-in, fade-out, cross-fade). Drag one onto a clip edge or clip join to arm a drop zone on the timeline.
Dragging and docking
Grab a panel by its header and drag. As you move, drop-target overlays appear on adjacent panels showing where the panel can dock:
- Full panel overlay: dropping lands the panel as a tab in that dock.
- Edge overlay (top, right, bottom, left): dropping splits the target and places the dropped panel on that side.
- Center overlay: merges into the target as a tab.
Release the drag to apply. Drop in empty workspace to float the panel. Click the X on a panel header to close it; reopen from the View menu.
Resizing
Drag the divider between any two docked panels to resize. Minimum widths and heights are enforced per panel. The Library can collapse to icon-only at the narrowest.
Saved arrangements
Every change to the panel layout is saved to localStorage immediately. Reopening the same timeline restores the exact arrangement. Different timelines can have different layouts.
To reset: click the settings cog in the subnav and pick Reset layout. This restores the default arrangement (preview top-left, library top-right, timeline bottom).
UI density
The settings cog in the subnav exposes three density options:
- Slim: tightest spacing. Best on small laptop screens.
- Standard: the default.
- Large: more generous padding. Good for tablet or touch use.
Density applies globally to all Fawna pages and persists across sessions. Not a per-timeline setting.
Responsive behavior
The Editor is designed for a laptop or desktop screen (1280px wide or better). At narrower widths, panels compact automatically. Below 900px, a warning appears suggesting a larger screen. Full functionality is not guaranteed on mobile.