Social
Social
Captions: Neon
Captions where the spoken word glows in the accent color.
Install
Usage
<CaptionsNeon captions={captions} />Props
| Name | Type | Default | Description |
|---|---|---|---|
style? | CSSProperties | — | |
className? | string | — | |
captions | Caption[] | — | Word-level captions, as `@remotion/captions` defines them. `pnpm reelcn-transcribe` writes this shape. |
size? | number | — | Font size in design units; long pages shrink from here. |
color? | string | — | |
pageMs? | number | — | How much speech goes on one page, in milliseconds. Lower means fewer words at a time. |
maxWords? | number | — | Hard cap on words per page; long pages are split. |
emphasize? | string[] | — | Words painted in the emphasis color. Case and punctuation are ignored. |
position? | "auto" | "top" | "bottom" | "middle" | — | `auto` sits above the platform UI in portrait and in the lower third elsewhere. |
activeColor? | string | — | |
emphasisColor? | string | — | |
background? | string | — |
Use
- Night-time and club footage, music clips
Avoid
- Corporate or documentary footage — use
captions-minimal
Dependencies
Source
registry/items/captions-neon.tsx
/**
* @title Captions: Neon
* @category social
* @description Captions where the spoken word glows in the accent color.
* @duration data-driven
* @preset captions
* @use Night-time and club footage, music clips
* @avoid Corporate or documentary footage — use `captions-minimal`
* @tags captions, neon, glow, music
* @example
* <CaptionsNeon captions={captions} />
*/
import { Captions, type CaptionsProps } from "./captions";
export type CaptionsNeonProps = Omit<CaptionsProps, "variant">;
export function CaptionsNeon(props: CaptionsNeonProps) {
return <Captions {...props} variant="neon" />;
}