diff --git a/apps/lab/app/components/lab/LabLayerProps.vue b/apps/lab/app/components/lab/LabLayerProps.vue
index cc3e4f251..b6ed68fc7 100644
--- a/apps/lab/app/components/lab/LabLayerProps.vue
+++ b/apps/lab/app/components/lab/LabLayerProps.vue
@@ -7,7 +7,7 @@
  * camera is expressed as a zoom rather than a distance.
  */
 
-import { FONT_CATALOGUE } from '~/utils/lab/layers'
+import { FONT_CATALOGUE, MAX_LAYER_SPEED, MIN_LAYER_SPEED, canChangeLayerSpeed, layerDurationForSourceEnd, layerSpeed, withLayerSpeed } from '~/utils/lab/layers'
 import type { Layer } from '~/utils/lab/layers'
 import { ENTRIES } from '~/utils/lab/registry'
 
@@ -37,10 +37,15 @@ const emit = defineEmits<{
  */
 const fitLength = computed(() => {
   if (!props.sequenceMs) return null
-  const length = Math.max(100, props.sequenceMs - (props.layer.trim ?? 0))
+  const length = layerDurationForSourceEnd(props.layer, props.sequenceMs)
   return Math.abs(length - props.layer.duration) < 50 ? null : length
 })
 
+function setSpeed(speed: number) {
+  const updated = withLayerSpeed(props.layer, speed)
+  emit('update', { duration: updated.duration, speed: updated.speed })
+}
+
 const KINDS = {
   component: { label: 'animation', icon: 'i-lucide-square-play' },
   video: { label: 'video', icon: 'i-lucide-film' },
@@ -457,6 +462,18 @@ const TEXT_TOGGLES = [
       :default="0"
       @update:model-value="emit('update', { start: $event })"
     />
+    <LabNumber
+      v-if="canChangeLayerSpeed(layer)"
+      :model-value="layerSpeed(layer)"
+      label="Speed"
+      hint="Playback rate. Faster playback shortens the clip without changing its source out-point."
+      :min="MIN_LAYER_SPEED"
+      :max="MAX_LAYER_SPEED"
+      :step="0.05"
+      unit="×"
+      :default="1"
+      @update:model-value="setSpeed"
+    />
     <LabNumber
       :model-value="layer.duration"
       label="Length"
diff --git a/apps/lab/app/components/lab/LabPanel.vue b/apps/lab/app/components/lab/LabPanel.vue
index dbad7a844..5ff42e8ab 100644
--- a/apps/lab/app/components/lab/LabPanel.vue
+++ b/apps/lab/app/components/lab/LabPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LabMenuAction } from './LabMenu.vue'
 import { DEFAULT_SETTINGS, FRAME_RATES, HINTS, OUTPUT_PRESETS, RANGES, SPEEDS, VIEWPORTS, frameCountFor, outputDuration } from '~/utils/lab/settings'
-import type { AsciiSet, LabSettings, RangedKey, StylizeMode } from '~/utils/lab/settings'
+import type { AsciiSet, LabSettings, RangedKey, ShotSettingKey, ShotSettings, StylizeMode } from '~/utils/lab/settings'
 import { ASCII_MIN_CELL } from '~/utils/lab/ascii'
 import type { LabMode } from '~/utils/lab/storage'
 import type { Layer } from '~/utils/lab/layers'
@@ -26,6 +26,9 @@ const props = defineProps<{
   layers: Layer[]
   selectedLayerId: string | null
   selectedLayer: Layer | null
+  /** Effective visual settings for the selected clip, or the timeline defaults. */
+  shotSettings: LabSettings
+  shotCustomized: boolean
   /** Length the selected clip's animation declares, when it declares one. */
   sequenceMs?: number
   canUndo: boolean
@@ -56,6 +59,8 @@ const emit = defineEmits<{
   resetEverything: []
   cancel: []
   updateLayer: [id: string, patch: Partial<Layer>]
+  updateShotSetting: [key: ShotSettingKey, value: ShotSettings[ShotSettingKey]]
+  resetShot: []
   removeLayer: []
   duplicateLayer: []
 }>()
@@ -64,6 +69,17 @@ const settings = defineModel<LabSettings>('settings', { required: true })
 const picking = defineModel<boolean>('picking', { required: true })
 const camera = defineModel<LayerEffect[]>('camera', { required: true })
 
+const shot = new Proxy({} as LabSettings, {
+  get(_target, key) {
+    return typeof key === 'symbol' ? undefined : props.shotSettings[key as keyof LabSettings]
+  },
+  set(_target, key, value) {
+    if (typeof key === 'symbol') return false
+    emit('updateShotSetting', key as ShotSettingKey, value as ShotSettings[ShotSettingKey])
+    return true
+  },
+})
+
 /**
  * Bind a control to the shared range table, plus the value it resets to.
  *
@@ -239,7 +255,7 @@ const segmentSeconds = computed(() => (settings.value.timelineLength / 1000).toF
  * a broken slider.
  */
 const hasDepth = computed(() =>
-  Math.abs(settings.value.pitch) > 0.5 || Math.abs(settings.value.yaw) > 0.5,
+  Math.abs(shot.pitch) > 0.5 || Math.abs(shot.yaw) > 0.5,
 )
 
 /**
@@ -247,11 +263,11 @@ const hasDepth = computed(() =>
  * it is zero. Said outright rather than by disabling them — a control that has
  * gone grey never explains what would bring it back.
  */
-const hasSpread = computed(() => settings.value.aberration > 0)
+const hasSpread = computed(() => shot.aberration > 0)
 
 /** Letters need more room than dots do — see `ASCII_MIN_CELL`. */
 const minCell = computed(() =>
-  settings.value.stylize === 'ascii' ? ASCII_MIN_CELL : RANGES.stylizeScale.min,
+  shot.stylize === 'ascii' ? ASCII_MIN_CELL : RANGES.stylizeScale.min,
 )
 
 /**
@@ -261,9 +277,9 @@ const minCell = computed(() =>
  * disagreeing; moving the value is the honest half of enforcing a minimum.
  */
 function setScreen(mode: StylizeMode) {
-  settings.value.stylize = mode
+  shot.stylize = mode
   if (mode === 'ascii') {
-    settings.value.stylizeScale = Math.max(ASCII_MIN_CELL, settings.value.stylizeScale)
+    shot.stylizeScale = Math.max(ASCII_MIN_CELL, shot.stylizeScale)
   }
 }
 
@@ -297,36 +313,13 @@ const CONTAINERS = [
 </script>
 
 <template>
-  <!--
-    A container, so the controls inside can answer the panel's width rather than
-    the window's. This panel is dragged between 240 and 560 pixels: a five-across
-    row of buttons that is comfortable at one end is unreadable at the other, and
-    a media query cannot tell the difference because the window never changed.
-  -->
-  <!-- No left border: the splitter beside it is the divider. -->
   <aside class="@container flex h-full shrink-0 flex-col bg-default">
     <header class="flex items-center justify-between gap-2 border-b border-default px-3 py-3 @min-[280px]:px-4">
-      <!--
-        The title holds one line and gives up characters before it gives up the
-        row. Wrapping "Render labs" onto two lines pushed the help button under
-        the actions and made a tidy header look broken.
-      -->
       <span class="min-w-0 truncate font-pixel text-[11px] uppercase tracking-[0.2em] text-default">
         Render labs
       </span>
 
       <div class="flex shrink-0 items-center gap-1">
-        <!--
-          Out of the menu and into the header. Behind the ellipsis, saving your
-          work was three characters wide and looked like a preference — the one
-          action in the app that decides whether anything survives the tab.
-        -->
-        <!--
-          Beside Projects, and not inside the menu with it. Starting something is
-          the first thing anyone does here and the last thing that should need
-          finding — it was one item down an ellipsis, which is where actions go
-          to be used once and forgotten.
-        -->
         <button
           type="button"
           data-cuelume-press
@@ -347,16 +340,6 @@ const CONTAINERS = [
         >
           <UIcon name="i-lucide-folder" class="size-3" />
         </button>
-        <!--
-          In the header rather than down the menu, for the same reason Projects
-          is: a control nobody can find is a control nobody has. It also has to
-          be visible to be honest — this is the one button whose whole job is to
-          change how everything else looks, and burying it made the panel seem
-          to have no opinion about light at all.
-
-          It shows the destination, not the state. A moon on a dark panel is a
-          badge saying where you already are; a sun says what clicking does.
-        -->
         <button
           type="button"
           data-cuelume-press
@@ -367,13 +350,6 @@ const CONTAINERS = [
         >
           <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="size-3" />
         </button>
-        <!--
-          In the header, beside the light switch, and not behind the ellipsis.
-          This tool is used while its user is recording a screen: a lab that
-          chirps under a take being narrated has to be silenceable without a
-          hunt, and the state has to be readable at a glance before recording
-          starts rather than discovered in the edit.
-        -->
         <button
           type="button"
           data-cuelume-press
@@ -384,10 +360,6 @@ const CONTAINERS = [
         >
           <UIcon :name="cuesEnabled ? 'i-lucide-volume-2' : 'i-lucide-volume-off'" class="size-3" />
         </button>
-        <!--
-          Sized to be found. At sixteen pixels this read as punctuation after the
-          title rather than as the way into the only documentation the tool has.
-        -->
         <button
           type="button"
           data-cuelume-press
@@ -402,23 +374,7 @@ const CONTAINERS = [
       </div>
     </header>
 
-    <!--
-      The strip exists only when there is a choice to make.
-      A permanent "Layer" tab that is disabled most of the time advertises a
-      place you are usually not allowed to go, which reads as something broken
-      rather than as something empty. With nothing selected there is exactly one
-      thing this panel can show, so it shows it and says nothing. The moment a
-      clip is selected a second destination exists — and it is named after the
-      clip, so the panel states what is being edited instead of leaving it to be
-      inferred from the fields.
-    -->
-
-    <!--
-    Above the tabs, not inside them. It is the list of what is in the picture,
-      and everything below it is a way of treating one of these — reaching a
-      layer used to mean finding it on a timeline or in a row of chips at the
-      other end of the window.
-    -->
+
     <LabSection title="Layers">
       <LabLayers
         :layers
@@ -481,11 +437,6 @@ const CONTAINERS = [
     </div>
 
     <div v-show="activeTab === 'shot' || !selectedLayer" class="min-h-0 flex-1 overflow-y-auto">
-      <!--
-        Named for what it is. "Stage" was a word from the renderer's vocabulary —
-        it meant nothing to anyone opening the panel, and the two pixel fields
-        under it asked for a number without saying what the number decided.
-      -->
       <LabSection title="Viewport">
         <p class="mb-2 font-mono text-[10px] leading-relaxed text-dimmed">
           The window your component is laid out in before it is filmed. Narrow it
@@ -522,11 +473,31 @@ const CONTAINERS = [
         </div>
       </LabSection>
 
+      <div v-if="mode === 'video'" class="mx-3 mt-3 border border-primary-500/30 bg-primary-500/5 px-2.5 py-2 @min-[280px]:mx-4">
+        <div class="flex items-center justify-between gap-2">
+          <span class="truncate font-pixel text-[10px] uppercase tracking-[0.14em] text-primary">
+            {{ selectedLayer ? `Clip shot · ${selectedLayer.name}` : 'Timeline shot' }}
+          </span>
+          <button
+            v-if="selectedLayer && shotCustomized"
+            type="button"
+            class="shrink-0 font-mono text-[9px] text-dimmed hover:text-primary"
+            @click="emit('resetShot')"
+          >
+            use timeline
+          </button>
+        </div>
+        <p class="mt-1 font-mono text-[9px] leading-relaxed text-dimmed">
+          <template v-if="selectedLayer">
+            Changes below belong to this clip. Controls you have not changed still follow the timeline shot.
+          </template>
+          <template v-else>
+            The default look for the timeline. Clips with their own shot keep their overrides.
+          </template>
+        </p>
+      </div>
+
       <LabSection title="Camera">
-        <!--
-          Framing lives with the framing controls. This sat in the stage section
-          next to "replay", where it read as one of three unrelated verbs.
-        -->
         <button
           type="button"
           data-cuelume-press
@@ -537,18 +508,14 @@ const CONTAINERS = [
           reset the framing
         </button>
 
-        <LabNumber v-model="settings.pitch" label="Pitch" v-bind="range('pitch')" />
-        <LabNumber v-model="settings.yaw" label="Yaw" v-bind="range('yaw')" />
-        <LabNumber v-model="settings.roll" label="Roll" v-bind="range('roll')" />
-        <LabNumber v-model="settings.zoom" label="Zoom" v-bind="range('zoom')" />
-        <LabNumber v-model="settings.fov" label="Field of view" v-bind="range('fov')" />
-        <LabNumber v-model="settings.panX" label="Pan X" v-bind="range('panX')" />
-        <LabNumber v-model="settings.panY" label="Pan Y" v-bind="range('panY')" />
-
-        <!--
-          Moves on the shot rather than on a layer: dolly travels, slide pans,
-          spin rolls, fade takes the frame to black.
-        -->
+        <LabNumber v-model="shot.pitch" label="Pitch" v-bind="range('pitch')" />
+        <LabNumber v-model="shot.yaw" label="Yaw" v-bind="range('yaw')" />
+        <LabNumber v-model="shot.roll" label="Roll" v-bind="range('roll')" />
+        <LabNumber v-model="shot.zoom" label="Zoom" v-bind="range('zoom')" />
+        <LabNumber v-model="shot.fov" label="Field of view" v-bind="range('fov')" />
+        <LabNumber v-model="shot.panX" label="Pan X" v-bind="range('panX')" />
+        <LabNumber v-model="shot.panY" label="Pan Y" v-bind="range('panY')" />
+
         <div class="mt-3 mb-1 font-pixel text-[10px] uppercase tracking-[0.18em] text-dimmed">
           Moves
         </div>
@@ -562,7 +529,7 @@ const CONTAINERS = [
       <LabSection title="Focus">
         <div class="flex items-center gap-1">
           <div class="min-w-0 flex-1">
-            <LabNumber v-model="settings.focus" label="Focal plane" v-bind="range('focus')" />
+            <LabNumber v-model="shot.focus" label="Focal plane" v-bind="range('focus')" />
           </div>
           <button
             type="button"
@@ -577,31 +544,21 @@ const CONTAINERS = [
             <UIcon name="i-lucide-crosshair" class="block size-3" />
           </button>
         </div>
-        <LabNumber v-model="settings.focusRange" label="Sharp band" v-bind="range('focusRange')" />
-        <LabNumber v-model="settings.aperture" label="Bokeh strength" v-bind="range('aperture')" />
-        <LabNumber v-model="settings.blurRadius" label="Max blur" v-bind="range('blurRadius')" />
-
-        <!--
-          The shape of the aperture, which is what separates a photographed
-          highlight from a blur. Only offered once there is blur to shape: at
-          aperture zero these two set the geometry of something with no radius.
-        -->
-        <template v-if="settings.aperture > 0">
-          <LabNumber v-model="settings.bokehBlades" label="Aperture blades" v-bind="range('bokehBlades')" />
-          <LabNumber v-model="settings.bokehCatEye" label="Cat's eye" v-bind="range('bokehCatEye')" />
-          <LabNumber v-model="settings.bokehSwirl" label="Swirl" v-bind="range('bokehSwirl')" />
-          <LabNumber v-model="settings.bokehSqueeze" label="Anamorphic bokeh" v-bind="range('bokehSqueeze')" />
+        <LabNumber v-model="shot.focusRange" label="Sharp band" v-bind="range('focusRange')" />
+        <LabNumber v-model="shot.aperture" label="Bokeh strength" v-bind="range('aperture')" />
+        <LabNumber v-model="shot.blurRadius" label="Max blur" v-bind="range('blurRadius')" />
+
+        <template v-if="shot.aperture > 0">
+          <LabNumber v-model="shot.bokehBlades" label="Aperture blades" v-bind="range('bokehBlades')" />
+          <LabNumber v-model="shot.bokehCatEye" label="Cat's eye" v-bind="range('bokehCatEye')" />
+          <LabNumber v-model="shot.bokehSwirl" label="Swirl" v-bind="range('bokehSwirl')" />
+          <LabNumber v-model="shot.bokehSqueeze" label="Anamorphic bokeh" v-bind="range('bokehSqueeze')" />
         </template>
 
-        <!--
-          The tilt sits with the focal plane rather than with the bokeh, because
-          it moves where the sharpness is rather than what the blur looks like.
-          Its direction only appears once there is a lean to point.
-        -->
-        <LabNumber v-model="settings.focusTilt" label="Plane tilt" v-bind="range('focusTilt')" />
+        <LabNumber v-model="shot.focusTilt" label="Plane tilt" v-bind="range('focusTilt')" />
         <LabNumber
-          v-if="Math.abs(settings.focusTilt) > 0.002"
-          v-model="settings.focusTiltAngle"
+          v-if="Math.abs(shot.focusTilt) > 0.002"
+          v-model="shot.focusTiltAngle"
           label="Tilt axis"
           v-bind="range('focusTiltAngle')"
         />
@@ -612,57 +569,36 @@ const CONTAINERS = [
         </p>
       </LabSection>
 
-      <!--
-        Named for what it is rather than for the pass that makes it. Everything
-        in here is what happens to light too bright for the sensor to hold, and
-        the four things under the glow are the four ways a lens spills it.
-      -->
       <LabSection title="Light">
-        <LabNumber v-model="settings.emission" label="Source brightness" v-bind="range('emission')" />
-        <LabNumber v-model="settings.bloomIntensity" label="Glow" v-bind="range('bloomIntensity')" />
-        <LabNumber v-model="settings.bloomThreshold" label="Threshold" v-bind="range('bloomThreshold')" />
-        <LabNumber v-model="settings.bloomRadius" label="Spread" v-bind="range('bloomRadius')" />
-        <!--
-          These three ride the same thresholded mip chain the glow does, so they
-          belong with it: dragging any of them with the glow at zero would appear
-          to do nothing, and there would be nothing on screen to say why.
-        -->
-        <LabNumber v-model="settings.bleed" label="Halation" v-bind="range('bleed')" />
-        <LabNumber v-model="settings.streaks" label="Anamorphic streak" v-bind="range('streaks')" />
-        <LabNumber v-model="settings.ghosts" label="Ghosts" v-bind="range('ghosts')" />
-        <LabNumber v-model="settings.diffusion" label="Diffusion" v-bind="range('diffusion')" />
-        <LabNumber v-model="settings.starIntensity" label="Star" v-bind="range('starIntensity')" />
-
-        <!--
-          The star's shape, only once there is one. Three numbers that decide
-          nothing are three ways to doubt the panel describes the frame.
-        -->
-        <template v-if="settings.starIntensity > 0">
-          <LabNumber v-model="settings.starPoints" label="Points" v-bind="range('starPoints')" />
-          <LabNumber v-model="settings.starLength" label="Reach" v-bind="range('starLength')" />
-          <LabNumber v-model="settings.starAngle" label="Star angle" v-bind="range('starAngle')" />
+        <LabNumber v-model="shot.emission" label="Source brightness" v-bind="range('emission')" />
+        <LabNumber v-model="shot.bloomIntensity" label="Glow" v-bind="range('bloomIntensity')" />
+        <LabNumber v-model="shot.bloomThreshold" label="Threshold" v-bind="range('bloomThreshold')" />
+        <LabNumber v-model="shot.bloomRadius" label="Spread" v-bind="range('bloomRadius')" />
+        <LabNumber v-model="shot.bleed" label="Halation" v-bind="range('bleed')" />
+        <LabNumber v-model="shot.streaks" label="Anamorphic streak" v-bind="range('streaks')" />
+        <LabNumber v-model="shot.ghosts" label="Ghosts" v-bind="range('ghosts')" />
+        <LabNumber v-model="shot.diffusion" label="Diffusion" v-bind="range('diffusion')" />
+        <LabNumber v-model="shot.starIntensity" label="Star" v-bind="range('starIntensity')" />
+
+        <template v-if="shot.starIntensity > 0">
+          <LabNumber v-model="shot.starPoints" label="Points" v-bind="range('starPoints')" />
+          <LabNumber v-model="shot.starLength" label="Reach" v-bind="range('starLength')" />
+          <LabNumber v-model="shot.starAngle" label="Star angle" v-bind="range('starAngle')" />
         </template>
 
-        <p v-if="settings.bloomIntensity <= 0" class="mt-2 font-mono text-[10px] leading-relaxed text-dimmed/70">
+        <p v-if="shot.bloomIntensity <= 0" class="mt-2 font-mono text-[10px] leading-relaxed text-dimmed/70">
           Everything below the glow is spilled light, so it needs some glow to
           spill. Raise it above zero.
         </p>
       </LabSection>
 
-      <!--
-        Its own section, because these are the four things glass does to a
-        picture and they compose: the bulge bends where every channel is read
-        from, and the split, the spectrum and the scatter decide how far apart
-        those reads land. Chromatic aberration sat alone under the grade, where
-        it read as a colour adjustment rather than as a lens.
-      -->
       <LabSection title="Lens">
-        <LabNumber v-model="settings.distortion" label="Bulge" v-bind="range('distortion')" />
-        <LabNumber v-model="settings.aberration" label="Colour spread" v-bind="range('aberration')" />
-        <LabNumber v-model="settings.dispersion" label="Dispersion" v-bind="range('dispersion')" />
-        <LabNumber v-model="settings.lensNoise" label="Scatter" v-bind="range('lensNoise')" />
-        <LabNumber v-model="settings.radialBlur" label="Zoom blur" v-bind="range('radialBlur')" />
-        <LabNumber v-model="settings.spinBlur" label="Spin blur" v-bind="range('spinBlur')" />
+        <LabNumber v-model="shot.distortion" label="Bulge" v-bind="range('distortion')" />
+        <LabNumber v-model="shot.aberration" label="Colour spread" v-bind="range('aberration')" />
+        <LabNumber v-model="shot.dispersion" label="Dispersion" v-bind="range('dispersion')" />
+        <LabNumber v-model="shot.lensNoise" label="Scatter" v-bind="range('lensNoise')" />
+        <LabNumber v-model="shot.radialBlur" label="Zoom blur" v-bind="range('radialBlur')" />
+        <LabNumber v-model="shot.spinBlur" label="Spin blur" v-bind="range('spinBlur')" />
 
         <p v-if="!hasSpread" class="mt-2 font-mono text-[10px] leading-relaxed text-dimmed/70">
           Dispersion and scatter both act on the colour spread, so they do
@@ -671,90 +607,75 @@ const CONTAINERS = [
       </LabSection>
 
       <LabSection title="Grade">
-        <LabNumber v-model="settings.exposure" label="Exposure" v-bind="range('exposure')" />
-        <LabNumber v-model="settings.contrast" label="Contrast" v-bind="range('contrast')" />
-        <LabNumber v-model="settings.saturation" label="Saturation" v-bind="range('saturation')" />
-        <LabNumber v-model="settings.attenuation" label="Distance falloff" v-bind="range('attenuation')" />
-        <LabNumber v-model="settings.vignette" label="Vignette" v-bind="range('vignette')" />
-        <LabNumber v-model="settings.grain" label="Grain" v-bind="range('grain')" />
-        <LabToggle v-model="settings.tonemap" label="Filmic tonemap" />
-
-        <!--
-          No alpha here, and on the two duotone stops below. All three are read
-          by `hexToLinearRgb`, which takes six digits — and the backdrop of a
-          frame is not a thing that can be see-through anyway.
-        -->
+        <LabNumber v-model="shot.exposure" label="Exposure" v-bind="range('exposure')" />
+        <LabNumber v-model="shot.contrast" label="Contrast" v-bind="range('contrast')" />
+        <LabNumber v-model="shot.saturation" label="Saturation" v-bind="range('saturation')" />
+        <LabNumber v-model="shot.attenuation" label="Distance falloff" v-bind="range('attenuation')" />
+        <LabNumber v-model="shot.vignette" label="Vignette" v-bind="range('vignette')" />
+        <LabNumber v-model="shot.grain" label="Grain" v-bind="range('grain')" />
+        <LabToggle v-model="shot.tonemap" label="Filmic tonemap" />
+
         <div class="mt-2">
-          <LabColour v-model="settings.background" label="Background" :alpha="false" />
+          <LabColour v-model="shot.background" label="Background" :alpha="false" />
         </div>
 
         <div class="mt-3 mb-1 font-pixel text-[10px] uppercase tracking-[0.18em] text-dimmed">
           Duotone
         </div>
-        <LabNumber v-model="settings.duotone" label="Amount" v-bind="range('duotone')" />
-        <!--
-          Only offered once there is something to colour. Two swatches above a
-          control set to zero are two decisions nobody has been asked to make.
-        -->
-        <div v-if="settings.duotone > 0" class="mt-2 flex flex-col gap-2">
-          <LabColour v-model="settings.duotoneShadow" label="Shadow" :alpha="false" />
-          <LabColour v-model="settings.duotoneHighlight" label="Highlight" :alpha="false" />
+        <LabNumber v-model="shot.duotone" label="Amount" v-bind="range('duotone')" />
+        <div v-if="shot.duotone > 0" class="mt-2 flex flex-col gap-2">
+          <LabColour v-model="shot.duotoneShadow" label="Shadow" :alpha="false" />
+          <LabColour v-model="shot.duotoneHighlight" label="Highlight" :alpha="false" />
         </div>
 
       </LabSection>
 
 
-      <!--
-        Last, because it is the last thing that happens to the picture — and
-        because it is the one control here that can throw the rest away. Every
-        screen reads one value per cell, so a shot graded for its highlights and
-        then reduced to five glyphs has spent that grade on nothing.
-      -->
       <LabSection title="Stylize">
         <LabChoice
           label="Screen"
           hint="Redraws the finished frame on a grid. One at a time — two screens fighting over the same cell is mush."
           :options="STYLIZE_OPTIONS"
-          :model-value="settings.stylize"
+          :model-value="shot.stylize"
           cards
           @update:model-value="setScreen(String($event) as StylizeMode)"
         />
 
-        <template v-if="settings.stylize !== 'none'">
+        <template v-if="shot.stylize !== 'none'">
           <LabNumber
-            v-model="settings.stylizeScale"
+            v-model="shot.stylizeScale"
             label="Cell size"
             v-bind="{ ...range('stylizeScale'), min: minCell }"
           />
           <LabNumber
-            v-if="settings.stylize === 'dither' || settings.stylize === 'posterize'"
-            v-model="settings.stylizeLevels"
+            v-if="shot.stylize === 'dither' || shot.stylize === 'posterize'"
+            v-model="shot.stylizeLevels"
             label="Levels"
             v-bind="range('stylizeLevels')"
           />
           <LabNumber
-            v-if="settings.stylize === 'halftone'"
-            v-model="settings.stylizeAngle"
+            v-if="shot.stylize === 'halftone'"
+            v-model="shot.stylizeAngle"
             label="Screen angle"
             v-bind="range('stylizeAngle')"
           />
-          <LabNumber v-model="settings.stylizeColour" label="Keep colour" v-bind="range('stylizeColour')" />
-          <LabNumber v-model="settings.stylizeMask" label="Confine to" v-bind="range('stylizeMask')" />
+          <LabNumber v-model="shot.stylizeColour" label="Keep colour" v-bind="range('stylizeColour')" />
+          <LabNumber v-model="shot.stylizeMask" label="Confine to" v-bind="range('stylizeMask')" />
 
           <p class="mt-1 font-mono text-[10px] leading-relaxed text-dimmed/70">
-            {{ settings.stylizeMask > 0.02
+            {{ shot.stylizeMask > 0.02
               ? 'Only the highlights are screened; the rest stays as photographed.'
-              : settings.stylizeMask < -0.02
+              : shot.stylizeMask < -0.02
                 ? 'Only the shadows are screened.'
                 : 'The whole frame is screened.' }}
           </p>
 
           <LabChoice
-            v-if="settings.stylize === 'ascii'"
+            v-if="shot.stylize === 'ascii'"
             label="Glyphs"
             :options="ASCII_OPTIONS"
-            :model-value="settings.asciiSet"
-            @update:model-value="settings.asciiSet = String($event) as AsciiSet"
+            :model-value="shot.asciiSet"
+            @update:model-value="shot.asciiSet = String($event) as AsciiSet"
           />
         </template>
       </LabSection>
@@ -768,12 +689,6 @@ const CONTAINERS = [
           @update:model-value="setOutput(String($event))"
         />
 
-        <!--
-          Everything about timing, and nothing else in this section. A shot is
-          one frame: it has no rate, no speed, no container and nothing to hold
-          after it ends, and four controls that decide nothing are four ways to
-          doubt that the panel is describing the thing on screen.
-        -->
         <template v-if="mode === 'video'">
           <LabChoice
             label="Frame rate"
@@ -801,12 +716,6 @@ const CONTAINERS = [
           <LabNumber v-model="settings.tail" label="Tail" v-bind="range('tail')" />
         </template>
 
-        <!--
-          The size is here rather than on a control: with the presets doing the
-          setting, this is the only place the pixels are stated, and a shot out of
-          an old link that matches no preset would otherwise never say its own
-          frame size out loud.
-        -->
         <p class="mt-2 font-mono text-[10px] leading-relaxed text-dimmed/70">
           <template v-if="mode === 'video'">
             {{ settings.outputWidth }}×{{ settings.outputHeight }} · {{ frameCount }} frames ·
@@ -822,13 +731,6 @@ const CONTAINERS = [
 
     <footer class="border-t border-default p-3 @min-[280px]:p-4">
       <div v-if="busy" class="mb-2">
-        <!--
-          scaleX rather than an animated width. A width transition is a layout
-          animation driven by the main thread — which spends the whole export
-          blocked in long synchronous captures, so the bar lurches and appears to
-          slip backwards. A transform is composited and set outright, so it only
-          ever moves forward, at exactly the rate progress does.
-        -->
         <div class="h-[3px] w-full overflow-hidden bg-elevated">
           <div
             class="h-full origin-left bg-primary-500"
@@ -849,10 +751,6 @@ const CONTAINERS = [
       </div>
 
       <div v-else class="flex gap-1">
-        <!--
-          A shot exports one frame, so copying it is the whole of what this row
-          does and it takes the width the take's export would have had.
-        -->
         <button
           v-if="mode === 'video'"
           type="button"
@@ -862,13 +760,6 @@ const CONTAINERS = [
         >
           export {{ settings.container }}
         </button>
-        <!--
-          Copying is the wide one because a still off this thing is nearly always
-          on its way into a post or a message, and a file on disk is a detour
-          through the finder to get there. Saving one is still a real errand
-          though, so it keeps a button rather than a menu item — an action behind
-          an ellipsis is an action nobody finds twice.
-        -->
         <button
           type="button"
           data-cuelume-press
diff --git a/apps/lab/app/components/lab/LabStage.vue b/apps/lab/app/components/lab/LabStage.vue
index c6ea25e19..010ab0593 100644
--- a/apps/lab/app/components/lab/LabStage.vue
+++ b/apps/lab/app/components/lab/LabStage.vue
@@ -8,11 +8,12 @@
  * mounting.
  */
 
-import { LAB_STAGE_LAYER } from '~/utils/lab/sequence'
+import { LAB_STAGE_LAYER, LAB_STAGE_SPEED } from '~/utils/lab/sequence'
 
-const props = defineProps<{ layerId: string }>()
+const props = defineProps<{ layerId: string, speed: number }>()
 
 provide(LAB_STAGE_LAYER, props.layerId)
+provide(LAB_STAGE_SPEED, () => props.speed)
 </script>
 
 <template>
diff --git a/apps/lab/app/components/lab/LabTimeline.vue b/apps/lab/app/components/lab/LabTimeline.vue
index fc37e652d..5ae78ebaa 100644
--- a/apps/lab/app/components/lab/LabTimeline.vue
+++ b/apps/lab/app/components/lab/LabTimeline.vue
@@ -18,7 +18,7 @@
  */
 
 import { effectRampMs } from '~/utils/lab/effects'
-import { canJoin, layerEnd } from '~/utils/lab/layers'
+import { canChangeLayerSpeed, canJoin, layerEnd, layerSpeed } from '~/utils/lab/layers'
 import type { Layer } from '~/utils/lab/layers'
 
 const props = defineProps<{
@@ -414,7 +414,9 @@ function applyDrag(event: PointerEvent) {
     const start = snap(raw - current.offset, layer.id)
     updated.start = Math.max(0, Math.min(start, content.value - layer.duration))
   } else if (current.grab === 'start') {
-    const start = Math.max(0, Math.min(snap(raw, layer.id), layerEnd(layer) - MIN_SEGMENT))
+    const earliest = layer.start - (layer.trim ?? 0) / layerSpeed(layer)
+    const start = Math.max(0, earliest, Math.min(snap(raw, layer.id), layerEnd(layer) - MIN_SEGMENT))
+    updated.trim = (layer.trim ?? 0) + (start - layer.start) * layerSpeed(layer)
     updated.duration = layerEnd(layer) - start
     updated.start = start
   } else {
@@ -815,6 +817,9 @@ const seconds = (ms: number) => `${(ms / 1000).toFixed(2)}s`
                   name="i-lucide-sparkles"
                   class="ml-auto size-2.5 shrink-0 opacity-60"
                 />
+                <span v-if="canChangeLayerSpeed(layer) && layerSpeed(layer) !== 1" class="shrink-0 tabular-nums opacity-60">
+                  {{ Number(layerSpeed(layer).toFixed(2)) }}×
+                </span>
                 <!-- Only once the clip is wide enough that a number reads as a
                      number rather than as noise crowding the name. -->
                 <span
diff --git a/apps/lab/app/composables/useTimedSequence.ts b/apps/lab/app/composables/useTimedSequence.ts
index d1a0238e8..5c3af9e25 100644
--- a/apps/lab/app/composables/useTimedSequence.ts
+++ b/apps/lab/app/composables/useTimedSequence.ts
@@ -11,7 +11,7 @@
 
 import { useTimedSequence as sequence } from '../../../docs/app/composables/useTimedSequence'
 import type { UseTimedSequenceOptions } from '../../../docs/app/composables/useTimedSequence'
-import { LAB_STAGE_LAYER, reportSequenceDuration } from '~/utils/lab/sequence'
+import { LAB_STAGE_LAYER, LAB_STAGE_SPEED, reportSequenceDuration, sequenceAtSpeed } from '~/utils/lab/sequence'
 
 export type { TimedEvent, UseTimedSequenceOptions } from '../../../docs/app/composables/useTimedSequence'
 
@@ -19,7 +19,9 @@ export function useTimedSequence(options: UseTimedSequenceOptions) {
   // Absent outside a stage — the same component can be mounted with no clip
   // behind it, and then there is nothing to report to.
   const layerId = inject(LAB_STAGE_LAYER, null)
+  const speed = inject(LAB_STAGE_SPEED, () => 1)()
+  const timing = sequenceAtSpeed(options.events, options.totalDuration, speed)
   if (layerId) reportSequenceDuration(layerId, options.totalDuration)
 
-  return sequence(options)
+  return sequence({ ...options, ...timing })
 }
diff --git a/apps/lab/app/pages/index.vue b/apps/lab/app/pages/index.vue
index eb1bee39c..62ac411d2 100644
--- a/apps/lab/app/pages/index.vue
+++ b/apps/lab/app/pages/index.vue
@@ -24,7 +24,8 @@ import { LabRenderer } from '~/utils/lab/renderer'
 import { canvasToBlob, download, encodeVideo, isEncodingSupported, takeName } from '~/utils/lab/record'
 import type { Container } from '~/utils/lab/record'
 import { DEFAULT_COMPONENT, resolveEntry } from '~/utils/lab/registry'
-import { DEFAULT_SETTINGS, PLATE_SCALE, frameCountFor, frameStep, outputDuration } from '~/utils/lab/settings'
+import { DEFAULT_SETTINGS, PLATE_SCALE, SHOT_SETTING_KEYS, frameCountFor, frameStep, outputDuration } from '~/utils/lab/settings'
+import type { LabSettings, ShotSettingKey, ShotSettings } from '~/utils/lab/settings'
 import { useSequenceDurations } from '~/utils/lab/sequence'
 import { MAX_SHARE_URL, createDocument, resolveInitialDocument, saveStored, shareUrl } from '~/utils/lab/storage'
 import type { LabDocument, LabMode } from '~/utils/lab/storage'
@@ -39,9 +40,10 @@ import {
   layerDepth,
   layerAtRest,
   layerStateAt,
-  layerTextureKey, layerEnd, layerOrigin, canJoin
+  layerTextureKey, layerDurationForSourceEnd, layerEnd, layerOrigin, layerSourceTimeAt, layerSpeed, canJoin
 } from '~/utils/lab/layers'
 import type { Layer } from '~/utils/lab/layers'
+import { hasLayerShot, resolveLayerShotSettings, resolveTimelineShot, withoutLayerShotSetting } from '~/utils/lab/shot'
 import { evaluateEffects } from '~/utils/lab/effects'
 import { getVideo, rasterizeLayer, seekVideo } from '~/utils/lab/layer-textures'
 import type { LayerPlane, OverlayQuad } from '~/utils/lab/renderer'
@@ -134,9 +136,7 @@ const gizmo = ref(false)
  * which is not what anyone clicking an axis is asking for.
  */
 function snapCamera(pitch: number, yaw: number) {
-  settings.value.pitch = pitch
-  settings.value.yaw = yaw
-  settings.value.roll = 0
+  editorShotSettings.value = { ...editorShotSettings.value, pitch, yaw, roll: 0 }
   cue('toggle')
 }
 /** Pointer over the frame, 0..1, for the crosshair readout. */
@@ -273,18 +273,26 @@ const previewSize = computed(() => {
  * and a fade takes the whole frame down to black through exposure. Same ramps,
  * same curves, same editor.
  */
+const resolvedShot = computed(() => resolveTimelineShot(
+  settings.value,
+  camera.value,
+  mode.value === 'video' ? layers.value : [],
+  playhead.value,
+))
+
 const shotSettings = computed(() => {
-  if (!camera.value.length) return settings.value
-  const move = evaluateEffects(camera.value, playhead.value, settings.value.timelineLength)
+  const shot = resolvedShot.value
+  if (!shot.camera.length) return shot.settings
+  const move = evaluateEffects(shot.camera, shot.cameraTime, shot.cameraDuration)
   return {
-    ...settings.value,
+    ...shot.settings,
     // Depth reads as distance: still displaced means still pulled back, so the
     // move resolves into the framing rather than out of it.
-    zoom: Math.max(0.05, (settings.value.zoom * move.scale) / (1 + move.depth)),
-    panX: settings.value.panX + move.offsetX,
-    panY: settings.value.panY + move.offsetY,
-    roll: settings.value.roll + move.rotation,
-    exposure: settings.value.exposure * move.opacity,
+    zoom: Math.max(0.05, (shot.settings.zoom * move.scale) / (1 + move.depth)),
+    panX: shot.settings.panX + move.offsetX,
+    panY: shot.settings.panY + move.offsetY,
+    roll: shot.settings.roll + move.rotation,
+    exposure: shot.settings.exposure * move.opacity,
   }
 })
 
@@ -459,7 +467,9 @@ const stageOrigin = computed(() => Math.min(0, ...componentLayers.value.map(laye
  * un-run. So the whole take is replayed from the earliest origin whenever any of
  * them moves, which is the same path a backward scrub already takes.
  */
-const originSignature = computed(() => componentLayers.value.map(layerOrigin).join(','))
+const originSignature = computed(() => componentLayers.value
+  .map(layer => `${layerOrigin(layer)}@${layerSpeed(layer)}`)
+  .join(','))
 let replayedSignature: string | null = null
 
 /**
@@ -868,6 +878,69 @@ function togglePlay() {
 }
 
 const selectedLayer = computed(() => layers.value.find(layer => layer.id === selectedId.value) ?? null)
+const selectedShotLayer = computed(() => mode.value === 'video' ? selectedLayer.value : null)
+
+const editorShotSettings = computed<LabSettings>({
+  get: () => resolveLayerShotSettings(settings.value, selectedShotLayer.value),
+  set: next => updateShotSettings(next),
+})
+
+const editorCamera = computed({
+  get: () => selectedShotLayer.value?.shot?.camera ?? camera.value,
+  set: (moves) => {
+    const layer = selectedShotLayer.value
+    if (!layer) {
+      camera.value = moves
+      return
+    }
+    updateLayer(layer.id, { shot: { ...layer.shot, camera: moves } })
+    previewSelectedShot(layer)
+  },
+})
+
+const selectedShotCustomized = computed(() => Boolean(selectedShotLayer.value && hasLayerShot(selectedShotLayer.value)))
+
+function updateShotSetting(key: ShotSettingKey, value: ShotSettings[ShotSettingKey]) {
+  const layer = selectedShotLayer.value
+  if (!layer) {
+    Object.assign(settings.value, { [key]: value })
+    return
+  }
+
+  updateLayer(layer.id, {
+    shot: {
+      ...layer.shot,
+      settings: { ...layer.shot?.settings, [key]: value },
+    },
+  })
+  previewSelectedShot(layer)
+}
+
+function updateShotSettings(next: LabSettings) {
+  const current = editorShotSettings.value
+  const changed = SHOT_SETTING_KEYS.filter(key => next[key] !== current[key])
+  if (!changed.length) return
+
+  const layer = selectedShotLayer.value
+  if (!layer) {
+    for (const key of changed) Object.assign(settings.value, { [key]: next[key] })
+    return
+  }
+
+  const overrides: Partial<ShotSettings> = { ...layer.shot?.settings }
+  for (const key of changed) Object.assign(overrides, { [key]: next[key] })
+  updateLayer(layer.id, { shot: { ...layer.shot, settings: overrides } })
+  previewSelectedShot(layer)
+}
+
+function previewSelectedShot(layer: Layer) {
+  if (playhead.value < layer.start || playhead.value > layerEnd(layer)) void seekTo(layer.start)
+}
+
+function resetSelectedShot() {
+  const layer = selectedShotLayer.value
+  if (layer) updateLayer(layer.id, { shot: undefined })
+}
 
 /** Layers are placed against the stage, so their geometry needs its size. */
 const stageBox = computed(() => ({ width: settings.value.stageWidth, height: settings.value.stageHeight }))
@@ -1017,7 +1090,7 @@ const layerPlanes = computed<LayerPlane[]>(() => {
         halfHeight: halfWidth / aspect,
         rotation: layer.rotation + state.rotation,
         opacity: state.opacity,
-        emission: settings.value.emission,
+        emission: shotSettings.value.emission,
       },
     ]
   })
@@ -1137,7 +1210,7 @@ async function syncVideoFrames(time: number, exact: boolean) {
 
     const video = await getVideo(layer.src)
     if (!video?.videoWidth || !renderer) continue
-    await seekVideo(video, (time - layer.start + (layer.trim ?? 0)) / 1000, exact)
+    await seekVideo(video, layerSourceTimeAt(layer, time) / 1000, exact)
     renderer.setLayerTexture(layer.id, video)
   }
 }
@@ -1184,7 +1257,7 @@ function splitLayer(id: string) {
     // timeline. Without this the second piece plays its media from the top, so
     // dragging it back to zero replays what the first piece already showed
     // instead of carrying on from the frame the blade landed on.
-    trim: (layer.trim ?? 0) + (at - layer.start),
+    trim: (layer.trim ?? 0) + (at - layer.start) * layerSpeed(layer),
     effects: layer.effects.filter(e => e.at === 'out'),
   }
   layers.value = layers.value.flatMap(entry => (entry.id === id ? [head, tail] : [entry]))
@@ -1299,19 +1372,27 @@ function focusFromPointer(clientX: number, clientY: number, box: DOMRect): numbe
 function onFocusHover(event: PointerEvent) {
   if (!picking.value) return
   const focus = focusFromPointer(event.clientX, event.clientY, (event.currentTarget as HTMLElement).getBoundingClientRect())
-  if (focus !== null) settings.value.focus = Number(focus.toFixed(3))
+  if (focus !== null) updateShotSetting('focus', Number(focus.toFixed(3)))
 }
 
 /** What focus was before the reticle was armed, so leaving without a click undoes it. */
 let focusBeforePicking = 0
+let focusOverrideBeforePicking: number | undefined
 
 watch(picking, (armed) => {
-  if (armed) focusBeforePicking = settings.value.focus
+  if (!armed) return
+  focusBeforePicking = editorShotSettings.value.focus
+  focusOverrideBeforePicking = selectedShotLayer.value?.shot?.settings?.focus
 })
 
 function cancelPicking() {
   if (!picking.value) return
-  settings.value.focus = focusBeforePicking
+  const layer = selectedShotLayer.value
+  if (layer && focusOverrideBeforePicking === undefined) {
+    updateLayer(layer.id, { shot: withoutLayerShotSetting(layer, 'focus') })
+  } else {
+    updateShotSetting('focus', focusBeforePicking)
+  }
   picking.value = false
 }
 
@@ -1327,8 +1408,8 @@ function onFrameClick(event: MouseEvent) {
 
   // The hover has already set it; the click is what makes it stick.
   const focus = focusFromPointer(event.clientX, event.clientY, (event.currentTarget as HTMLElement).getBoundingClientRect())
-  if (focus !== null) settings.value.focus = Number(focus.toFixed(3))
-  focusBeforePicking = settings.value.focus
+  if (focus !== null) updateShotSetting('focus', Number(focus.toFixed(3)))
+  focusBeforePicking = editorShotSettings.value.focus
   picking.value = false
 }
 
@@ -1361,7 +1442,16 @@ function isLive(layer: Layer): boolean {
 
 /** Back to a square-on, edge-to-edge framing without touching the grade. */
 function resetCamera() {
-  Object.assign(settings.value, { pitch: 0, yaw: 0, roll: 0, zoom: 1, focus: 0.5, panX: 0, panY: 0 })
+  editorShotSettings.value = {
+    ...editorShotSettings.value,
+    pitch: 0,
+    yaw: 0,
+    roll: 0,
+    zoom: 1,
+    focus: 0.5,
+    panX: 0,
+    panY: 0,
+  }
 }
 
 /**
@@ -1398,14 +1488,13 @@ function addComponent() {
 /**
  * Cut a clip to the length its animation declares.
  *
- * Reported in component milliseconds, which is what the timeline is measured in,
- * so it transfers across as-is. A trimmed clip gets what is left after the trim
- * rather than the whole cycle.
+ * Reported in source milliseconds. A trimmed or retimed clip gets the timeline
+ * span left before that source reaches its end.
  */
 function fitToSequence(id: string, reportedMs: number) {
   const layer = layers.value.find(candidate => candidate.id === id)
   if (!layer) return
-  const duration = Math.max(100, reportedMs - (layer.trim ?? 0))
+  const duration = layerDurationForSourceEnd(layer, reportedMs)
   if (Math.abs(layer.duration - duration) < 50) return
   layers.value = layers.value.map(candidate =>
     candidate.id === id ? { ...candidate, duration } : candidate,
@@ -1921,7 +2010,7 @@ const panel = useResizable({ key: 'panel-width', initial: 290, min: 240, max: 56
 const dock = useResizable({ key: 'timeline-height', initial: 232, min: 140, max: 520, axis: 'y' })
 
 const gestures = useCameraGestures(
-  settings,
+  editorShotSettings,
   // Never while a layer is being dragged: one pointer, and whichever gesture
   // claimed it keeps it. Orbiting the camera under a layer being placed would
   // move the thing and the frame it is being placed against at once.
@@ -2368,9 +2457,9 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
             class="absolute right-2 top-2"
           >
             <LabGizmo
-              :pitch="settings.pitch"
-              :yaw="settings.yaw"
-              :roll="settings.roll"
+              :pitch="editorShotSettings.pitch"
+              :yaw="editorShotSettings.yaw"
+              :roll="editorShotSettings.roll"
               @snap="snapCamera"
             />
           </div>
@@ -2544,7 +2633,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
       v-show="panelVisible"
       v-model:settings="settings"
       v-model:picking="picking"
-      v-model:camera="camera"
+      v-model:camera="editorCamera"
       :style="{ width: `${panel.size.value}px` }"
       :mode
       :cues-enabled
@@ -2556,6 +2645,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
       :high-precision
       :capture-ms
       :selected-layer
+      :shot-settings="editorShotSettings"
+      :shot-customized="selectedShotCustomized"
       :sequence-ms="selectedSequenceMs"
       :can-undo
       :can-redo
@@ -2563,6 +2654,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
       @undo="undo"
       @redo="redo"
       @update-layer="updateLayer"
+      @update-shot-setting="updateShotSetting"
+      @reset-shot="resetSelectedShot"
       @remove-layer="removeSelected"
       @duplicate-layer="duplicateSelected"
       @fit="resetCamera"
@@ -2637,6 +2730,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
       v-for="staged in stagedComponents"
       :key="staged.layer.id"
       :data-stage="staged.layer.id"
+      :data-stage-speed="layerSpeed(staged.layer)"
       class="absolute left-0 top-0 overflow-hidden bg-default"
       :style="{
         width: `${settings.stageWidth}px`,
@@ -2644,11 +2738,11 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
         zIndex: isLive(staged.layer) ? 1 : 0,
       }"
     >
-      <LabStage :layer-id="staged.layer.id">
+      <LabStage :layer-id="staged.layer.id" :speed="layerSpeed(staged.layer)">
         <component
           :is="staged.component"
           v-if="staged.component && playhead >= layerOrigin(staged.layer)"
-          :key="`${stageKey}:${layerOrigin(staged.layer)}`"
+          :key="`${stageKey}:${layerOrigin(staged.layer)}:${layerSpeed(staged.layer)}`"
         />
       </LabStage>
     </div>
diff --git a/apps/lab/app/utils/lab/clock.ts b/apps/lab/app/utils/lab/clock.ts
index 07b2a9f22..1e7736fea 100644
--- a/apps/lab/app/utils/lab/clock.ts
+++ b/apps/lab/app/utils/lab/clock.ts
@@ -152,8 +152,7 @@ export function createClock(): Clock {
    * The stage subtree is marked in the DOM; anything running outside it is the
    * lab's own interface and keeps its real timeline.
    */
-  function isStaged(animation: Animation): boolean {
-    const target = (animation.effect as KeyframeEffect | null)?.target
+  function isStaged(target: unknown): target is Element {
     return target instanceof Element && !!target.closest('[data-lab-stage]')
   }
 
@@ -163,7 +162,8 @@ export function createClock(): Clock {
       // own transitions too, and pausing those froze the interface at whatever
       // opacity it happened to be mid-fade — a panel that had just opened stayed
       // invisible while still taking clicks.
-      if (!isStaged(animation)) continue
+      const target = (animation.effect as KeyframeEffect | null)?.target
+      if (!isStaged(target)) continue
       if (!captured.has(animation)) {
         captured.add(animation)
         try {
@@ -177,11 +177,13 @@ export function createClock(): Clock {
       }
       try {
         const start = (animation as Animation & { __labStart?: number }).__labStart
+        const declaredSpeed = Number(target.closest<HTMLElement>('[data-stage-speed]')?.dataset.stageSpeed)
+        const speed = Number.isFinite(declaredSpeed) && declaredSpeed > 0 ? declaredSpeed : 1
         if (start === undefined) {
           Object.assign(animation, { __labStart: virtualTime })
           animation.currentTime = 0
         } else {
-          animation.currentTime = virtualTime - start
+          animation.currentTime = (virtualTime - start) * speed
         }
       } catch {
         // Same — a detached animation throws on assignment.
diff --git a/apps/lab/app/utils/lab/layers.ts b/apps/lab/app/utils/lab/layers.ts
index de60d8216..0cecfb7f5 100644
--- a/apps/lab/app/utils/lab/layers.ts
+++ b/apps/lab/app/utils/lab/layers.ts
@@ -14,6 +14,8 @@
 
 import { evaluateEffects, sanitizeEffects } from './effects'
 import type { EffectResult, LayerEffect } from './effects'
+import { SHOT_SETTING_KEYS, sanitizeShotSettings } from './settings'
+import type { ShotSettings } from './settings'
 
 export type LayerKind = 'text' | 'image' | 'video' | 'component'
 
@@ -28,6 +30,13 @@ export type LayerKind = 'text' | 'image' | 'video' | 'component'
  */
 export type LayerSpace = 'plate' | 'scene' | 'overlay'
 
+export interface LayerShot {
+  /** Sparse visual overrides; absent values continue to follow the timeline shot. */
+  settings?: Partial<ShotSettings>
+  /** Camera moves local to this clip. Absent inherits the timeline moves. */
+  camera?: LayerEffect[]
+}
+
 export interface Layer {
   id: string
   kind: LayerKind
@@ -134,8 +143,15 @@ export interface Layer {
   src?: string
   /** Where in the source clip the layer starts, in ms. */
   trim?: number
+  /** Source playback rate for video and staged component layers. */
+  speed?: number
+  /** Shot overrides active while this clip is on the timeline. */
+  shot?: LayerShot
 }
 
+export const MIN_LAYER_SPEED = 0.25
+export const MAX_LAYER_SPEED = 4
+
 let counter = 0
 
 function nextId(): string {
@@ -244,6 +260,34 @@ export function layerEnd(layer: Layer): number {
   return layer.start + layer.duration
 }
 
+/** Whether this layer has a time-based source whose playback rate can change. */
+export function canChangeLayerSpeed(layer: Layer): boolean {
+  return layer.kind === 'video' || layer.kind === 'component'
+}
+
+/** Playback rate for a time-based clip. */
+export function layerSpeed(layer: Layer): number {
+  return canChangeLayerSpeed(layer) ? (layer.speed ?? 1) : 1
+}
+
+/** Position in a media source at a point on the timeline, in ms. */
+export function layerSourceTimeAt(layer: Layer, time: number): number {
+  return (layer.trim ?? 0) + (time - layer.start) * layerSpeed(layer)
+}
+
+/** Timeline span left before a source reaches its declared end, in ms. */
+export function layerDurationForSourceEnd(layer: Layer, sourceEnd: number): number {
+  return Math.max(100, Math.round((sourceEnd - (layer.trim ?? 0)) / layerSpeed(layer)))
+}
+
+/** Change playback rate without moving the source out-point. */
+export function withLayerSpeed(layer: Layer, speed: number): Layer {
+  if (!canChangeLayerSpeed(layer)) return layer
+  const nextSpeed = Math.min(MAX_LAYER_SPEED, Math.max(MIN_LAYER_SPEED, speed))
+  const duration = Math.max(100, Math.round((layer.duration * layerSpeed(layer)) / nextSpeed))
+  return { ...layer, duration, speed: nextSpeed === 1 ? undefined : nextSpeed }
+}
+
 /**
  * The instant the clip's source is at its own zero.
  *
@@ -256,7 +300,7 @@ export function layerEnd(layer: Layer): number {
  * exactly the case of a cut whose tail was dragged back to the top.
  */
 export function layerOrigin(layer: Layer): number {
-  return layer.start - (layer.trim ?? 0)
+  return layer.start - (layer.trim ?? 0) / layerSpeed(layer)
 }
 
 /**
@@ -273,8 +317,19 @@ const JOIN_TOLERANCE = 60
 export function canJoin(a: Layer, b: Layer): boolean {
   if (a.kind !== b.kind) return false
   if (a.component !== b.component || a.src !== b.src) return false
+  if (layerSpeed(a) !== layerSpeed(b)) return false
+  if (!sameShot(a.shot, b.shot)) return false
   if (Math.abs(layerEnd(a) - b.start) > JOIN_TOLERANCE) return false
-  return Math.abs((b.trim ?? 0) - ((a.trim ?? 0) + a.duration)) <= JOIN_TOLERANCE
+  return Math.abs((b.trim ?? 0) - ((a.trim ?? 0) + a.duration * layerSpeed(a))) <= JOIN_TOLERANCE
+}
+
+function sameShot(a: LayerShot | undefined, b: LayerShot | undefined): boolean {
+  if (a?.camera === undefined || b?.camera === undefined) {
+    if (a?.camera !== b?.camera) return false
+  } else if (JSON.stringify(a.camera) !== JSON.stringify(b.camera)) {
+    return false
+  }
+  return SHOT_SETTING_KEYS.every(key => a?.settings?.[key] === b?.settings?.[key])
 }
 
 /**
@@ -431,6 +486,23 @@ export function sanitizeLayers(value: unknown): Layer[] {
         hidden: layer.hidden === true,
         start: Number.isFinite(layer.start) ? Math.max(0, layer.start) : 0,
         duration: Number.isFinite(layer.duration) ? Math.max(100, layer.duration) : 1000,
+        speed: canChangeLayerSpeed(layer) && Number.isFinite(layer.speed)
+          ? Math.min(MAX_LAYER_SPEED, Math.max(MIN_LAYER_SPEED, layer.speed ?? 1))
+          : undefined,
+        shot: sanitizeLayerShot(layer.shot),
       }
     })
 }
+
+function sanitizeLayerShot(value: unknown): LayerShot | undefined {
+  if (!value || typeof value !== 'object') return undefined
+  const record = value as Record<string, unknown>
+  const settings = sanitizeShotSettings(record.settings)
+  const hasCamera = Array.isArray(record.camera)
+  if (!Object.keys(settings).length && !hasCamera) return undefined
+
+  return {
+    ...(Object.keys(settings).length ? { settings } : {}),
+    ...(hasCamera ? { camera: sanitizeEffects(record.camera) } : {}),
+  }
+}
diff --git a/apps/lab/app/utils/lab/sequence.ts b/apps/lab/app/utils/lab/sequence.ts
index d96c4d5eb..652a13bff 100644
--- a/apps/lab/app/utils/lab/sequence.ts
+++ b/apps/lab/app/utils/lab/sequence.ts
@@ -13,6 +13,7 @@
  */
 
 import type { InjectionKey } from 'vue'
+import { readonly, ref } from 'vue'
 
 /**
  * The clip a staged component belongs to, provided per stage.
@@ -23,6 +24,9 @@ import type { InjectionKey } from 'vue'
  */
 export const LAB_STAGE_LAYER: InjectionKey<string> = Symbol('lab:stage-layer')
 
+/** Current playback rate for the staged component under this provider. */
+export const LAB_STAGE_SPEED: InjectionKey<() => number> = Symbol('lab:stage-speed')
+
 const durations = ref<Record<string, number>>({})
 
 /** Called from the lab's `useTimedSequence` wrapper, during a staged setup. */
@@ -37,3 +41,15 @@ export function reportSequenceDuration(layerId: string, totalDuration: number):
 export function useSequenceDurations() {
   return readonly(durations)
 }
+
+/** Scale a component sequence so its source time follows the clip playback rate. */
+export function sequenceAtSpeed<T extends { at: number }>(
+  events: T[],
+  totalDuration: number,
+  speed: number,
+): { events: T[], totalDuration: number } {
+  return {
+    events: events.map(event => ({ ...event, at: event.at / speed })),
+    totalDuration: totalDuration / speed,
+  }
+}
diff --git a/apps/lab/app/utils/lab/settings.ts b/apps/lab/app/utils/lab/settings.ts
index 0eb897188..b3dd65281 100644
--- a/apps/lab/app/utils/lab/settings.ts
+++ b/apps/lab/app/utils/lab/settings.ts
@@ -292,6 +292,66 @@ export const DEFAULT_SETTINGS: LabSettings = {
   asciiSet: 'ascii',
 }
 
+/** Visual settings that a timeline clip can override for its own span. */
+export const SHOT_SETTING_KEYS = [
+  'pitch',
+  'yaw',
+  'roll',
+  'zoom',
+  'fov',
+  'panX',
+  'panY',
+  'focus',
+  'focusRange',
+  'aperture',
+  'blurRadius',
+  'bokehBlades',
+  'bokehCatEye',
+  'bokehSwirl',
+  'bokehSqueeze',
+  'focusTilt',
+  'focusTiltAngle',
+  'emission',
+  'bloomIntensity',
+  'bloomThreshold',
+  'bloomRadius',
+  'bleed',
+  'streaks',
+  'ghosts',
+  'diffusion',
+  'starIntensity',
+  'starPoints',
+  'starAngle',
+  'starLength',
+  'distortion',
+  'aberration',
+  'dispersion',
+  'lensNoise',
+  'radialBlur',
+  'spinBlur',
+  'exposure',
+  'contrast',
+  'saturation',
+  'attenuation',
+  'vignette',
+  'grain',
+  'tonemap',
+  'background',
+  'duotone',
+  'duotoneShadow',
+  'duotoneHighlight',
+  'stylize',
+  'stylizeScale',
+  'stylizeLevels',
+  'stylizeColour',
+  'stylizeAngle',
+  'stylizeMask',
+  'asciiSet',
+] as const satisfies readonly (keyof LabSettings)[]
+
+export type ShotSettingKey = typeof SHOT_SETTING_KEYS[number]
+export type ShotSettings = Pick<LabSettings, ShotSettingKey>
+
 /** Bounds and step for every numeric control, driving both the UI and URL clamping. */
 /**
  * One line per control that cannot be understood from its name.
@@ -528,6 +588,20 @@ export function settingsToQuery(settings: LabSettings): Record<string, string> {
   return query
 }
 
+function coerceSetting(key: keyof LabSettings, raw: unknown): string | number | boolean | undefined {
+  if ((STRING_KEYS as readonly string[]).includes(key)) {
+    if (typeof raw !== 'string') return undefined
+    const allowed = ENUM_KEYS[key]
+    return allowed && !allowed.includes(raw) ? undefined : raw
+  }
+
+  if ((BOOLEAN_KEYS as readonly string[]).includes(key)) {
+    return typeof raw === 'boolean' ? raw : undefined
+  }
+
+  return typeof raw === 'number' && Number.isFinite(raw) ? clampRanged(key, raw) : undefined
+}
+
 /** Rebuild settings from a query, ignoring anything unrecognised or out of range. */
 export function settingsFromQuery(query: Record<string, unknown>): LabSettings {
   const settings = { ...DEFAULT_SETTINGS }
@@ -535,18 +609,27 @@ export function settingsFromQuery(query: Record<string, unknown>): LabSettings {
     const raw = query[key]
     if (raw === undefined || raw === null || Array.isArray(raw)) continue
     const value = String(raw)
+    const normalized = (BOOLEAN_KEYS as readonly string[]).includes(key)
+      ? value === '1' || value === 'true'
+      : (STRING_KEYS as readonly string[]).includes(key) ? value : Number(value)
+    const coerced = coerceSetting(key, normalized)
+    if (coerced !== undefined) Object.assign(settings, { [key]: coerced })
+  }
+  return settings
+}
 
-    if ((STRING_KEYS as readonly string[]).includes(key)) {
-      const allowed = ENUM_KEYS[key]
-      if (allowed && !allowed.includes(value)) continue
-      Object.assign(settings, { [key]: value })
-    } else if ((BOOLEAN_KEYS as readonly string[]).includes(key)) {
-      Object.assign(settings, { [key]: value === '1' || value === 'true' })
-    } else {
-      const parsed = Number(value)
-      if (Number.isFinite(parsed)) Object.assign(settings, { [key]: clampRanged(key, parsed) })
-    }
+/** Coerce the sparse visual settings stored on a clip. */
+export function sanitizeShotSettings(value: unknown): Partial<ShotSettings> {
+  if (!value || typeof value !== 'object') return {}
+  const record = value as Record<string, unknown>
+  const settings: Partial<ShotSettings> = {}
+
+  for (const key of SHOT_SETTING_KEYS) {
+    const raw = record[key]
+    const coerced = coerceSetting(key, raw)
+    if (coerced !== undefined) Object.assign(settings, { [key]: coerced })
   }
+
   return settings
 }
 
diff --git a/apps/lab/app/utils/lab/shot.ts b/apps/lab/app/utils/lab/shot.ts
new file mode 100644
index 000000000..cd8ad8601
--- /dev/null
+++ b/apps/lab/app/utils/lab/shot.ts
@@ -0,0 +1,59 @@
+import type { Layer, LayerShot } from './layers'
+import type { LayerEffect } from './effects'
+import type { LabSettings, ShotSettingKey } from './settings'
+
+export interface ResolvedShot {
+  settings: LabSettings
+  camera: LayerEffect[]
+  cameraTime: number
+  cameraDuration: number
+  layerId: string | null
+}
+
+export function hasLayerShot(layer: Layer): boolean {
+  return Boolean(layer.shot?.camera !== undefined || Object.keys(layer.shot?.settings ?? {}).length)
+}
+
+export function resolveLayerShotSettings(settings: LabSettings, layer: Layer | null): LabSettings {
+  return layer?.shot?.settings ? { ...settings, ...layer.shot.settings } : settings
+}
+
+/** Remove one clip override so that setting inherits from the timeline again. */
+export function withoutLayerShotSetting(layer: Layer, key: ShotSettingKey): LayerShot | undefined {
+  const settings = { ...layer.shot?.settings }
+  delete settings[key]
+  const camera = layer.shot?.camera
+  if (!Object.keys(settings).length && camera === undefined) return undefined
+
+  return {
+    ...(Object.keys(settings).length ? { settings } : {}),
+    ...(camera !== undefined ? { camera } : {}),
+  }
+}
+
+/** Topmost visible clip with an authored shot at this point on the timeline. */
+export function shotLayerAt(layers: Layer[], time: number): Layer | null {
+  for (let index = layers.length - 1; index >= 0; index--) {
+    const layer = layers[index]
+    if (!layer || layer.hidden || !hasLayerShot(layer)) continue
+    if (time >= layer.start && time <= layer.start + layer.duration) return layer
+  }
+  return null
+}
+
+export function resolveTimelineShot(
+  settings: LabSettings,
+  camera: LayerEffect[],
+  layers: Layer[],
+  time: number,
+): ResolvedShot {
+  const layer = shotLayerAt(layers, time)
+  const localCamera = layer?.shot?.camera
+  return {
+    settings: resolveLayerShotSettings(settings, layer),
+    camera: localCamera ?? camera,
+    cameraTime: localCamera ? time - layer.start : time,
+    cameraDuration: localCamera ? layer.duration : settings.timelineLength,
+    layerId: layer?.id ?? null,
+  }
+}
diff --git a/apps/lab/modules/stages.ts b/apps/lab/modules/stages.ts
index 4adb1cee1..94d5b3e8a 100644
--- a/apps/lab/modules/stages.ts
+++ b/apps/lab/modules/stages.ts
@@ -1,6 +1,6 @@
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
 import { dirname, isAbsolute, relative, resolve } from 'node:path'
-import { addTemplate, defineNuxtModule } from '@nuxt/kit'
+import { defineNuxtModule } from '@nuxt/kit'
 
 /**
  * Where the things being filmed come from.
@@ -84,7 +84,7 @@ export default defineNuxtModule<StagesOptions>({
       const absolute = resolve(root, source.glob)
       // Vite reads the literal, so it has to be a path relative to this file —
       // and one that starts with a dot, or it is taken for a package.
-      const path = withLeadingDot(relative(generatedDir, absolute))
+      const path = toViteRelativePath(generatedDir, absolute)
       return `  ...withGroup(import.meta.glob(${JSON.stringify(path)}), ${JSON.stringify(source.group ?? `group-${index}`)}),`
     })
 
@@ -127,21 +127,9 @@ ${entries.join('\n')}
     const scanned = sources.flatMap(source => (source.source ? [resolve(root, source.source)] : []))
 
     if (stylesheets.length || scanned.length) {
-      const sheet = addTemplate({
-        filename: 'render-labs-stage-sources.css',
-        write: true,
-        getContents: () => [
-          // Relative to the project root rather than to this file or to the
-          // filesystem. An `@import` inside a Nuxt CSS entry is resolved from
-          // the root whatever directory the entry itself was written to, so an
-          // absolute path is read as root-relative and a path relative to the
-          // build directory lands a level too high.
-          ...stylesheets.map(path => `@import ${JSON.stringify(withLeadingDot(relative(root, path)))};`),
-          ...scanned.map(path => `@source ${JSON.stringify(path)};`),
-          '',
-        ].join('\n'),
-      })
-      nuxt.options.css.push(sheet.dst)
+      const generatedStyles = resolve(generatedDir, 'sources.css')
+      writeFileSync(generatedStyles, renderStageSourceStylesheet(generatedDir, stylesheets, scanned))
+      nuxt.options.css.push(generatedStyles)
     }
 
     // The sources sit outside the project root, which Vite refuses to serve from
@@ -165,3 +153,22 @@ function globBase(pattern: string): string {
 function withLeadingDot(path: string): string {
   return isAbsolute(path) || path.startsWith('.') ? path : `./${path}`
 }
+
+/** Convert a filesystem path to the slash-separated form Vite parses. */
+export function toVitePath(path: string): string {
+  return path.replaceAll('\\', '/')
+}
+
+/** Resolve a Vite import path between two filesystem locations. */
+export function toViteRelativePath(from: string, to: string): string {
+  return withLeadingDot(toVitePath(relative(from, to)))
+}
+
+/** Render the stylesheet that carries external stage styles and Tailwind sources. */
+export function renderStageSourceStylesheet(root: string, stylesheets: string[], scanned: string[]): string {
+  return [
+    ...stylesheets.map(path => `@import ${JSON.stringify(toViteRelativePath(root, path))};`),
+    ...scanned.map(path => `@source ${JSON.stringify(toVitePath(path))};`),
+    '',
+  ].join('\n')
+}
diff --git a/apps/lab/package.json b/apps/lab/package.json
index 7ead8318b..da87e50f2 100644
--- a/apps/lab/package.json
+++ b/apps/lab/package.json
@@ -6,6 +6,7 @@
     "dev": "nuxt dev",
     "dev:prepare": "nuxt prepare",
     "build": "nuxt build",
+    "test": "vitest run",
     "brand:assets": "node scripts/generate-brand-assets.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
diff --git a/apps/lab/test/clock.test.ts b/apps/lab/test/clock.test.ts
new file mode 100644
index 000000000..d62206b5d
--- /dev/null
+++ b/apps/lab/test/clock.test.ts
@@ -0,0 +1,62 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createClock } from '../app/utils/lab/clock'
+
+class StageElement {
+  constructor(private readonly speed: string | undefined) {}
+
+  closest(selector: string) {
+    if (selector === '[data-lab-stage]') return this
+    if (selector === '[data-stage-speed]') return { dataset: { stageSpeed: this.speed } }
+    return null
+  }
+}
+
+function clockWithStageSpeed(speed: string | undefined) {
+  const animation = {
+    currentTime: null,
+    effect: { target: new StageElement(speed) },
+    pause: vi.fn(),
+    play: vi.fn(),
+  }
+
+  vi.stubGlobal('Element', StageElement)
+  vi.stubGlobal('document', { getAnimations: () => [animation] })
+  vi.stubGlobal('performance', { now: () => 0 })
+  vi.stubGlobal('window', {
+    requestAnimationFrame: vi.fn(() => 1),
+    cancelAnimationFrame: vi.fn(),
+    setTimeout: vi.fn(),
+  })
+  vi.stubGlobal('MessageChannel', class {
+    port1 = { onmessage: null as null | (() => void) }
+    port2 = { postMessage: () => this.port1.onmessage?.() }
+  })
+
+  return { animation, clock: createClock() }
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('virtual animation clock', () => {
+  it.each([undefined, '', 'invalid', '0', '-2'])('uses normal playback for an invalid stage speed of %s', (speed) => {
+    const { animation, clock } = clockWithStageSpeed(speed)
+
+    clock.enterVirtual()
+    clock.advanceSync(100)
+
+    expect(animation.currentTime).toBe(100)
+    clock.dispose()
+  })
+
+  it('applies a valid stage speed', () => {
+    const { animation, clock } = clockWithStageSpeed('2')
+
+    clock.enterVirtual()
+    clock.advanceSync(100)
+
+    expect(animation.currentTime).toBe(200)
+    clock.dispose()
+  })
+})
diff --git a/apps/lab/test/shot.test.ts b/apps/lab/test/shot.test.ts
new file mode 100644
index 000000000..559fba72c
--- /dev/null
+++ b/apps/lab/test/shot.test.ts
@@ -0,0 +1,167 @@
+import { describe, expect, it } from 'vitest'
+import {
+  canChangeLayerSpeed,
+  canJoin,
+  createComponentLayer,
+  createMediaLayer,
+  layerDurationForSourceEnd,
+  layerOrigin,
+  layerSpeed,
+  layerSourceTimeAt,
+  sanitizeLayers,
+  withLayerSpeed,
+} from '../app/utils/lab/layers'
+import { sequenceAtSpeed } from '../app/utils/lab/sequence'
+import { DEFAULT_SETTINGS, sanitizeShotSettings, settingsFromQuery } from '../app/utils/lab/settings'
+import { resolveLayerShotSettings, resolveTimelineShot, shotLayerAt, withoutLayerShotSetting } from '../app/utils/lab/shot'
+
+function video(start = 0, duration = 2000) {
+  return createMediaLayer({ kind: 'video', start, duration, src: 'asset:video', name: 'Video' })
+}
+
+describe('clip shots', () => {
+  it('inherits timeline values until a clip overrides them', () => {
+    const layer = { ...video(), shot: { settings: { exposure: 1.8 } } }
+    const resolved = resolveLayerShotSettings(DEFAULT_SETTINGS, layer)
+
+    expect(resolved.exposure).toBe(1.8)
+    expect(resolved.zoom).toBe(DEFAULT_SETTINGS.zoom)
+    expect(DEFAULT_SETTINGS.exposure).toBe(1)
+  })
+
+  it('uses the topmost active custom shot and local camera time', () => {
+    const lower = { ...video(), id: 'lower', shot: { settings: { exposure: 1.4 } } }
+    const upper = {
+      ...video(500, 1000),
+      id: 'upper',
+      shot: {
+        settings: { exposure: 2 },
+        camera: [{ kind: 'fade' as const, at: 'in' as const, duration: 200, easing: 'out' as const, amount: 0 }],
+      },
+    }
+
+    expect(shotLayerAt([lower, upper], 700)?.id).toBe('upper')
+    expect(resolveTimelineShot(DEFAULT_SETTINGS, [], [lower, upper], 700)).toMatchObject({
+      layerId: 'upper',
+      cameraTime: 200,
+      cameraDuration: 1000,
+      settings: { exposure: 2 },
+    })
+  })
+
+  it('ignores hidden and inactive clip shots', () => {
+    const hidden = { ...video(), hidden: true, shot: { settings: { zoom: 2 } } }
+    const future = { ...video(3000), shot: { settings: { zoom: 3 } } }
+
+    expect(shotLayerAt([hidden, future], 1000)).toBeNull()
+  })
+
+  it('keeps timeline camera moves when a clip only overrides visual settings', () => {
+    const camera = [{ kind: 'dolly' as const, at: 'in' as const, duration: 400, easing: 'out' as const, amount: 1 }]
+    const layer = { ...video(), shot: { settings: { exposure: 1.4 } } }
+
+    expect(resolveTimelineShot(DEFAULT_SETTINGS, camera, [layer], 500)).toMatchObject({
+      camera,
+      cameraTime: 500,
+      cameraDuration: DEFAULT_SETTINGS.timelineLength,
+    })
+  })
+
+  it('sanitizes persisted shot values', () => {
+    const [layer] = sanitizeLayers([
+      {
+        ...video(),
+        shot: { settings: { zoom: 99, stylize: 'unknown', tonemap: false } },
+      },
+    ])
+
+    expect(layer?.shot?.settings).toEqual({ zoom: 4, tonemap: false })
+  })
+
+  it('coerces query and persisted shot settings consistently', () => {
+    expect(settingsFromQuery({ zoom: '99', stylize: 'unknown', tonemap: 'false' })).toMatchObject({
+      zoom: 4,
+      stylize: DEFAULT_SETTINGS.stylize,
+      tonemap: false,
+    })
+    expect(sanitizeShotSettings({ zoom: 99, stylize: 'unknown', tonemap: false })).toEqual({
+      zoom: 4,
+      tonemap: false,
+    })
+  })
+
+  it('ignores malformed persisted camera overrides', () => {
+    const camera = [{ kind: 'dolly' as const, at: 'in' as const, duration: 400, easing: 'out' as const, amount: 1 }]
+    const [layer] = sanitizeLayers([
+      {
+        ...video(),
+        shot: { settings: { exposure: 1.4 }, camera: 'invalid' },
+      },
+    ])
+
+    expect(layer?.shot).toEqual({ settings: { exposure: 1.4 } })
+    expect(resolveTimelineShot(DEFAULT_SETTINGS, camera, [layer!], 500).camera).toBe(camera)
+  })
+
+  it('returns one setting to timeline inheritance without dropping other overrides', () => {
+    const camera = [{ kind: 'dolly' as const, at: 'in' as const, duration: 400, easing: 'out' as const, amount: 1 }]
+    const layer = {
+      ...video(),
+      shot: { settings: { focus: 0.8, exposure: 1.4 }, camera },
+    }
+
+    expect(withoutLayerShotSetting(layer, 'focus')).toEqual({ settings: { exposure: 1.4 }, camera })
+    expect(withoutLayerShotSetting({ ...video(), shot: { settings: { focus: 0.8 } } }, 'focus')).toBeUndefined()
+  })
+})
+
+describe('clip speed', () => {
+  it('shortens the timeline span without changing the source out-point', () => {
+    const layer = { ...video(1000, 2000), trim: 500 }
+    const faster = withLayerSpeed(layer, 2)
+
+    expect(faster).toMatchObject({ duration: 1000, speed: 2 })
+    expect(layerSourceTimeAt(faster, 2000)).toBe(2500)
+    expect(layerSourceTimeAt(layer, 3000)).toBe(2500)
+  })
+
+  it('limits playback rate to time-based clips and the supported range', () => {
+    const image = createMediaLayer({ kind: 'image', start: 0, duration: 2000, src: 'asset:image', name: 'Image' })
+
+    expect(canChangeLayerSpeed(image)).toBe(false)
+    expect(withLayerSpeed(image, 2)).toBe(image)
+    expect(withLayerSpeed(video(), 99)).toMatchObject({ speed: 4, duration: 500 })
+    expect(withLayerSpeed(video(), 0.01)).toMatchObject({ speed: 0.25, duration: 8000 })
+  })
+
+  it('keeps split clips joinable at the same playback rate', () => {
+    const head = { ...video(0, 1000), speed: 2, trim: 500 }
+    const tail = { ...video(1000, 500), speed: 2, trim: 2500 }
+
+    expect(canJoin(head, tail)).toBe(true)
+    expect(canJoin(head, { ...tail, speed: 1 })).toBe(false)
+    expect(canJoin(head, { ...tail, shot: { settings: { exposure: 2 } } })).toBe(false)
+  })
+
+  it('speeds up staged component clips and preserves their trimmed source point', () => {
+    const layer = { ...createComponentLayer('Demo', 1000, 2000), trim: 500 }
+    const faster = withLayerSpeed(layer, 2)
+
+    expect(faster).toMatchObject({ duration: 1000, speed: 2 })
+    expect(layerSpeed(faster)).toBe(2)
+    expect(layerOrigin(faster)).toBe(750)
+  })
+
+  it('fits a retimed component from its trimmed source point', () => {
+    const layer = { ...createComponentLayer('Demo', 0, 1500), trim: 500, speed: 2 }
+
+    expect(layerDurationForSourceEnd(layer, 2000)).toBe(750)
+  })
+
+  it('scales component sequence events and their reported duration', () => {
+    expect(sequenceAtSpeed([{ at: 250 }, { at: 1000 }], 2000, 2)).toEqual({
+      events: [{ at: 125 }, { at: 500 }],
+      totalDuration: 1000,
+    })
+  })
+})
diff --git a/apps/lab/test/stages.test.ts b/apps/lab/test/stages.test.ts
new file mode 100644
index 000000000..e659e77c2
--- /dev/null
+++ b/apps/lab/test/stages.test.ts
@@ -0,0 +1,28 @@
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { renderStageSourceStylesheet, toVitePath, toViteRelativePath } from '../modules/stages'
+
+describe('stage source paths', () => {
+  it('writes relative component globs with Vite separators', () => {
+    const generated = resolve('apps/lab/.stages')
+    const components = resolve('apps/docs/app/components/content/*.vue')
+
+    expect(toViteRelativePath(generated, components)).toBe('../../docs/app/components/content/*.vue')
+  })
+
+  it('normalizes absolute Windows paths used by Tailwind sources', () => {
+    expect(toVitePath('C:\\repo\\apps\\docs\\app\\components')).toBe('C:/repo/apps/docs/app/components')
+  })
+
+  it('resolves stylesheet imports from the generated stage directory', () => {
+    const generated = resolve('apps/lab/.stages')
+    const stylesheet = resolve('apps/docs/app/assets/css/main.css')
+    const source = resolve('apps/docs/app')
+
+    expect(renderStageSourceStylesheet(generated, [stylesheet], [source])).toBe([
+      '@import "../../docs/app/assets/css/main.css";',
+      `@source ${JSON.stringify(toVitePath(source))};`,
+      '',
+    ].join('\n'))
+  })
+})
diff --git a/apps/lab/vitest.config.ts b/apps/lab/vitest.config.ts
new file mode 100644
index 000000000..f19fc42a4
--- /dev/null
+++ b/apps/lab/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['test/**/*.test.ts'],
+  },
+})