Rendered by the captions.js engine, not a mock-up.
Neon Pulse caption style
Neon Pulse is a free animated caption style for captions.js: Amatic SC black, the spoken word in #5fffb0, with the "slide-up" word animation at the bottom of the frame. Use it live in the browser or burn it into an MP4 with FFmpeg.
Use it
import captionsjs, { getPreset } from "captions.js";
captionsjs({
video: document.querySelector("video")!,
captions, // word timings: see the Whisper and Deepgram guides
preset: getPreset("Neon Pulse"),
});npx captions.js burn video.mp4 words.json --preset "Neon Pulse"No servers? Render it through the captions.js Cloud API (early access).
import { burnCaptions } from "@captionsjs/server";
await burnCaptions({ video: "video.mp4", captions: "words.json", preset: "Neon Pulse" });Style details
| Font | Amatic SC, black |
|---|---|
| Case | As spoken |
| Text color | #d7fbff |
| Active word | #5fffb0 |
| Outline | #091319 |
| Shadow | #001c2f |
| Animation | slide-up |
| Position | bottom |
| Lines on screen | 2 |
Slide up: Lines rise into place from below, a soft cinematic entrance.
Make it yours
A preset is a plain object. Clone it and change colors, font or animation; the browser and the FFmpeg render both take the result.
const base = getPreset("Neon Pulse");
const mine = {
...base,
captionsSettings: {
...base.captionsSettings,
style: { ...base.captionsSettings.style, highlightColor: "#ff2e88" },
},
};
