Emoji

An emoji pops up above a chosen word the moment it is spoken and stays until the phrase leaves

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-emoji

Usage

CaptionEmoji takes a timed transcript and a map from words to emoji, and 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.

Keys in emoji match whole spoken words, ignoring case and punctuation, so sound also fires on "Sound." in the transcript. The emoji sits above its word without moving the line, so keep pages to a single line — the default page window does — or an emoji on the second line will overlap the first.

import { AbsoluteFill } from "remotion";
import { CaptionEmoji } from "@/components/remocn/caption-emoji";
import captions from "./captions.json";
 
const emoji = {
  thing: "👀",
  lose: "📉",
  three: "⏱️",
  captions: "💬",
  sound: "🔇",
};
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionEmoji captions={captions} emoji={emoji} />
  </AbsoluteFill>
);

Props

Prop	Type	Default	Description
`captions`	`Caption[]`	`—`	The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
`emoji`	`Record<string, string>`	`{}`	Word to emoji. Matched per spoken word, ignoring case and punctuation.
`emojiSize`	`number`	`0.9`	Emoji size relative to the caption font size, in em.
`combineTokensWithinMilliseconds`	`number`	`1200`	How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
`holdMs`	`number`	`600`	How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold.
`fontSize`	`number`	`64`	Font size in pixels.
`fontWeight`	`number`	`800`	Font weight. The font itself is inherited.
`color`	`string`	`"#ffffff"`	Text colour.
`shadow`	`boolean`	`true`	A tight text shadow that keeps the caption legible over bright footage.
`className`	`string`	`—`	Classes for the text block — width, font family, `uppercase`.

Stamp

Plain captions where the words that matter slam down as a rubber stamp the moment they are spoken

Speaker

Dialogue captions where every phrase takes its speaker's colour, so a conversation reads like a script