Sportstime/marketing-videos/src/components/KineticText.tsx

import React from "react";
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { THEME } from "../theme";

type KineticTextProps = {
  words: string[];
  fontSize?: number;
  color?: string;
  delay?: number;
  staggerFrames?: number;
  textShadow?: string;
  textAlign?: "center" | "left" | "right";
  lineHeight?: number;
};

export const KineticText: React.FC<KineticTextProps> = ({
  words,
  fontSize = 72,
  color = THEME.colors.white,
  delay = 0,
  staggerFrames = 3,
  textShadow = THEME.textShadow,
  textAlign = "center",
  lineHeight = 1.2,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: textAlign === "center" ? "center" : "flex-start",
        gap: `0 ${fontSize * 0.25}px`,
        fontFamily: THEME.font.heading,
        fontSize,
        fontWeight: 800,
        color,
        textShadow,
        lineHeight,
      }}
    >
      {words.map((word, i) => {
        const wordDelay = delay + i * staggerFrames;

        const entrance = spring({
          frame: frame - wordDelay,
          fps,
          config: { damping: 14, mass: 0.6, stiffness: 140 },
        });

        const opacity = interpolate(entrance, [0, 1], [0, 1]);
        const translateY = interpolate(entrance, [0, 1], [30, 0]);

        return (
          <span
            key={`${word}-${i}`}
            style={{
              display: "inline-block",
              opacity,
              transform: `translateY(${translateY}px)`,
            }}
          >
            {word}
          </span>
        );
      })}
    </div>
  );
};