Move Subtitles Per Phrase

Move Subtitles Per Phrase

By default, all captions sit at the same global position (e.g., bottom-center). Override any phrase to place its caption elsewhere on the canvas: top, center, or anywhere in between. When playback moves between phrases, the caption smoothly glides to the new position.

How It Works

1. Set a global position: the default position applies to all phrases. Typically bottom-center, but configurable to any point on the canvas.

2. Select a phrase: click a phrase in the transcript sidebar to select it. The corresponding caption highlights on the video preview.

3. Drag to reposition: grab the caption on the video canvas and drag it to the desired position. The position is stored as a percentage of the canvas dimensions, so it works across different resolutions.

4. Play back to see transitions: when the video moves from one phrase to the next, the caption glides from the previous position to the new one. The transition takes about 500ms with an ease curve.

5. Remove the override: to revert a phrase to the global position, remove its position override. The caption snaps back to the default.

Key Details

Percentage-based coordinates. Positions are stored as {x: 0-100, y: 0-100} percentages. A caption at {x: 50, y: 80} is centered horizontally, near the bottom. This makes positions resolution-independent.

Smooth interpolation over 15 frames. The transition between phrase positions uses a CSS ease curve interpolated across ~15 frames (~500ms at 30fps). First and last phrases don’t transition (they snap into place).

Works with all styles and animations. Position overrides compose with enter/exit animations and all style properties. A phrase can fade in at the top while the previous one faded out at the bottom.

What’s Next

• Caption Animations: add enter/exit effects that combine with position changes
• Caption Styling: style the captions you’re positioning
• Floating Webcam Bubble: another element with per-scene positioning