reelcn
GitHubBack to landing

Captions: bold pop

Heavy centered captions where the spoken word grows and lifts.

A preset of Captions.

CaptionsBoldPop, defaults
CaptionsBoldPop, defaults thumbnail, 16:9

Installation

npx shadcn add https://www.reelcn.dev/r/captions-bold-pop.json

Files land in src/reelcn/ with the items it builds on.

Usage

<CaptionsBoldPop captions={captions} emphasize={["free"]} />

Props

PropTypeDescription
styleCSSProperties
classNamestring
captions*Caption[]Word-level captions, as `@remotion/captions` defines them. `pnpm reelcn-transcribe` writes this shape.
sizenumberFont size in design units; long pages shrink from here.
colorstring
pageMsnumberHow much speech goes on one page, in milliseconds. Lower means fewer words at a time.
maxWordsnumberHard cap on words per page; long pages are split.
emphasizestring[]Words painted in the emphasis color. Case and punctuation are ignored.
position"auto" | "top" | "middle" | "bottom"auto sits above the platform UI in portrait and in the lower third elsewhere.
activeColorstring
emphasisColorstring
backgroundstring

Built from

Use

  • Shorts and reels that need captions to carry the edit

Guides

Components take their colors from a theme, their timing from motion props and their layout from the canvas.

Source

registry/items/captions-bold-pop.tsx
/**
 * @title Captions: Bold Pop
 * @category social
 * @description Heavy centered captions where the spoken word grows and lifts.
 * @duration data-driven
 * @preset captions
 * @use Shorts and reels that need captions to carry the edit
 * @tags captions, shorts, bold
 * @example
 * <CaptionsBoldPop captions={captions} emphasize={["free"]} />
 */
import { Captions, type CaptionsProps } from "./captions";

export type CaptionsBoldPopProps = Omit<CaptionsProps, "variant">;

export function CaptionsBoldPop(props: CaptionsBoldPopProps) {
  return <Captions {...props} variant="bold-pop" />;
}

On this page