Caption Texture

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