Caption Emoji Pop

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface CaptionWord {
7  text: string;
8  start: number;
9  end: number;
10}
11 
12export interface CaptionEmojiPopProps {
13  words?: CaptionWord[];
14  color?: string;
15  accentColor?: string;
16  fontSize?: number;
17  fontWeight?: number | string;
18  background?: string;
19  speed?: number;
20  fps?: number;
21  durationInFrames?: number;
22  width?: number;
23  height?: number;
24  className?: string;
25}
26 
27const DEFAULT_WORDS: CaptionWord[] = [
28  { end: 0.35, start: 0, text: "Every" },
29  { end: 0.65, start: 0.35, text: "great" },
30  { end: 1, start: 0.65, text: "video" },
31  { end: 1.45, start: 1.1, text: "starts" },
32  { end: 1.65, start: 1.45, text: "with" },
33  { end: 1.8, start: 1.65, text: "a" },
34  { end: 2.15, start: 1.8, text: "single" },
35  { end: 2.7, start: 2.15, text: "frame." },
36  { end: 3.2, start: 3, text: "No" },
37  { end: 3.9, start: 3.2, text: "timelines." },
38  { end: 4.2, start: 4, text: "No" },
39  { end: 4.5, start: 4.2, text: "drag" },
40  { end: 4.65, start: 4.5, text: "and" },
41  { end: 5.1, start: 4.65, text: "drop." },
42  { end: 5.55, start: 5.3, text: "Just" },
43  { end: 6, start: 5.55, text: "code." },
44];
45 
46const WORDS_PER_GROUP = 3;
47 
48const EMOJI_MAP: Record<string, string> = {
49  "code.": "⌨️",
50  "drop.": "🔥",
51  "frame.": "🖼️",
52  "timelines.": "⏱️",
53  video: "📹",
54};
55 
56const ACCENT_WORDS = new Set([
57  "video",
58  "frame.",
59  "code.",
60  "timelines.",
61  "drop.",
62]);
63 
64export const CaptionEmojiPop = ({
65  words = DEFAULT_WORDS,
66  color = "#ffffff",
67  accentColor = "#FF76FF",
68  fontSize = 72,
69  fontWeight = 900,
70  background = "#0a0a0a",
71  speed = 1,
72  fps = 30,
73  durationInFrames = 180,
74  width = 1280,
75  height = 720,
76  className,
77}: CaptionEmojiPopProps) => {
78  const safeSpeed = Math.max(0.01, speed);
79  const durationMs = (durationInFrames / fps) * 1000;
80 
81  const groups = [];
82  for (let i = 0; i < words.length; i += WORDS_PER_GROUP) {
83    const groupWords = words.slice(i, i + WORDS_PER_GROUP);
84    const emoji =
85      groupWords.map((w) => EMOJI_MAP[w.text]).find(Boolean) ?? null;
86    groups.push({
87      emoji,
88      endMs: ((groupWords.at(-1)?.end ?? 0) * 1000) / safeSpeed + 180,
89      startMs: (groupWords[0].start * 1000) / safeSpeed,
90      words: groupWords,
91    });
92  }
93 
94  const containerStyle: CSSProperties = {
95    background,
96    height,
97    overflow: "hidden",
98    position: "relative",
99    width,
100  };
101 
102  return (
103    <Timegroup
104// … truncated