Visual Assets — Documentation Guide

Specs for all placeholder visuals in templates/documentation/guide/. Replace each placeholder <figure> with the corresponding asset when generated.

Suggested tool: record in the app, export as GIF or PNG. Use dark theme unless the feature reads better in light. Crop tightly to the relevant UI — no browser chrome unless the feature is page-level.

workspace.html

1. Full workspace overview

Type: Screenshot (PNG) Size: ~1600 × 900 px (16:9), full-width (media-placeholder-lg) What to show:

App open with a project loaded and a transcript present
All three panels visible: Waveform (top-left or left), Speakers (middle), Transcript (right)
Sidebar expanded on the left with at least 2–3 projects listed
Annotate with labeled callouts pointing to: Waveform Panel, Speakers Panel, Transcript Panel, Sidebar, Title bar
Playhead somewhere mid-audio so the waveform has a visible played/unplayed split

2. Panel collapse/expand

Type: GIF (animated) Size: ~1200 × 700 px, standard width (media-placeholder-md) What to show:

Start: all three panels open, roughly equal width
Click the collapse button on the Speakers panel header — panel collapses, other panels expand to fill
Double-click the Transcript panel header to focus it — Waveform and Speakers collapse, Transcript fills
Double-click again or click the focus button to restore all panels

Keep it slow enough to read (pause ~0.5s between steps)

waveform_panel.html

3. Full waveform panel overview

Type: Screenshot (PNG) Size: ~1200 × 400 px (3:1), full-width (media-placeholder-lg) What to show:

The complete waveform panel: waveform display area at top, region lane below it, time ruler, controls bar, minimap at very bottom
Transport (yellow vertical line) visible in roughly the middle of the waveform
At least 3–4 speaker region blocks visible in the region lane, in different colors
Minimap shaded viewport rectangle visible

4. Region lane close-up

Type: Screenshot (PNG) Size: ~900 × 120 px (wide crop of just the region lane), standard width (media-placeholder-md) What to show:

Zoomed-in crop of just the region lane strip
At least 2 speakers, each in a distinct color
Multiple paragraph groupings visible — each grouped as a single bar with rounded outer corners, speaker name drawn inside
Small gaps between paragraphs clearly visible
Ideally at least one paragraph with 2+ segments inside (so you can see the continuous bar spanning them)

5. Minimap

Type: Screenshot (PNG) Size: ~900 × 80 px (wide, shallow crop), small (media-placeholder-sm) What to show:

Just the minimap strip at full width
The full waveform thumbnail visible across the entire width
The shaded viewport rectangle clearly visible (lighter or highlighted region), positioned somewhere in the middle or left of center
Drag handles on the edges of the rectangle if visible

transcript_panel.html

6. Full transcript panel overview

Type: Screenshot (PNG) Size: ~700 × 900 px (portrait), full-width (media-placeholder-lg) What to show:

Full transcript panel with a loaded transcript
Search bar at top with placeholder text
Toolbar buttons visible (Export, Add CSV, Transcribe, History)
At least 2 speaker blocks, each with multiple paragraphs
Colored paragraph handles visible on the left edges
One segment highlighted (active/selected state)

7. Annotated transcript structure

Type: Screenshot with annotations (PNG) Size: ~700 × 500 px, standard width (media-placeholder-md) What to show:

Crop of 1–2 speaker blocks
Annotated with three labeled callouts (arrows or brackets):
1. Speaker block — pointing to the full speaker block area including its label at top
2. Paragraph — pointing to one paragraph (the colored bar + its text)
3. Segment — pointing to one individual segment within a paragraph
Use a font or overlay tool to add the labels clearly

8. Split segment popup

Type: GIF (animated) Size: ~700 × 500 px, standard width (media-placeholder-md) What to show:

Right-click a segment in the transcript — context menu appears
Click "Split segment" — popup opens showing full segment text
A marker (vertical line or draggable handle) is visible between words
Drag the marker left/right to a different word
Click confirm — popup closes, segment is now split into two

9. Off The Record paragraph

Type: Screenshot (PNG) Size: ~700 × 300 px, standard width (media-placeholder-md) What to show:

Two paragraphs side by side (or stacked) for contrast:
- Normal paragraph: solid colored handle, regular text
- OTR paragraph: hatched/diagonal-stripe handle, dimmed italic text, "Off The Record" badge visible
Both from the same speaker if possible so the color is the same and the handle difference is the only visual change

10. Muted text

Type: Screenshot (PNG) Size: ~700 × 200 px, standard width (media-placeholder-md) What to show:

A paragraph where a mid-sentence word range has been muted
Muted words displayed with strikethrough styling
Normal text before and after the muted range, in the same paragraph
Contrast should make the strikethrough clearly readable

quote_embedding.html

11. Live Quote dialog (full workflow)

Type: GIF (animated) Size: ~1200 × 700 px, full-width (media-placeholder-lg) What to show:

Text selected in the transcript, right-click menu open with "Generate Live Quote" option
Dialog opens — config panel on left, live preview on right already showing the widget
Uncheck one segment checkbox — ellipsis (…) appears in the preview text in real time
Toggle the "Waveform" option off then on — preview updates
Toggle "Speaker attribution" on — name appears below the quote in the preview
Click "Create Embed Code" — panel switches to show the iframe snippet

Slow enough to follow each step (~0.8s pause between interactions)

12. Rendered Live Quote embed widget

Type: Screenshot (PNG) Size: ~660 × 280 px (actual embed dimensions) What to show:

The Live Quote widget as it appears embedded on a webpage
Quote text with opening/closing quotation marks
Speaker attribution below the quote text (em dash + name)
Waveform strip above the playback controls, with the played portion highlighted in gold
Play/pause button, progress bar, timecode display
Use a neutral/white webpage background to simulate real embed context

presentation.html

13. Presentation view

Type: Screenshot (PNG) Size: ~1200 × 800 px (4:3), full-width (media-placeholder-lg) What to show:

Full presentation page as a viewer sees it
Sticky audio player at the top: waveform with region lane, playback controls, volume, speed
Scrollable transcript below: speaker blocks with colored labels, multiple paragraphs
One segment highlighted (active state during playback)
SourceQuote header with project title and Copy link button visible
Use a real project with enough content that the transcript fills most of the viewport

projects.html

14. Share dialog

Type: Screenshot (PNG) Size: ~600 × 500 px (portrait modal), standard width (media-placeholder-md) What to show:

The Share dialog open for a project
User search field at the top (can be empty or with a partial search term)
At least 2 collaborators already listed, each with a role dropdown (one set to Editor, one to Viewer)
Anyone-with-link toggle clearly visible (can be either on or off)
Email notification checkbox if visible
The owner row at the top of the collaborator list

Asset delivery notes

Format: PNG for screenshots, GIF for animations. Optionally provide WebP/APNG for GIFs if the target environment supports it.
Theme: Dark theme preferred (matches default app experience); light theme acceptable for contrast-heavy shots.
Scale: Export at 2× for retina — the media-placeholder sizes above are CSS display sizes.
File naming: Use the slug from each section heading, e.g. workspace-overview.png, live-quote-dialog.gif.
Placement: Drop files into static/media/docs/ and replace each <figure class="media-placeholder ..."> with an <img> or <picture> element pointing to the asset.