Auto Captions Video Editor

About this style

Burned-in, word-by-word captions became a fixture of short-form social video in the late 2010s and 2020s, partly because many people scroll feeds with the sound off and highlighted words help hold attention. Editing tools responded with automatic captioning: speech recognition transcribes the audio, aligns each word to its moment and renders styled captions on the timeline. Promos for these features show the whole pipeline on one screen: clips landing on a timeline, captions appearing word by word over the preview, and an export finishing. The format works when the editor looks like a working tool, with real timecodes, waveforms and file sizes, and the captions stay in sync with a plausible spoken line.

Make a 10-second promo for a video editor's auto-captions feature: four clips snap onto a dark timeline, captions generate word by word across a founder interview drawn in code, the preview plays with each spoken word highlighted, and an export bar fills to 100%.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Reelwright, a video editor (fictional). Wordmark: "reelwright". Project: "Fernlog launch teaser".
- The video being edited: a 24.0 s teaser for Fernlog, a meeting-notes app (fictional), with its co-founder Mira Solano (fictional) speaking.
- Clips in order (name · timeline span): "A-cam wide" 0.0–6.2 s · "B-roll desk" 6.2–11.6 s · "A-cam close" 11.6–18.6 s · "End card" 18.6–24.0 s. Audio: "interview-mix.wav", 0.0–24.0 s.
- Transcript (timeline span · line):
  0.4–3.0 "Every team I've worked with loses its best ideas"
  3.2–5.8 "somewhere between the meeting and the follow-up."
  6.4–8.9 "So we built Fernlog. It listens, takes the notes,"
  9.1–11.4 "and turns every decision into a task."
  11.9–14.4 "No one has to ask who owns what anymore."
  14.8–17.5 "It's already written down, and it's already assigned."
  19.0–21.6 "Fernlog. Your meetings, finally finished."
  22.0–23.6 "Try it free this week."
  59 words in all. Line 6's words: It's 14.80–15.02 · already 15.02–15.30 · written 15.30–15.62 · down, 15.62–15.98 · and 16.10–16.26 · it's 16.26–16.46 · already 16.46–16.86 · assigned. 16.86–17.50. In the other lines, spread each line's words across its span in proportion to their character counts.
- End card copy: "Fernlog" over "Your meetings, finally finished."
- Caption presets: "Bold pop" (chosen), "Clean", "Karaoke". Language: "English · auto-detected".
- Export: "fernlog-teaser.mp4" · "1080p · MP4 · 30 fps" · 720 frames · finished label "Exported · 24.0 s · 38.2 MB".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a professional dark editor that looks like it's mid-project: dense panels, real timecodes, a waveform with speech shape, caption chips sitting on their own track. The preview holds a flat editorial illustration of the interview, warm against the cool UI. Coral is Reelwright's only accent (playhead, buttons, selection); caption gold belongs to the caption track and the highlighted word.
- Palette: app #0E0F11; panels #151619; raised #1F2024; borders #26282D; text #ECEDEF; secondary #8C9098; faint #5A5E66; coral #FF5D4A (playhead, Export, selection rings, snap guides); video clips #2B4A6B with a 1px #3E6690 border; audio clip #173A30 with waveform #3FB68E; caption chips #E7C35A at 20% with a 1px #E7C35A border and #F3E3B0 text; highlighted word #FFD84D. The interview: wall #1F3A3F, backlight oval #2A4D52, sweater mustard #D9A441, skin #8A5A3C with a lighter cheek facet #9C6A4A, hair #1A1414, lips #6E3A2C, shelf #2E4A4F, pot #C46A4A, leaves #6FA37F, book spines #E0B354 and #8FB3C9. B-roll: desk #C9A27C, laptop #2B2F36 with a #F4F1EA screen, mug #F2E3C6. End card: forest #1F3A2E, fern #9ED8A8, cream #F3EFE4, subline #CFE3D2.
- Type: Manrope 500, 600, 700 and 800 for the UI (labels 13–15px, the wordmark 19px 700, clip names 12px, the end card's "Fernlog" 72px 800 and its subline 26px 500); JetBrains Mono 400 and 500 for timecodes (toolbar 20px, ruler 11px, transcript 13px) and export numbers; Archivo 800 42px for the Bold pop captions; Manrope 600 30px for the default captions.
- Layout (Canvas 1920 × 1080):
  - Top bar y 0–56: the mark at x 24 (a 22px coral rounded square with two short white horizontal bars stacked like timeline clips) and "reelwright"; the project name Manrope 500 15px at x 220 with "Saved" in faint after it; "Export" at x 1724–1896, y 12–44 (coral, radius 8, Manrope 700 15px white).
  - Media bin x 0–380, y 56–612, #151619 with a right border: "Media · 4 clips" Manrope 600 14px at x 24, baseline y 92; four 160 × 90 thumbnails (miniatures of each shot) at x 24 and 204, y 112 and 252, each with its duration in a dark JetBrains Mono 12px pill at its bottom-right ("0:06.2", "0:05.4", "0:07.0", "0:05.4") and its name in 13px secondary below.
  - Preview x 400–1360, y 72–612 (960 × 540) with a 1px border.
  - Inspector x 1380–1920, y 56–612: tabs "Captions" (active, 2px coral underline), "Audio", "Color" at y 56–100; "Auto captions" Manrope 700 17px at x 1404, baseline y 132; the language in 14px secondary at baseline y 156; the button at x 1404–1896, y 172–212 (1.5px coral outline and coral "Generate captions"; while working, coral fill with white text); three 152 × 64 preset swatches at x 1404, 1576 and 1748, y 228–292, each rendering a sample word in its own style with its name in 12px; "TRANSCRIPT" label at baseline y 318; transcript rows at baselines from y 344, 30px apart: the start time in JetBrains Mono 13px faint at x 1404 and the line in Manrope 500 15px from x 1460.
  - Timeline y 612–1080, #111214: a toolbar at y 612–656 with the timecode (HH:MM:SS:FF at 30 fps) at x 24, a "Snap" toggle (on) and a zoom slider at the right; the ruler at y 656–684 mapping 0–24 s onto x 120–1880 (73.33 px per second), labels every 2 s, minor ticks every 0.5 s; track labels "V1", "A1", "CC" at x 24; V1 at y 700–800, A1 at y 812–872, CC at y 884–936. Video clips are radius-6 blocks holding a filmstrip of their shot (one tiny frame every 120px) and their name at top-left. The waveform: 2px bars every 3px, height from a seeded speech envelope that is loud inside words and quiet in the gaps. Caption chips sit on CC, one per transcript line, the line's words in Manrope 500 12px clipped to the chip.
  - The playhead: a 2px coral line from y 656 to 1060 with a 14px coral pentagon head on the ruler.
- The interview, drawn on the canvas as flat shapes inside the preview:
  - "A-cam wide": the wall with the backlight oval, a shelf on the left at preview y 180 (x 80–330) holding a pot with three leaves and two books; Mira at preview x 600: mustard sweater shoulders (300px wide, y 330–540), neck, a 110 × 140 head with the cheek facet, a sleek black bob with a side part, two short dark eye shapes, brows and lips. Her head drifts ±3px on a slow sine; her eyes blink (0.12 s) every 3.1 s at a seeded offset.
  - "A-cam close": the same drawing at 1.7× scale, framed on her face, centered at preview x 520.
  - "B-roll desk": a top-down warm desk with the laptop (its screen showing five grey note lines and two ticked checkboxes), the mug with two steam curves and a closed notebook; a slow 1.0 to 1.06 push-in across the clip.
  - "End card": forest fill, a fern mark (a curved stem with five pairs of leaflets), "Fernlog" and its subline centered.
  - Her mouth opens only during real-time playback: while the playhead is inside a word, the opening follows a smooth arch across that word (with one extra peak for words over six letters); in gaps it rests closed. While scrubbing or generating, the preview shows still frames with the mouth at rest.
- Captions on the preview, at most two lines, centered on the preview's x center. Default style (before a preset is chosen): Manrope 600 30px white on a #000000-at-60% box, radius 8, baseline at preview y 492. Bold pop: Archivo 800 42px white with a 6px #0B0B0C stroke (round joins, stroke drawn under the fill), baselines at preview y 440 and 492; the active word in #FFD84D at 1.08× scale around its own center. Line 6 breaks as "It's already written down," / "and it's already assigned."
- Snap: a dragged clip's ghost travels from its bin thumbnail to its slot (easeInOutCubic), stretching from 160 × 90 to its clip size; when its left edge comes within 12px of the previous clip's end it closes the gap in 0.06 s and a 1px coral guide at the join spans y 656–936 for 0.25 s, fading out. As each clip lands, the waveform under its span reveals left to right.
- The cursor: an original arrow drawn on the canvas, 24px, #ECEDEF with a 2px #0E0F11 outline; it scales to 0.9 on each press.
- Motion rules: UI moves fast and exact (0.12–0.3 s, easeOutCubic); the generation sweep is linear; nothing bounces except the active word's 1.08× pop, which eases in and out over 0.08 s.
- Premium: a believable, busy editor; captions in sync to the word; a scan that visibly writes them onto their own track; an interview illustration with taste. Cheap: a fake video made of grey boxes, emoji in captions, captions that wobble or rainbow, flashes on every word, a progress bar that jumps.
- Banned: real company names, logos and UI copied from existing products (no clone of any real editor's layout chrome or icons), real people, photos, emoji, rainbow captions, glows, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.3s: the editor fades in with the bin's four thumbnails, an empty timeline and a preview reading "No clips" in faint 15px.
- 0.3–2.0s: the cursor drags the four clips onto V1, one every 0.42 s from 0.3 s (each carry 0.3 s), each snapping to the one before; the waveform reveals under each; the preview shows the wide shot once clip 1 lands.
- 1.98–2.2s: the cursor moves to "Generate captions" (1650, 192) and presses at 2.1 s; the button fills coral and reads "Generating · 0%".
- 2.2–4.6s: the sweep: a 2px #FFD84D scan line at 80% runs linearly across the timeline from 0 to 24 s, and the playhead rides with it; behind it each line's chip grows on CC and its words fill in as the scan passes them; each transcript row appears in the inspector as its line begins and fills word by word; the preview shows still frames of whichever shot the scan is over, with the current line in the default style building word by word; the button's percentage counts to 100%.
- 4.6–4.75s: the button reads "Captions ready · 59 words" (white on coral).
- 4.8–5.05s: the cursor clicks the Bold pop swatch at 5.0 s; a 2px coral ring marks it; the preview's caption crossfades into the Bold pop style over 0.2 s.
- 5.05–5.4s: the cursor clicks the ruler at 14.8 s (x 1205) at 5.3 s; the playhead jumps there in 0.12 s and the preview cuts to the close-up.
- 5.4–6.6s: playback at real speed from 14.8 to 16.0 s: Mira speaks, the timecode runs, and the highlight steps through "It's", "already", "written", "down,".
- 6.0s: the hero frame: all four clips, the waveform and eight caption chips on the timeline; the full transcript; the Bold pop swatch ringed; the close-up with "It's already written down," / "and it's already assigned." and "written" highlighted; the playhead at 00:00:15:12.
- 6.6–7.1s: playback stops at 16.0 s; the cursor moves to Export and presses at 7.0 s; the export popover opens under it (x 1576–1896, y 52–232, #1F2024, radius 10): "Export", "1080p · MP4 · 30 fps", "fernlog-teaser.mp4", a coral progress bar at x 1596–1876, y 150–158, the percentage and "Rendering frame 0 / 720".
- 7.1–8.6s: the bar fills 0 to 100% on easeInOutSine; the frame counter tracks it to 720 / 720.
- 8.6–8.8s: the bar's end becomes a coral check and the label reads "Exported · 24.0 s · 38.2 MB".
- 8.8–10.0s: hold on the final frame: the finished timeline, the paused close-up caption and the completed export.
For other lengths, stretch the sweep and the playback; keep the snap at 0.06 s, the transcript's timing exact and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: the interview, B-roll, end card, thumbnails, filmstrips and waveform are all drawn in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face (Manrope 500, 600, 700 and 800; JetBrains Mono 400 and 500; Archivo 800) before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. Draw each shot through one function shot(name, localTime, mouthOpen) so the preview, the bin thumbnails and the filmstrip frames share one drawing; cache the thumbnails and filmstrips in offscreen canvases at load. Precompute the word timings and the waveform envelope at load; seek(t) maps t to the timeline time, the active word and the mouth opening.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that at 2.0 s the four clips sit edge to edge at their spans with no gap or overlap; the waveform is quiet in the gaps between lines; during the sweep the chips, transcript and preview caption never get ahead of the scan; every caption chip lines up with its line's span; the transcript reads exactly as given, 59 words; the Bold pop stroke never swallows letters; the 6.0 s frame shows the close-up with "written" highlighted at 00:00:15:12 and the full timeline and transcript; the export reaches exactly 720 / 720 and 100%; nothing flashes; and the final frame shows the completed export. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…