Caption Kinetic Slam

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 CaptionKineticSlamProps {
13  words?: CaptionWord[];
14  color?: string;
15  fontSize?: number;
16  fontWeight?: number | string;
17  background?: string;
18  speed?: number;
19  fps?: number;
20  durationInFrames?: number;
21  width?: number;
22  height?: number;
23  className?: string;
24}
25 
26const DEFAULT_WORDS: CaptionWord[] = [
27  { end: 0.35, start: 0, text: "Every" },
28  { end: 0.65, start: 0.35, text: "great" },
29  { end: 1, start: 0.65, text: "video" },
30  { end: 1.45, start: 1.1, text: "starts" },
31  { end: 1.65, start: 1.45, text: "with" },
32  { end: 1.8, start: 1.65, text: "a" },
33  { end: 2.15, start: 1.8, text: "single" },
34  { end: 2.7, start: 2.15, text: "frame." },
35  { end: 3.2, start: 3, text: "No" },
36  { end: 3.9, start: 3.2, text: "timelines." },
37  { end: 4.2, start: 4, text: "No" },
38  { end: 4.5, start: 4.2, text: "drag" },
39  { end: 4.65, start: 4.5, text: "and" },
40  { end: 5.1, start: 4.65, text: "drop." },
41  { end: 5.55, start: 5.3, text: "Just" },
42  { end: 6, start: 5.55, text: "code." },
43];
44 
45const IN_DURATION = 220;
46const OUT_DURATION = 140;
47 
48export const CaptionKineticSlam = ({
49  words = DEFAULT_WORDS,
50  color = "#ffffff",
51  fontSize = 120,
52  fontWeight = 900,
53  background = "#0a0a0a",
54  speed = 1,
55  fps = 30,
56  durationInFrames = 180,
57  width = 1280,
58  height = 720,
59  className,
60}: CaptionKineticSlamProps) => {
61  const safeSpeed = Math.max(0.01, speed);
62  const durationMs = (durationInFrames / fps) * 1000;
63 
64  const containerStyle: CSSProperties = {
65    alignItems: "center",
66    background,
67    display: "flex",
68    height,
69    justifyContent: "center",
70    overflow: "hidden",
71    position: "relative",
72    width,
73  };
74 
75  return (
76    <Timegroup
77      className={className}
78      duration={`${durationMs}ms`}
79      mode="fixed"
80      style={containerStyle}
81    >
82      <>
83        <style>{`
84          @keyframes framecn-ks-in {
85            0%   { opacity: 0; transform: translateY(-56px) scale(1.45); }
86            60%  { opacity: 1; }
87            100% { opacity: 1; transform: translateY(0) scale(1); }
88          }
89          @keyframes framecn-ks-out {
90            from { opacity: 1; transform: scale(1); }
91            to   { opacity: 0; transform: scale(0.82); }
92          }
93        `}</style>
94        {words.map((word, i) => {
95// … truncated