diff --git a/backend/app/render/compile.py b/backend/app/render/compile.py
index 49c712d..be8e5a8 100644
--- a/backend/app/render/compile.py
+++ b/backend/app/render/compile.py
@@ -80,6 +80,9 @@ class Unit:
     chapter: Optional[str] = None
     # The end credits: a card drawn from these lines rather than from `card`.
     credits: Optional[List[str]] = None
+    # Seconds a clip with its sound runs past its out point, under a blend out of it
+    # (`layout`). Footage after the out point where the file has it, else a held frame.
+    tail: float = 0.0
 
 
 def _transition_in(spec: VideoSpec, segment: Segment) -> Transition:
@@ -281,7 +284,13 @@ def layout(units: Sequence[Unit], durations: Sequence[float], warnings: List[str
     project's transition, as every quote has in Notes. A blend overlaps its two units
     by its duration, held to half the shorter one so neither is ever entirely under a
     blend; too short to see, and it becomes a cut.
+
+    A clip playing its own sound is lengthened by the blend out of it rather than
+    overlapped: the stitch ends the outgoing shot's audio where the blend starts, so
+    otherwise the last words before its out point would be cut. Its `tail` says by how
+    much, for the renderer to extract that much more.
     """
+    durations = list(durations)
     joins: List[Optional[Join]] = [None]
     for index in range(1, len(units)):
         unit = units[index]
@@ -304,6 +313,13 @@ def layout(units: Sequence[Unit], durations: Sequence[float], warnings: List[str
             if join and join.is_blend:
                 join.style, join.overlap = "fade", 0.0
 
+    for index, join in enumerate(joins):
+        before = units[index - 1] if index else None
+        if join is not None and join.is_blend and before is not None \
+                and before.kind == "video_sound":
+            before.tail = join.overlap
+            durations[index - 1] += join.overlap
+
     starts: List[float] = []
     cursor = 0.0
     for index, duration in enumerate(durations):
diff --git a/backend/app/render/ffmpeg.py b/backend/app/render/ffmpeg.py
index b984323..f03b228 100644
--- a/backend/app/render/ffmpeg.py
+++ b/backend/app/render/ffmpeg.py
@@ -492,7 +492,7 @@ def build_shot_command(
     - `in_transition` / `out_transition`: the join at each end, which in GVC differ
       per scene (a scene's `transition_in` is its incoming join and the previous
       scene's outgoing one). Unset, both are `options.transition`.
-    - `loop` False on a muted video holds its last frame instead of repeating it.
+    - `loop` False on a video holds its last frame instead of repeating it.
     - `path`: a Ken Burns move between two frames of the picture (S1), in place of
       the preset drift.
     """
@@ -565,8 +565,10 @@ def build_shot_command(
         chains = [fit_chain(video_in, "fit", width, height, options.fit)]
         stage = "fit"
 
-    if kind == "video_muted" and not loop:
-        # Shorter than its scene and not to be repeated: hold the last frame.
+    if kind in ("video_muted", "video_sound") and not loop:
+        # Shorter than its scene and not to be repeated: hold the last frame. A clip
+        # with its sound reaches here when a blend out of it asks for more than the
+        # file has left after its out point (`compile.layout`'s tail).
         chains.append(f"[{stage}]tpad=stop_mode=clone:stop_duration={duration:.3f}[hold]")
         stage = "hold"
 
diff --git a/backend/app/render/renderer.py b/backend/app/render/renderer.py
index 923bcd8..3a8a71f 100644
--- a/backend/app/render/renderer.py
+++ b/backend/app/render/renderer.py
@@ -311,6 +311,8 @@ def render(
                 start, length = unit.trim
                 if length is None:
                     length = max(0.1, (unit.media.duration or 0.0) - start)
+                # Past the file's end `-t` yields less, and the shot holds its last frame.
+                length += unit.tail
                 clip = f"clip_{index:04d}.mp4"
                 F.run(F.build_extract_command(background, clip, start=start, length=length,
                                               with_audio=unit.kind == "video_sound"),
@@ -405,7 +407,8 @@ def argv(with_options: RenderOptions, with_path=path) -> List[str]:
                   cwd=work_dir, timeout=F.shot_timeout(sum(timeline.durations)))
         except F.FFmpegError as exc:
             # The blends cost a re-encode; if that fails, the shots still join by cuts,
-            # and the timeline is re-laid without their overlaps to match.
+            # and the timeline is re-laid without their overlaps to match. A clip's
+            # tail stays, as a moment more of it before the cut.
             logger.warning("Blended stitch failed (%s); joining with cuts", exc)
             warnings.append("Blends were joined as cuts: blending the shots together failed.")
             for join in timeline.joins:
diff --git a/backend/tests/test_render_compile.py b/backend/tests/test_render_compile.py
index 3f71ffd..731ad87 100644
--- a/backend/tests/test_render_compile.py
+++ b/backend/tests/test_render_compile.py
@@ -139,6 +139,40 @@ def test_a_blend_never_covers_more_than_half_a_short_unit():
     assert timeline.total == 20.5
 
 
+def _clip_then(style):
+    spec = spec_of({
+        "assets": {"v": {"from": "gam", "id": "g1", "type": "video"}},
+        "segments": [
+            {"id": "a", "kind": "clip", "visual": {"asset": "v", "audio": "play",
+                                                    "trim": {"in": 10, "out": 16}}},
+            {"id": "b", "kind": "scene", "transition_in": {"style": style, "duration": 0.6}},
+            {"id": "c", "kind": "scene", "transition_in": {"style": "dissolve",
+                                                          "duration": 0.6}},
+        ]})
+    return plan_units(spec, {"v": VIDEO}, [])
+
+
+def test_a_blend_out_of_a_clip_lengthens_it_rather_than_cutting_its_last_words():
+    units = _clip_then("dissolve")
+    durations = [6.0, 10.0, 10.0]
+    timeline = layout(units, durations, [])
+    assert units[0].tail == pytest.approx(0.6)
+    assert timeline.durations[0] == pytest.approx(6.6)
+    # The blend starts once the clip has reached its out point.
+    assert timeline.starts[1] == pytest.approx(6.0)
+    # A muted scene into a blend is overlapped as before.
+    assert units[1].tail == 0.0 and timeline.durations[1] == 10.0
+    assert timeline.starts[2] == pytest.approx(15.4)
+    assert durations == [6.0, 10.0, 10.0]
+
+
+def test_a_cut_out_of_a_clip_adds_nothing():
+    units = _clip_then("none")
+    timeline = layout(units, [6.0, 10.0, 10.0], [])
+    assert units[0].tail == 0.0
+    assert timeline.durations[0] == 6.0 and timeline.starts[1] == 6.0
+
+
 def _placed():
     spec, media = salt_road()
     units = plan_units(spec, media, [])
diff --git a/backend/tests/test_render_ffmpeg.py b/backend/tests/test_render_ffmpeg.py
index 4db74c9..bdafb13 100644
--- a/backend/tests/test_render_ffmpeg.py
+++ b/backend/tests/test_render_ffmpeg.py
@@ -119,6 +119,15 @@ def test_sounded_clip_uses_its_own_audio():
     assert "[0:a]" in _graph(argv)
 
 
+def test_a_sounded_clip_holds_its_last_frame_rather_than_running_short():
+    """A blend's tail can ask for more than the file has after the out point."""
+    argv = F.build_shot_command(kind="video_sound", background="c.mp4", audio=None, duration=2,
+                                output="s.mp4", options=RenderOptions(), preview=False,
+                                background_has_audio=True, loop=False)
+    assert "tpad=stop_mode=clone" in _graph(argv)
+    assert "-stream_loop" not in argv
+
+
 def test_sounded_clip_without_an_audio_track_gets_silence():
     """The concat demuxer needs every part to carry an audio stream."""
     argv = F.build_shot_command(kind="video_sound", background="c.mp4", audio=None, duration=2,
diff --git a/frontend/src/api/projects.ts b/frontend/src/api/projects.ts
index 40a4104..56119f8 100644
--- a/frontend/src/api/projects.ts
+++ b/frontend/src/api/projects.ts
@@ -154,6 +154,8 @@ export interface Segment {
   narration?: { beats: Beat[]; [key: string]: unknown }
   transition_in?: { style?: string; duration?: number }
   overlays?: Overlay[]
+  /** Seconds: `fixed` sets the scene's length, `min` floors one that follows narration. */
+  duration?: { min?: number; fixed?: number }
   [key: string]: unknown
 }
 
diff --git a/frontend/src/components/ClipPlayer.test.tsx b/frontend/src/components/ClipPlayer.test.tsx
new file mode 100644
index 0000000..dd201b9
--- /dev/null
+++ b/frontend/src/components/ClipPlayer.test.tsx
@@ -0,0 +1,84 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import type { GamAsset } from '@/api/gam'
+import type { VideoSpec } from '@/api/projects'
+import ClipPlayer from '@/components/ClipPlayer'
+
+const reel: GamAsset = {
+  id: 'g1',
+  name: 'Interview',
+  asset_type: 'video',
+  duration_seconds: 60,
+  width: null,
+  height: null,
+  file_url: 'https://gam.test/f',
+  thumb_url: null,
+  credit: '',
+  parent_asset_id: null,
+  in_point: null,
+  out_point: null,
+  missing: false,
+}
+
+const spec: VideoSpec = {
+  title: 'T',
+  assets: { v: { from: 'gam', id: 'g1' } },
+  segments: [
+    {
+      id: 's1',
+      kind: 'scene',
+      visual: { asset: 'v', trim: { in: 10, out: 16 } },
+      narration: { beats: [{ id: 'b1', text: 'Hello' }] },
+    },
+  ],
+}
+
+function player(onChange = vi.fn()) {
+  render(
+    <ClipPlayer
+      spec={spec}
+      index={0}
+      segment={spec.segments[0]}
+      asset={reel}
+      onChange={onChange}
+      onClose={vi.fn()}
+    />
+  )
+  return onChange
+}
+
+describe('ClipPlayer', () => {
+  it('shows the trimmed window and its length', () => {
+    player()
+    expect(screen.getByLabelText('in point')).toHaveTextContent('0:10.0')
+    expect(screen.getByLabelText('out point')).toHaveTextContent('0:16.0')
+    expect(screen.getByText(/6 s of footage/)).toBeInTheDocument()
+  })
+
+  it('nudges the out point', async () => {
+    const onChange = player()
+    await userEvent.click(screen.getByRole('button', { name: 'out +0.1 s' }))
+    expect(onChange.mock.calls[0][0].segments[0].visual.trim).toEqual({
+      in: 10,
+      out: 16.1,
+    })
+  })
+
+  it('plays the whole clip again', async () => {
+    const onChange = player()
+    await userEvent.click(screen.getByRole('button', { name: 'Whole clip' }))
+    expect(onChange.mock.calls[0][0].segments[0].visual.trim).toBeUndefined()
+  })
+
+  it('fixes the scene to the footage’s length', async () => {
+    const onChange = player()
+    await userEvent.click(screen.getByRole('button', { name: 'Match footage' }))
+    expect(onChange.mock.calls[0][0].segments[0].duration).toEqual({ fixed: 6 })
+  })
+
+  it('says the footage is cut short when the narration is shorter', () => {
+    player()
+    expect(screen.getByRole('status')).toHaveTextContent('so its last 3.5 s aren’t shown')
+  })
+})
diff --git a/frontend/src/components/ClipPlayer.tsx b/frontend/src/components/ClipPlayer.tsx
new file mode 100644
index 0000000..f49110e
--- /dev/null
+++ b/frontend/src/components/ClipPlayer.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useRef, useState } from 'react'
+import { Play, X } from 'lucide-react'
+import type { GamAsset } from '@/api/gam'
+import type { Segment, Trim, VideoSpec } from '@/api/projects'
+import {
+  assetLength,
+  footageSeconds,
+  nudge,
+  playWindow,
+  setLength,
+  setLoop,
+  setTrim,
+  timingNote,
+  trimAt,
+} from '@/spec/clip'
+import { clock } from '@/spec/footage'
+
+interface Props {
+  spec: VideoSpec
+  index: number
+  segment: Segment
+  asset: GamAsset
+  onChange: (next: VideoSpec) => void
+  onClose: () => void
+}
+
+/** Clock time with tenths: a trim is set to the tenth, so it is shown to the tenth. */
+function fine(seconds: number): string {
+  const tenths = Math.round(seconds * 10)
+  return `${clock(Math.floor(tenths / 10))}.${tenths % 10}`
+}
+
+const STEPS = [-1, -0.1, 0.1, 1]
+
+/**
+ * A scene's footage, played as the video will play it, and its timing set while
+ * watching: in and out points, how long the scene runs, and what short footage does.
+ *
+ * The player stops at the out point itself rather than through a `#t=` fragment,
+ * which browsers stop honouring once you seek. Muted unless the scene plays the
+ * footage's own sound, so what you hear is what the video will have.
+ */
+export default function ClipPlayer({
+  spec,
+  index,
+  segment,
+  asset,
+  onChange,
+  onClose,
+}: Props) {
+  const video = useRef<HTMLVideoElement>(null)
+  const [now, setNow] = useState(0)
+  const visual = segment.visual
+  const trim = visual?.trim
+  const length = assetLength(asset)
+  const span = playWindow(asset, trim)
+  const offset = span.start - (trim?.in ?? 0)
+  const footage = footageSeconds(asset, trim)
+  const fixed = segment.duration?.fixed
+  const note = timingNote(spec, index, asset)
+  const isVideo = asset.asset_type === 'video'
+
+  // Jump to the new in point whenever it moves, so a nudge is seen at once.
+  useEffect(() => {
+    if (video.current) video.current.currentTime = span.start
+  }, [span.start])
+
+  if (!visual) return null
+
+  function play() {
+    const el = video.current
+    if (!el) return
+    el.currentTime = span.start
+    void el.play()?.catch(() => {})
+  }
+
+  function onTime() {
+    const el = video.current
+    if (!el) return
+    setNow(Math.max(0, el.currentTime - offset))
+    if (span.end !== null && el.currentTime >= span.end) el.pause()
+  }
+
+  const change = (next: Trim | undefined) => onChange(setTrim(spec, index, next))
+
+  const edge = (which: 'in' | 'out') => (
+    <div className="flex flex-wrap items-center gap-1">
+      <span className="w-8">{which === 'in' ? 'In' : 'Out'}</span>
+      <span className="w-16 font-mono" aria-label={`${which} point`}>
+        {which === 'in'
+          ? fine(trim?.in ?? 0)
+          : trim?.out !== undefined
+            ? fine(trim.out)
+            : length !== null
+              ? fine(length)
+              : 'end'}
+      </span>
+      {STEPS.map((step) => (
+        <button
+          key={step}
+          type="button"
+          className="btn btn-ghost px-1.5 py-0.5 text-xs"
+          aria-label={`${which} ${step > 0 ? '+' : ''}${step} s`}
+          onClick={() => change(nudge(trim, which, step, length))}
+        >
+          {step > 0 ? '+' : ''}
+          {step}
+        </button>
+      ))}
+      <button
+        type="button"
+        className="btn btn-secondary px-2 py-0.5 text-xs"
+        onClick={() => change(trimAt(trim, which, now, length))}
+      >
+        Set {which} here
+      </button>
+    </div>
+  )
+
+  return (
+    <div
+      className="space-y-2 rounded border border-gray-200 p-2 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-300"
+      aria-label="Footage player"
+    >
+      <div className="flex items-center gap-2">
+        <span className="min-w-0 flex-1 truncate font-medium text-gray-900 dark:text-gray-100">
+          {asset.name}
+        </span>
+        <button
+          type="button"
+          className="btn btn-ghost p-1"
+          aria-label="Close player"
+          onClick={onClose}
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+      {isVideo ? (
+        <video
+          ref={video}
+          src={asset.file_url ?? undefined}
+          controls
+          playsInline
+          preload="metadata"
+          muted={visual.audio !== 'play'}
+          onLoadedMetadata={(e) => {
+            e.currentTarget.currentTime = span.start
+          }}
+          onTimeUpdate={onTime}
+          className="max-h-72 w-full rounded bg-black"
+        />
+      ) : (
+        <img
+          src={asset.file_url ?? asset.thumb_url ?? undefined}
+          alt=""
+          className="max-h-72 w-full rounded object-contain"
+        />
+      )}
+      {isVideo && (
+        <>
+          <div className="flex flex-wrap items-center gap-2">
+            <button
+              type="button"
+              className="btn btn-primary px-2 py-1 text-xs"
+              onClick={play}
+            >
+              <Play className="mr-1 inline h-3 w-3" />
+              Play segment
+            </button>
+            <span className="font-mono">at {fine(now)}</span>
+            {footage !== null && (
+              <span>· {Math.round(footage * 10) / 10} s of footage</span>
+            )}
+            {trim && (
+              <button
+                type="button"
+                className="btn btn-ghost px-2 py-0.5 text-xs"
+                onClick={() => change(undefined)}
+              >
+                Whole clip
+              </button>
+            )}
+          </div>
+          {edge('in')}
+          {edge('out')}
+        </>
+      )}
+      {segment.kind === 'scene' && (
+        <div className="flex flex-wrap items-center gap-2">
+          <label className="flex items-center gap-1">
+            Scene length
+            <select
+              className="input w-auto py-0.5"
+              aria-label="Scene length"
+              value={fixed !== undefined ? 'fixed' : 'narration'}
+              onChange={(e) =>
+                onChange(
+                  setLength(
+                    spec,
+                    index,
+                    e.target.value === 'fixed' ? (footage ?? 5) : undefined
+                  )
+                )
+              }
+            >
+              <option value="narration">Follow narration</option>
+              <option value="fixed">Fixed</option>
+            </select>
+          </label>
+          {fixed !== undefined && (
+            <input
+              type="number"
+              min="0.1"
+              step="0.1"
+              aria-label="Scene length in seconds"
+              className="input w-20 py-0.5"
+              value={fixed}
+              onChange={(e) => {
+                const n = Number(e.target.value)
+                if (n > 0) onChange(setLength(spec, index, n))
+              }}
+            />
+          )}
+          {isVideo && footage !== null && fixed !== footage && (
+            <button
+              type="button"
+              className="btn btn-ghost px-2 py-0.5 text-xs"
+              onClick={() => onChange(setLength(spec, index, footage))}
+            >
+              Match footage
+            </button>
+          )}
+          {isVideo && (
+            <label className="flex items-center gap-1">
+              When shorter
+              <select
+                className="input w-auto py-0.5"
+                aria-label="When the footage is shorter"
+                value={visual.loop === false ? 'hold' : 'loop'}
+                onChange={(e) =>
+                  onChange(setLoop(spec, index, e.target.value === 'loop'))
+                }
+              >
+                <option value="loop">Loop</option>
+                <option value="hold">Hold last frame</option>
+              </select>
+            </label>
+          )}
+        </div>
+      )}
+      {note && (
+        <p role="status" className="text-amber-700 dark:text-amber-400">
+          {note}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/SceneList.tsx b/frontend/src/components/SceneList.tsx
index 9a9640c..ac51c36 100644
--- a/frontend/src/components/SceneList.tsx
+++ b/frontend/src/components/SceneList.tsx
@@ -1,8 +1,11 @@
+import { useState } from 'react'
 import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react'
 import type { GamAsset } from '@/api/gam'
 import type { Segment, VideoSpec } from '@/api/projects'
+import ClipPlayer from '@/components/ClipPlayer'
 import SceneSettings from '@/components/SceneSettings'
 import VisualStrip from '@/components/VisualStrip'
+import { footageOf } from '@/spec/clip'
 import { removeVisual } from '@/spec/footage'
 import {
   addScene,
@@ -35,8 +38,8 @@ const KIND_LABEL: Record<Segment['kind'], string> = {
  *
  * The seed of M3's storyboard: today it edits labels, card titles, narration and each
  * scene's picture or footage (found in GAM), and adds, moves and removes scenes.
- * Everything else a segment carries (transition, Ken Burns move) is kept untouched and
- * edited in the JSON tab until the per-scene panel exists.
+ * Clicking a scene's footage opens it in a player, where its trim and length are set
+ * while watching.
  */
 export default function SceneList({
   spec,
@@ -46,124 +49,141 @@ export default function SceneList({
   onGenerate,
 }: Props) {
   const segments = spec.segments
+  // One player at a time, by segment id so it follows its scene through a reorder.
+  const [playing, setPlaying] = useState<string | null>(null)
   const setFocus = useAssistantStore((s) => s.setFocus)
   const edit = (index: number, change: (s: Segment) => Segment) =>
     onChange(updateSegment(spec, index, change))
 
   return (
     <div className="space-y-3">
-      {segments.map((segment, index) => (
-        <section
-          key={segment.id}
-          id={`scene-${segment.id}`}
-          aria-label={segment.label || segment.id}
-          className="card space-y-2 p-3"
-          // The scene being worked on is what "this scene" means to the assistant.
-          onFocusCapture={() => setFocus(segment.id)}
-        >
-          <div className="flex items-center gap-2">
-            <span className="w-6 text-right text-xs text-gray-400">{index + 1}</span>
-            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-              {KIND_LABEL[segment.kind]}
-            </span>
-            <input
-              className="input flex-1"
-              aria-label="Label"
-              value={segment.label ?? ''}
-              placeholder={segment.id}
-              onChange={(e) => edit(index, (s) => ({ ...s, label: e.target.value }))}
-            />
-            <button
-              type="button"
-              className="btn btn-ghost p-2"
-              aria-label="Move up"
-              disabled={index === 0}
-              onClick={() => onChange(moveSegment(spec, index, -1))}
-            >
-              <ArrowUp className="h-4 w-4" />
-            </button>
-            <button
-              type="button"
-              className="btn btn-ghost p-2"
-              aria-label="Move down"
-              disabled={index === segments.length - 1}
-              onClick={() => onChange(moveSegment(spec, index, 1))}
-            >
-              <ArrowDown className="h-4 w-4" />
-            </button>
-            <button
-              type="button"
-              className="btn btn-ghost p-2"
-              aria-label="Remove"
-              onClick={() => onChange(removeSegment(spec, index))}
-            >
-              <Trash2 className="h-4 w-4" />
-            </button>
-          </div>
+      {segments.map((segment, index) => {
+        const footage = footageOf(spec, segment, gamAssets)
+        return (
+          <section
+            key={segment.id}
+            id={`scene-${segment.id}`}
+            aria-label={segment.label || segment.id}
+            className="card space-y-2 p-3"
+            // The scene being worked on is what "this scene" means to the assistant.
+            onFocusCapture={() => setFocus(segment.id)}
+          >
+            <div className="flex items-center gap-2">
+              <span className="w-6 text-right text-xs text-gray-400">{index + 1}</span>
+              <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                {KIND_LABEL[segment.kind]}
+              </span>
+              <input
+                className="input flex-1"
+                aria-label="Label"
+                value={segment.label ?? ''}
+                placeholder={segment.id}
+                onChange={(e) => edit(index, (s) => ({ ...s, label: e.target.value }))}
+              />
+              <button
+                type="button"
+                className="btn btn-ghost p-2"
+                aria-label="Move up"
+                disabled={index === 0}
+                onClick={() => onChange(moveSegment(spec, index, -1))}
+              >
+                <ArrowUp className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                className="btn btn-ghost p-2"
+                aria-label="Move down"
+                disabled={index === segments.length - 1}
+                onClick={() => onChange(moveSegment(spec, index, 1))}
+              >
+                <ArrowDown className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                className="btn btn-ghost p-2"
+                aria-label="Remove"
+                onClick={() => onChange(removeSegment(spec, index))}
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
 
-          {segment.kind === 'card' && segment.card && (
-            <input
-              className="input w-full"
-              aria-label="Card title"
-              value={segment.card.title}
-              onChange={(e) =>
-                edit(index, (s) => ({
-                  ...s,
-                  card: { ...s.card!, title: e.target.value },
-                }))
-              }
-            />
-          )}
+            {segment.kind === 'card' && segment.card && (
+              <input
+                className="input w-full"
+                aria-label="Card title"
+                value={segment.card.title}
+                onChange={(e) =>
+                  edit(index, (s) => ({
+                    ...s,
+                    card: { ...s.card!, title: e.target.value },
+                  }))
+                }
+              />
+            )}
 
-          {segment.kind !== 'card' && onFindFootage && (
-            <VisualStrip
-              spec={spec}
-              segment={segment}
-              gamAssets={gamAssets}
-              onFind={() => onFindFootage(index)}
-              onRemove={() => onChange(removeVisual(spec, index))}
-              onGenerate={onGenerate}
-            />
-          )}
+            {segment.kind !== 'card' && onFindFootage && (
+              <VisualStrip
+                spec={spec}
+                segment={segment}
+                gamAssets={gamAssets}
+                onFind={() => onFindFootage(index)}
+                onRemove={() => onChange(removeVisual(spec, index))}
+                onOpen={footage ? () => setPlaying(segment.id) : undefined}
+                onGenerate={onGenerate}
+              />
+            )}
 
-          {onFindFootage && (
-            <SceneSettings
-              spec={spec}
-              index={index}
-              segment={segment}
-              gamAssets={gamAssets}
-              onChange={onChange}
-            />
-          )}
+            {playing === segment.id && footage && (
+              <ClipPlayer
+                spec={spec}
+                index={index}
+                segment={segment}
+                asset={footage}
+                onChange={onChange}
+                onClose={() => setPlaying(null)}
+              />
+            )}
 
-          {segment.kind === 'scene' && (
-            <textarea
-              className="input min-h-[5rem] w-full"
-              aria-label="Narration"
-              placeholder="What is said over this scene. A blank line starts a new beat."
-              value={narrationText(segment)}
-              onChange={(e) => edit(index, (s) => withNarrationText(s, e.target.value))}
-            />
-          )}
+            {onFindFootage && (
+              <SceneSettings
+                spec={spec}
+                index={index}
+                segment={segment}
+                gamAssets={gamAssets}
+                onChange={onChange}
+              />
+            )}
 
-          {segment.kind === 'clip' && (
-            <p className="text-xs text-gray-500">
-              Plays its own sound; nothing is narrated over it.
-            </p>
-          )}
+            {segment.kind === 'scene' && (
+              <textarea
+                className="input min-h-[5rem] w-full"
+                aria-label="Narration"
+                placeholder="What is said over this scene. A blank line starts a new beat."
+                value={narrationText(segment)}
+                onChange={(e) => edit(index, (s) => withNarrationText(s, e.target.value))}
+              />
+            )}
 
-          <div className="flex justify-end">
-            <button
-              type="button"
-              className="btn btn-ghost text-xs"
-              onClick={() => onChange(addScene(spec, index))}
-            >
-              <Plus className="mr-1 inline h-3 w-3" />
-              Scene after this
-            </button>
-          </div>
-        </section>
-      ))}
+            {segment.kind === 'clip' && (
+              <p className="text-xs text-gray-500">
+                Plays its own sound; nothing is narrated over it.
+              </p>
+            )}
+
+            <div className="flex justify-end">
+              <button
+                type="button"
+                className="btn btn-ghost text-xs"
+                onClick={() => onChange(addScene(spec, index))}
+              >
+                <Plus className="mr-1 inline h-3 w-3" />
+                Scene after this
+              </button>
+            </div>
+          </section>
+        )
+      })}
 
       <button
         type="button"
diff --git a/frontend/src/components/VisualStrip.test.tsx b/frontend/src/components/VisualStrip.test.tsx
index 0127111..fec1dbc 100644
--- a/frontend/src/components/VisualStrip.test.tsx
+++ b/frontend/src/components/VisualStrip.test.tsx
@@ -47,6 +47,22 @@ function strip(segment: Segment) {
 }
 
 describe('VisualStrip', () => {
+  it('opens the footage in the player from its thumbnail', async () => {
+    const onOpen = vi.fn()
+    render(
+      <VisualStrip
+        spec={spec}
+        segment={{ id: 's', kind: 'scene', visual: { asset: 'a_reel' } }}
+        gamAssets={{ g1: reel }}
+        onFind={vi.fn()}
+        onRemove={vi.fn()}
+        onOpen={onOpen}
+      />
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Play footage' }))
+    expect(onOpen).toHaveBeenCalled()
+  })
+
   it('shows the footage with its thumbnail and trim', () => {
     strip({
       id: 's',
diff --git a/frontend/src/components/VisualStrip.tsx b/frontend/src/components/VisualStrip.tsx
index 93efef3..7780c23 100644
--- a/frontend/src/components/VisualStrip.tsx
+++ b/frontend/src/components/VisualStrip.tsx
@@ -1,4 +1,4 @@
-import { Film, ImageOff, Search, Sparkles, Square, X } from 'lucide-react'
+import { Film, ImageOff, Play, Search, Sparkles, Square, X } from 'lucide-react'
 import type { GamAsset } from '@/api/gam'
 import { RUNNING, type Generation } from '@/api/generations'
 import type { Segment, VideoSpec } from '@/api/projects'
@@ -12,6 +12,8 @@ interface Props {
   gamAssets: Record<string, GamAsset | null>
   onFind: () => void
   onRemove: () => void
+  /** Open the scene's footage in the player; absent, the thumbnail is just a picture. */
+  onOpen?: () => void
   /** Open the Generate dialog for a placeholder; absent, nothing offers to. */
   onGenerate?: (key: string) => void
 }
@@ -76,6 +78,7 @@ export default function VisualStrip({
   gamAssets,
   onFind,
   onRemove,
+  onOpen,
   onGenerate,
 }: Props) {
   const rows = useGenerationStore((s) => s.rows)
@@ -108,7 +111,19 @@ export default function VisualStrip({
       className="flex items-center gap-3 rounded bg-gray-50 p-2 dark:bg-gray-800"
       aria-label="Picture"
     >
-      {shown.thumb ? (
+      {shown.thumb && onOpen ? (
+        <button
+          type="button"
+          aria-label="Play footage"
+          className="group relative h-12 w-20 shrink-0 overflow-hidden rounded"
+          onClick={onOpen}
+        >
+          <img src={shown.thumb} alt="" className="h-full w-full object-cover" />
+          <span className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-70 group-hover:opacity-100">
+            <Play className="h-4 w-4 text-white" />
+          </span>
+        </button>
+      ) : shown.thumb ? (
         <img src={shown.thumb} alt="" className="h-12 w-20 rounded object-cover" />
       ) : (
         <span className="flex h-12 w-20 items-center justify-center rounded bg-gray-200 dark:bg-gray-700">
diff --git a/frontend/src/spec/clip.test.ts b/frontend/src/spec/clip.test.ts
new file mode 100644
index 0000000..324e4db
--- /dev/null
+++ b/frontend/src/spec/clip.test.ts
@@ -0,0 +1,151 @@
+import { describe, expect, it } from 'vitest'
+import type { GamAsset } from '@/api/gam'
+import type { VideoSpec } from '@/api/projects'
+import {
+  footageOf,
+  nudge,
+  playWindow,
+  setLength,
+  setLoop,
+  setTrim,
+  timingNote,
+  trimAt,
+} from '@/spec/clip'
+
+const reel: GamAsset = {
+  id: 'g1',
+  name: 'Interview',
+  asset_type: 'video',
+  duration_seconds: 60,
+  width: null,
+  height: null,
+  file_url: 'https://gam.test/f',
+  thumb_url: null,
+  credit: '',
+  parent_asset_id: null,
+  in_point: null,
+  out_point: null,
+  missing: false,
+}
+
+const clipOfParent: GamAsset = {
+  ...reel,
+  id: 'g2',
+  parent_asset_id: 'g1',
+  in_point: 20,
+  out_point: 30,
+}
+
+function spec(visual: object, extra: object = {}): VideoSpec {
+  return {
+    title: 'T',
+    assets: { v: { from: 'gam', id: 'g1' } },
+    segments: [
+      {
+        id: 's1',
+        kind: 'scene',
+        visual: { asset: 'v', ...visual },
+        narration: { beats: [{ id: 'b1', text: 'x'.repeat(150) }] },
+        ...extra,
+      },
+      { id: 's2', kind: 'scene' },
+    ],
+  }
+}
+
+describe('trims', () => {
+  it('nudges one end and keeps it inside the asset', () => {
+    expect(nudge({ in: 2, out: 8 }, 'in', -1, 60)).toEqual({ in: 1, out: 8 })
+    expect(nudge({ in: 0.5, out: 8 }, 'in', -1, 60)).toEqual({ in: 0, out: 8 })
+    expect(nudge({ in: 2, out: 59.5 }, 'out', 1, 60)).toEqual({ in: 2, out: 60 })
+  })
+
+  it('never lets the two ends cross', () => {
+    expect(nudge({ in: 2, out: 2.5 }, 'in', 1, 60)).toEqual({ in: 2.4, out: 2.5 })
+    expect(trimAt({ in: 5, out: 8 }, 'out', 3, 60)).toEqual({ in: 5, out: 5.1 })
+  })
+
+  it('starts an untrimmed clip from the whole asset', () => {
+    expect(nudge(undefined, 'out', -1, 60)).toEqual({ in: 0, out: 59 })
+  })
+
+  it('removes the trim to play the whole clip', () => {
+    const next = setTrim(spec({ trim: { in: 1, out: 4 } }), 0, undefined)
+    expect(next.segments[0].visual).toEqual({ asset: 'v' })
+  })
+
+  it('plays a GAM clip from its place in its parent’s file', () => {
+    expect(playWindow(clipOfParent, { in: 1, out: 4 })).toEqual({ start: 21, end: 24 })
+    expect(playWindow(clipOfParent)).toEqual({ start: 20, end: 30 })
+    expect(playWindow(reel, { in: 5 })).toEqual({ start: 5, end: 60 })
+  })
+})
+
+describe('scene length and looping', () => {
+  it('writes and removes a fixed length, dropping an empty duration', () => {
+    const fixed = setLength(spec({}), 0, 6.04)
+    expect(fixed.segments[0].duration).toEqual({ fixed: 6 })
+    expect('duration' in setLength(fixed, 0, undefined).segments[0]).toBe(false)
+    const floored = setLength(spec({}, { duration: { min: 3 } }), 0, undefined)
+    expect(floored.segments[0].duration).toEqual({ min: 3 })
+  })
+
+  it('sets whether short footage loops', () => {
+    expect(setLoop(spec({}), 0, false).segments[0].visual?.loop).toBe(false)
+  })
+})
+
+describe('timingNote', () => {
+  it('says when footage is shorter than its narration and loops or holds', () => {
+    // 150 characters at 15 a second, plus the scene's end pause: about 10.6 s.
+    expect(timingNote(spec({ trim: { in: 0, out: 4 } }), 0, reel)).toBe(
+      'Footage is 4 s; the scene runs about 10.6 s, so it loops.'
+    )
+    expect(timingNote(spec({ trim: { in: 0, out: 4 }, loop: false }), 0, reel)).toBe(
+      'Footage is 4 s; the scene runs about 10.6 s, so it holds its last frame for 6.6 s.'
+    )
+  })
+
+  it('says when footage runs longer than a fixed scene', () => {
+    const fixed = spec({ trim: { in: 0, out: 12 } }, { duration: { fixed: 8 } })
+    expect(timingNote(fixed, 0, reel)).toBe(
+      'Footage is 12 s; the scene runs 8 s, so its last 4 s aren’t shown.'
+    )
+  })
+
+  it('says nothing when they match', () => {
+    const fixed = spec({ trim: { in: 0, out: 8 } }, { duration: { fixed: 8 } })
+    expect(timingNote(fixed, 0, reel)).toBeNull()
+  })
+
+  it('names a blend out of a clip', () => {
+    const s: VideoSpec = {
+      ...spec({}),
+      segments: [
+        { id: 'c', kind: 'clip', visual: { asset: 'v', audio: 'play' } },
+        { id: 'n', kind: 'scene', transition_in: { style: 'dissolve' } },
+      ],
+    }
+    expect(timingNote(s, 0, reel)).toBe(
+      'The dissolve into the next scene plays up to 0.6 s past the out point.'
+    )
+  })
+})
+
+describe('footageOf', () => {
+  it('finds a generated clip’s asset and ignores a missing file', () => {
+    const s: VideoSpec = {
+      ...spec({}),
+      assets: {
+        v: {
+          from: 'generate',
+          type: 'video',
+          prompt: 'p',
+          result: { from: 'gam', id: 'g1' },
+        },
+      },
+    } as VideoSpec
+    expect(footageOf(s, s.segments[0], { g1: reel })?.id).toBe('g1')
+    expect(footageOf(s, s.segments[0], { g1: { ...reel, missing: true } })).toBeNull()
+  })
+})
diff --git a/frontend/src/spec/clip.ts b/frontend/src/spec/clip.ts
new file mode 100644
index 0000000..8352af7
--- /dev/null
+++ b/frontend/src/spec/clip.ts
@@ -0,0 +1,221 @@
+import type { GamAsset } from '@/api/gam'
+import type { Segment, Trim, VideoSpec } from '@/api/projects'
+import { updateSegment } from '@/spec/edits'
+
+/**
+ * A scene's footage, timed by hand: its in and out points, how long the scene runs,
+ * and whether short footage loops or holds. Pure functions from one spec to the next,
+ * as in `edits.ts`.
+ */
+
+/** The shortest stretch a trim may leave; anything less is not a shot. */
+export const MIN_TRIM_SECONDS = 0.1
+
+// The render's reading-rate guess (`render/estimate.py`) and the spec's defaults. The
+// real length is only known once the narration has been spoken, so the editor says
+// "about".
+const CHARS_PER_SECOND = 15
+const PARAGRAPH_PAUSE_MS = 350
+const SEGMENT_END_PAUSE_MS = 600
+const MIN_SEGMENT_SECONDS = 2.5
+
+// Joins that overlap two shots; a cut and a dip through a colour do not.
+const NOT_BLENDS = ['none', 'fade', 'fadewhite']
+
+const tenth = (n: number) => Math.round(n * 10) / 10
+
+/** A GAM clip is a stretch of its parent's file, which is what `file_url` serves. */
+function isClip(asset: GamAsset): boolean {
+  return !!asset.parent_asset_id && asset.in_point !== null
+}
+
+/** The GAM asset a scene's visual is, once its ref names one; null while it doesn't. */
+export function footageOf(
+  spec: VideoSpec,
+  segment: Segment,
+  gamAssets: Record<string, GamAsset | null>
+): GamAsset | null {
+  const ref = segment.visual ? spec.assets?.[segment.visual.asset] : undefined
+  const id =
+    ref?.from === 'gam'
+      ? ref.id
+      : ref?.from === 'search' || ref?.from === 'generate'
+        ? ref.result?.id
+        : undefined
+  const asset = id ? gamAssets[id] : null
+  return asset && !asset.missing && asset.file_url ? asset : null
+}
+
+/** How long the asset is, in seconds, when GAM says. */
+export function assetLength(asset: GamAsset): number | null {
+  if (isClip(asset) && asset.out_point !== null)
+    return asset.out_point - (asset.in_point ?? 0)
+  return asset.duration_seconds
+}
+
+/** How long the trimmed footage plays for, when that is known. */
+export function footageSeconds(asset: GamAsset, trim?: Trim): number | null {
+  if (trim?.out !== undefined) return trim.out - trim.in
+  const length = assetLength(asset)
+  return length === null ? null : Math.max(0, length - (trim?.in ?? 0))
+}
+
+/** Where the trimmed footage sits in the file the player loads. */
+export function playWindow(
+  asset: GamAsset,
+  trim?: Trim
+): { start: number; end: number | null } {
+  const offset = isClip(asset) ? (asset.in_point ?? 0) : 0
+  const length = assetLength(asset)
+  const end = trim?.out !== undefined ? trim.out : length !== null ? length : null
+  return { start: offset + (trim?.in ?? 0), end: end === null ? null : offset + end }
+}
+
+/**
+ * A trim held inside the asset and at least `MIN_TRIM_SECONDS` long. `edge` is the end
+ * that moved: when the two would cross, the other end gives way only if it has to.
+ */
+export function clampTrim(
+  trim: Trim,
+  length: number | null,
+  edge: 'in' | 'out' = 'in'
+): Trim {
+  const top = length ?? Infinity
+  let a = Math.max(0, tenth(trim.in))
+  let b = trim.out === undefined ? undefined : Math.min(top, tenth(trim.out))
+  if (b !== undefined && b - a < MIN_TRIM_SECONDS) {
+    if (edge === 'in') a = Math.max(0, tenth(b - MIN_TRIM_SECONDS))
+    else b = Math.min(top, tenth(a + MIN_TRIM_SECONDS))
+    if (b - a < MIN_TRIM_SECONDS) a = Math.max(0, tenth(b - MIN_TRIM_SECONDS))
+  }
+  if (a >= top) a = Math.max(0, tenth(top - MIN_TRIM_SECONDS))
+  return b === undefined ? { in: a } : { in: a, out: b }
+}
+
+/** Move one end of a trim to `seconds` into the asset. */
+export function trimAt(
+  trim: Trim | undefined,
+  edge: 'in' | 'out',
+  seconds: number,
+  length: number | null
+): Trim {
+  const base: Trim = trim ?? { in: 0, ...(length !== null ? { out: length } : {}) }
+  const moved = edge === 'in' ? { ...base, in: seconds } : { ...base, out: seconds }
+  return clampTrim(moved, length, edge)
+}
+
+/** Move one end of a trim by `delta` seconds. An open end starts from the asset's end. */
+export function nudge(
+  trim: Trim | undefined,
+  edge: 'in' | 'out',
+  delta: number,
+  length: number | null
+): Trim {
+  const from = edge === 'in' ? (trim?.in ?? 0) : (trim?.out ?? length ?? trim?.in ?? 0)
+  return trimAt(trim, edge, from + delta, length)
+}
+
+/** Set a scene's trim; undefined plays the footage whole. */
+export function setTrim(
+  spec: VideoSpec,
+  index: number,
+  trim: Trim | undefined
+): VideoSpec {
+  return updateSegment(spec, index, (segment) => {
+    if (!segment.visual) return segment
+    const visual = { ...segment.visual, trim }
+    if (!trim) delete visual.trim
+    return { ...segment, visual }
+  })
+}
+
+/** Fix a scene's length in seconds; undefined lets it follow its narration again. */
+export function setLength(spec: VideoSpec, index: number, fixed: number | undefined) {
+  return updateSegment(spec, index, (segment) => {
+    const duration = {
+      ...segment.duration,
+      fixed: fixed === undefined ? fixed : tenth(fixed),
+    }
+    if (fixed === undefined) delete duration.fixed
+    const next: Segment = { ...segment, duration }
+    if (Object.keys(duration).length === 0) delete next.duration
+    return next
+  })
+}
+
+/** Whether footage shorter than its scene repeats (true) or holds its last frame. */
+export function setLoop(spec: VideoSpec, index: number, loop: boolean): VideoSpec {
+  return updateSegment(spec, index, (segment) =>
+    segment.visual ? { ...segment, visual: { ...segment.visual, loop } } : segment
+  )
+}
+
+/** Roughly how long a scene runs: its fixed length, else its narration or the floor. */
+export function sceneSeconds(spec: VideoSpec, segment: Segment): number {
+  if (segment.duration?.fixed) return segment.duration.fixed
+  const beats = (segment.narration?.beats ?? []).filter((b) => b.speak !== false)
+  const chars = beats.reduce((n, b) => n + b.text.length, 0)
+  const voice = spec.voice as { speed?: number } | undefined
+  const own = segment.narration?.voice as { speed?: number } | undefined
+  const speed = Math.max(0.5, own?.speed ?? voice?.speed ?? 1)
+  const pauses = (segment.narration?.beats ?? []).reduce(
+    (ms, b, i, all) =>
+      ms +
+      ((b.pause_after_ms as number | undefined) ??
+        (i === all.length - 1 ? SEGMENT_END_PAUSE_MS : PARAGRAPH_PAUSE_MS)),
+    0
+  )
+  const spoken = chars ? chars / CHARS_PER_SECOND / speed + pauses / 1000 : 0
+  const style = spec.style as { min_segment_seconds?: number } | undefined
+  const floor = segment.duration?.min ?? style?.min_segment_seconds ?? MIN_SEGMENT_SECONDS
+  return Math.max(floor, spoken)
+}
+
+function blendInto(
+  spec: VideoSpec,
+  index: number
+): { style: string; seconds: number } | null {
+  const next = spec.segments[index + 1]
+  if (!next) return null
+  const style = next.transition_in?.style ?? spec.style?.transition?.style ?? 'none'
+  if (NOT_BLENDS.includes(style)) return null
+  return {
+    style,
+    seconds: next.transition_in?.duration ?? spec.style?.transition?.duration ?? 0.6,
+  }
+}
+
+/**
+ * Why the footage and its scene won't line up, in one sentence, or null when they do.
+ *
+ * A muted scene runs for its narration, so footage of another length loops, holds or
+ * is cut short without saying so: this says so. A clip runs for its footage, and a
+ * blend out of it plays a moment past the out point rather than cutting its last
+ * words (`compile.layout`).
+ */
+export function timingNote(
+  spec: VideoSpec,
+  index: number,
+  asset: GamAsset
+): string | null {
+  const segment = spec.segments[index]
+  if (!segment?.visual || asset.asset_type !== 'video') return null
+  const footage = footageSeconds(asset, segment.visual.trim)
+  if (segment.kind === 'clip') {
+    const blend = blendInto(spec, index)
+    return blend
+      ? `The ${blend.style} into the next scene plays up to ${blend.seconds} s past the out point.`
+      : null
+  }
+  if (segment.kind !== 'scene' || footage === null) return null
+  const scene = sceneSeconds(spec, segment)
+  const about = segment.duration?.fixed ? '' : 'about '
+  const gap = tenth(scene - footage)
+  const said = `Footage is ${tenth(footage)} s; the scene runs ${about}${tenth(scene)} s`
+  if (gap > 0.3)
+    return segment.visual.loop === false
+      ? `${said}, so it holds its last frame for ${gap} s.`
+      : `${said}, so it loops.`
+  if (gap < -0.3) return `${said}, so its last ${-gap} s aren’t shown.`
+  return null
+}