DEV Community

Cover image for Add animated captions to a video in the browser, free
Shayan for Atomcut

Posted on Originally published at atomcut.net

Add animated captions to a video in the browser, free

AtomCut adds word-by-word, karaoke-style captions to a video in your browser: you type the words, cut them into cues, sync the timing, style the active word, and export an MP4. AtomCut is a free motion design and video editor that runs in the browser, no account, no install.

There's one thing it doesn't do yet: it doesn't listen to your audio and write the words for you. You type the script, and you time it. That's slower than a one-click auto-transcribe, and it's also why the timing is exactly what you want and not what a speech model guessed.

1. Import your clip

Drag your video onto the canvas, or use Import media in the Media panel and then Place on frame. It lands on its own track with its sound attached; the composition below is a 1920×1080 frame, but a vertical 1080×1920 reel is one click away in the new-project dialog.

The AtomCut studio: a talking-head clip on the canvas, the caption above it on Track 1 and the video on Track 3 in the timeline
The whole studio. The caption sits on the track above the video, so it draws on top.

2. Type the words as a text layer

+ Clip → Text in the timeline header adds a text layer at the playhead. Open Content in the inspector and type what's said, exactly as it's said. This is the one string every caption cue will be a span of, so get the words right here.

3. Turn it into a caption and cut it into cues

In the same Content section, switch on Captions. That seeds one cue per word across the clip and gives the spoken word a highlight you can see immediately. (There's also + Clip → Caption if you'd rather start with a caption and type into it.)

A Cues tab appears on the right rail. Its re-cut menu recuts the same text one word per cue, one line per cue, or one letter per cue; word-level is the karaoke look most people want. Each cue is a span of your original string, so retyping a word in the cue list later doesn't touch any other cue's timing.

The caption selected on the canvas with the Animate tab open: a Scale In animation per word, 260 ms, with its easing curve
A caption is a text layer, so it takes any text animation: here Scale In, per word.

4. Time the cues

Two ways to do it. Tap sync plays the clip and lets you tap a button in time with each word, which stamps that cue's start where you tapped. Or spread every cue evenly across the clip's duration with one click, then drag individual cue boundaries by hand where the even spacing is off. You can also give a cue a word from its neighbour, split one cue in two, or merge two into one, all from the same cue list.

The Cues panel: Tap sync button, re-cut and even controls, and eight word cues with their durations, the fifth one active at the playhead
The Cues panel. The lit row is the word under the playhead.

5. Style the word being spoken

The inspector for a caption has two scopes at the top: Text (the whole layer) and Focus (the word being spoken). Pick Focus and every field you touch overrides only that word: its colour, a highlight colour with its own radius and padding, and a Focus pop scale. The focus is a style range on the same text layer, not a separate object, so it stays attached to its word as you keep editing cues around it.

For the look in these screenshots we didn't style anything by hand: the Library's Text looks has a Captions group (Subtitle, Punch, Karaoke, Clean Sub, Boxed, Shout, Ticker, Whisper), and Karaoke applied to the selected layer gives the green band with the spoken word switching to white. A caption look carries its own idea of the spoken word, so applying one restyles the lit word too. Everything else in the caption can carry its own reveal preset and stagger, the same system that drives any AtomCut text animation.

The Focus scope of the caption inspector: four highlight overrides (colour, radius, padding) and a Focus pop scale of 106 %
Focus scope: the overrides that apply only to the word being spoken.

6. Export

Export as MP4, WebM or GIF. Every export is free with no watermark, capped at 720p; the one-time $29 adds HD, 4K and transparent export if you need more than social-post resolution.

The Export dialog on the Video tab: MP4 video, 720p HD, 30 fps, include sound on
Export, Video tab. 720p is the free ceiling; the one-time licence unlocks the sizes above it.

AtomCut does not transcribe your audio. There's no speech-to-text step: you type the caption's text yourself and time the cues by tapping along or dragging, rather than getting a rough auto-transcript to clean up.

Questions people ask

Does AtomCut transcribe my audio automatically?
No. You type the words as a text layer, then convert them to a caption and cut them into cues. If you already have an SRT or a transcript, you'd paste the text in and time the cues from there rather than importing timed subtitles directly.

Can I give one word a different look from the rest?
Yes. Select a run of letters or words in the caption and give that span its own animation or style, independent of the rest of the layer, without splitting it into a separate text layer.

Does this work on a tablet?
The drawing and timeline tools share one workspace at every size, so tap-syncing cues works the same on a tablet as it does with a mouse.

Once your cues are timed, the next thing worth trying is a sound on every word instead of just a style change — see kinetic typography with a sound per letter or the full reference at /docs/text-animation.

Try it: app.atomcut.net — free, no account, works offline.

Top comments (0)