# Captions A React block (a whole screen) in [Beamline](https://beamline.io/)'s [CMS & media](https://beamline.io/components/apps/cms-media) app. Live demo: https://beamline.io/components/captions Captions for a video, by speaker and by style. Caption layers are bound to a speaker (or all speakers), each with its own style and place, top or bottom; the preview shows every layer's words at the playhead in its style, and the playhead is a grip on the scene's timeline where each speaker's words sit in that speaker's colour, the same colour that marks the speaker's layer and caption. A layer bound to a speaker who isn't in the script is said as unresolved; overlapping layers and a layer with no words at the moment are said; removing a layer never touches the script. The style library is searched, filtered by kind and sorted, each style shown on a sample line and named in words; Restyle the selected layer and Add as a new layer are separate actions, so no duplicate is made by accident; the scope, this scene or all scenes, says how many scenes it changes before applying; an unavailable style says why. ## Use it for - Styling captions or subtitles over a video, podcast or course recording, per speaker and per scene. - Any preset library that applies to a selected item or adds a new one, with a scope that must be said before it applies. ## Not for - Playing a video ([video](https://beamline.io/components/video)) or reading a transcript along with it ([transcript-viewer](https://beamline.io/components/transcript-viewer)). - Cutting the video itself (a [timeline](https://beamline.io/components/timeline) editor). ## Anatomy - header: the product's mark, Captions, the scenes as numbered toggles - stage: the frame with the scene and time, each layer's current words at its place in its style (the selected layer outlined); the timeline with one lane per speaker, their words as marks in the speaker's colour, the playhead a grip; the speakers with their colour and the scene's span - layers: the scene's caption layers (speaker colour, name, speaker, style, position) with unresolved, no words now and overlap said, a menu to remove; the selected layer's speaker and position - styles: search, sort, kind; style cards with a sample line, name and kind, or why it is unavailable; Apply to this scene or all scenes with what that changes; Add as a new layer and Restyle the selected layer ## States - layers: none, one selected, speaker unresolved, no words at the moment, overlapping, removed - styles: browsing, filtered, none match, picked, unavailable, applying, applied, refused - scope: this scene, all scenes - loading: shaped skeletons - phone: the stage, then layers and styles stacked - right to left: mirrored; captions keep their own direction - reduced motion: through the tokens ## Keyboard - On the playhead: Left/Right a quarter second, Shift two seconds, Home/End the scene's ends - Tab through the scenes, the layers (Enter selects), their menu and properties, the style search, kinds, cards (Enter picks), the scope and the actions ## Motion The playhead follows the hand; captions change with the words. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `speakers` (required) | `Speaker[]` | — | | | `words` (required) | `TimedWord[]` | — | | | `scenes` (required) | `Scene[]` | — | | | `presets` (required) | `CaptionPreset[]` | — | | | `layers` (required) | `CaptionLayer[]` | — | | | `defaultScene` | `string` | — | The scene being edited. | | `defaultLayer` | `string \| null` | — | | | `defaultTime` | `number` | — | The playhead, in seconds. | | `onApply` | `((r: ApplyRequest) => Promise<{ layerId: string; }>)` | — | Restyle a layer or add one. Reject with an Error: nothing changed, the reason said. | | `onLayerChange` | `((layer: CaptionLayer) => Promise)` | — | | | `onRemoveLayer` | `((layerId: string) => Promise)` | — | Remove a caption layer; the transcript is never touched. | | `loading` | `boolean` | — | | | `product` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Alert](https://beamline.io/components/alert.md) - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) - [Value grip](https://beamline.io/components/value-grip.md) ## Dependencies `lucide-react` ## Import ```tsx import { Captions } from "@beamline/captions"; ``` ## Get it Captions is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in CMS & media - [Content workbench](https://beamline.io/components/cms-workbench): A site's content in one place: collections, the chosen collection's items in a grid where cells are chosen as a range (click, Shift-click), and an… - [Page editing](https://beamline.io/components/page-editing): Editing a live page in place, for someone who may edit but not publish. Edit page outlines each editable piece with its name; a click edits it where it… - [Page inline edit](https://beamline.io/components/page-inline-edit): The website edited in place inside the admin. A page picker with the page's address and Edit in place. The website shown in its own paper and type; with… - [Writing canvas](https://beamline.io/components/writing-canvas): Writing before structure, for a CMS team. A shared draft with where it sits, who's in it and the section each person is writing in (or that they're only… - [Versioned document](https://beamline.io/components/versioned-document): One CMS document edited in its draft or in a release's version. The switcher says what each version holds and where an edit goes; published reads only… - [Document history](https://beamline.io/components/document-history): A CMS document's history. Revisions as a timeline, newest first, each with what happened, who and when; the ones made inside a release are gathered under… - [Record versions](https://beamline.io/components/record-versions): A published record with its versions. Main (published on success) and each version with how many fields differ from main (on info), who made it from what… - [Document finder](https://beamline.io/components/document-finder): Finding documents in a CMS. Search by words in a title or text field; the filters read as a sentence of chips (type, what a field contains, as many as… - [Content releases](https://beamline.io/components/content-releases): Content releases in a headless CMS: changes to many documents grouped to go live together. A preview bar layers chosen releases over what's live in the… - [Post release](https://beamline.io/components/post-release): One post on its way out. The preview shows it as the website, a phone, the email and a shared link, from one revision; the email's subject is set apart… - [Social media scheduler](https://beamline.io/components/social-scheduler): Plan posts across your social accounts: a week calendar where every post sits at its time in its account's colour and moves by drag, a queue of what goes… - [Post performance](https://beamline.io/components/post-performance): How published posts did, with every figure's denominator said. The list keeps each post's website visitors, its email's open and click rates (each "x of… - [Newsletter desk](https://beamline.io/components/newsletter-desk): A publication's newsletters, each its own list with its own subscribers, settings and design. Active and Archived apart; a new one says how many existing… - [Audience segments](https://beamline.io/components/audience-segments): A messaging product's audience segments in one place: the directory with members (a count of people, or not known, never 0) kept apart from what uses… - [Publishing team](https://beamline.io/components/publishing-team): A social team's settings in three places. Tags: posts with their status (scheduled, draft, sent) and tags in their own series hue, the same hue in the… - [Asset library](https://beamline.io/components/asset-library): A shared media library in a CMS. Folders hold files; collections only point at them, and adding to one says it never moves a file. The grid filters by… - [Media collection](https://beamline.io/components/media-collection): A media collection that fills itself from metadata. Its rules read as one sentence of chips (is, is not, contains, before, after; choices picked from the… - [File detail](https://beamline.io/components/file-detail): One file's details. The image with its focal point (where crops keep the subject), set by clicking the picture and said in words, or none said. Metadata… - [Metadata fields](https://beamline.io/components/metadata-fields): An account's metadata fields for media. The library lists each field with its type, how many assets fill it and how many projects can use it, with New… - [Collection batch edit](https://beamline.io/components/collection-batch-edit): A collection's records filtered and edited together. Saved filters beside nested rules (query-builder, up to three levels) over fields and dotted JSON… - [Schema fields](https://beamline.io/components/schema-fields): A collection's fields and their settings. The fields with key, type and flags (required, unique, hidden, translated). An existing field leads with its… - [Policy rules](https://beamline.io/components/policy-rules): One access policy's permissions. Admin access (said to skip every rule, on warning) and app access (without it its people can't sign in; rules still… - [Automation steps](https://beamline.io/components/automation-steps): An automation's trigger and its steps' options. The outline: what starts it, then each step by its key and kind, with how many unknown paths it holds… - [Automation runs](https://beamline.io/components/automation-runs): An automation's runs and running it by hand. The runs: when, how it ended (done on success, failed on danger, running on info), what started it and how… - [Review share](https://beamline.io/components/review-share): Sharing cuts for review. The page as reviewers will see it leads, large: its title (edited in place), how many items and when it ends, what's allowed… - [Guest review](https://beamline.io/components/guest-review): A guest's review of shared translations, and the invitation that scopes it. The room shows the screen each key appears on with the shared keys numbered… - [Translation workbench](https://beamline.io/components/translation-workbench): Translating a file segment by segment. Source and target sit side by side, segments grouped by their content unit; the source is read only (it changes by… - [Translation editor](https://beamline.io/components/translation-editor): Content in two languages side by side, and the interface strings. Content: the record and the language to translate into, how many fields are translated… - [Translation key](https://beamline.io/components/translation-key): A translation key, defined and given context. General: the name (one already in the project refused, or a name per platform), the base text, the… - [Language preview](https://beamline.io/components/language-preview): One document in two languages side by side. The panes scroll together; choosing a passage in either lights it in both and offers Find in editor; a… - [Localization overview](https://beamline.io/components/localization-overview): A localization project at a glance. Review progress per language says segments and words approved out of their totals (a word total still being counted… - [Cut review](https://beamline.io/components/cut-review): Reviewing a film cut. The picture is the still of the clip under the playhead, large, with the checks a reviewer needs folded into three tools above it… - [Shot list](https://beamline.io/components/shot-list): A scene's shot list for a film or video shoot. Shots in order with done, number, description, size, movement, setup and time, and banner rows (a meal, a… - [Call sheet](https://beamline.io/components/call-sheet): A shoot day's call sheet. Composed from grids switched on or off: schedule (scenes, start, pages, cast), cast with call times edited in place and a call… - [Screenplay revisions](https://beamline.io/components/screenplay-revisions): A screenplay under revision for a production. The script in screenplay form (scene headings, action, character, parenthetical, dialogue, transitions)… - [Transition sequence](https://beamline.io/components/transition-sequence): An event's sequence of states for one object, as an inspector. The states play in order; each step between two states has its own duration and easing… - [Segment editor](https://beamline.io/components/segment-editor): One segment's translation with its checks and help. The source shows its tags and placeholders as numbered chips, and so does a preview of the… - [Rig editor](https://beamline.io/components/rig-editor): Rig a character: bones, a rotation constraint and a mesh. Bones are drawn joint by joint on the stage or added from the chosen joint, and can branch from… - [Project board](https://beamline.io/components/project-board): A team's sprint as a board: the sprint's goal, points done and days left, filters by person and label, the work as cards in columns with work-in-progress… - [Cycle planner](https://beamline.io/components/cycle-planner): A team's work cycles: the schedule read as one sentence (every two weeks from Monday, no cooldown, three ahead) over a calendar of cycles on a week… - [Component source](https://beamline.io/components/component-source): Components and their instances in one artboard. Layers chosen together become a component after a review of what goes with them (their timeline keys and… - [Element index](https://beamline.io/components/element-index): A production's element index: every element (cast, props, wardrobe, vehicles, animals…) grouped by category, each with how many scenes it's in, the shoot… - [Layout inspector](https://beamline.io/components/layout-inspector): Size and place one object in its parent. Width and height are Fixed (points or percent), Hug (its content; not without children) or Fill (its parent; not… - [Text styles](https://beamline.io/components/text-styles): A text object's runs, styles and modifiers. Each run takes one of the text's own styles (they belong to this text only); hovering or focusing a style… - [Label designer](https://beamline.io/components/label-designer): A label template made against the real label: drawn at true proportions in millimetres with its size beside it; the code says what it holds (a QR links… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).