Active Pop

$ pnpm dlx shadcn@latest add @remocn/caption-active-pop

Usage

CaptionActivePop shows the whole page in the base colour. The word being spoken switches to activeColor and springs up to popScale, then eases back down and returns to the base colour once the next word takes over. The scale is a transform, so the neighbouring words never shift.

It renders only the text block, so place it inside your own AbsoluteFill. See Positioning for safe placements and Get a transcript for producing captions.json.

import { AbsoluteFill } from "remotion";
import { CaptionActivePop } from "@/components/remocn/caption-active-pop";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionActivePop captions={captions} />
  </AbsoluteFill>
);