Kinetic Type Mask

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { ReactNode, CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const DefaultPanel = ({ label, color }: { label: string; color: string }) => (
10  <div
11    style={{
12      alignItems: "center",
13      background: color,
14      color: "white",
15      display: "flex",
16      fontFamily: FONT_FAMILY,
17      fontSize: 96,
18      fontWeight: 700,
19      inset: 0,
20      justifyContent: "center",
21      letterSpacing: "-0.05em",
22      position: "absolute",
23    }}
24  >
25    {label}
26  </div>
27);
28 
29export interface KineticTypeMaskProps {
30  from?: ReactNode;
31  to?: ReactNode;
32  text?: string;
33  transitionStart?: number;
34  holdFrames?: number;
35  transitionDuration?: number;
36  maxScale?: number;
37  speed?: number;
38  fps?: number;
39  durationInFrames?: number;
40  width?: number;
41  height?: number;
42  className?: string;
43}
44 
45export const KineticTypeMask = ({
46  from,
47  to,
48  text = "NEXT",
49  transitionStart,
50  holdFrames = 12,
51  transitionDuration = 24,
52  maxScale = 120,
53  speed = 1,
54  fps = 30,
55  durationInFrames = 90,
56  width = 1280,
57  height = 720,
58  className,
59}: KineticTypeMaskProps) => {
60  const safeSpeed = Math.max(0.01, speed);
61  const durationMs = (durationInFrames / fps) * 1000;
62  const frameMs = 1000 / fps;
63 
64  const startMs =
65    (transitionStart ?? Math.floor(durationInFrames * 0.3)) * frameMs;
66  const scaleStartMs = (startMs + holdFrames * frameMs) / safeSpeed;
67  const scaleDurationMs = (transitionDuration * frameMs) / safeSpeed;
68 
69  const fromContent = from ?? <DefaultPanel label="Scene A" color="#0f172a" />;
70  const toContent = to ?? <DefaultPanel label="Scene B" color="#f97316" />;
71 
72  const containerStyle: CSSProperties = {
73    background: "black",
74    height,
75    overflow: "hidden",
76    position: "relative",
77    width,
78  };
79 
80  return (
81    <Timegroup
82      className={className}
83      duration={`${durationMs}ms`}
84      mode="fixed"
85      style={containerStyle}
86    >
87      <>
88        <style>{`
89          @keyframes framecn-kinetic-mask-text {
90            0% { transform: scale(1); }
91            100% { transform: scale(${maxScale}); }
92          }
93          @keyframes framecn-kinetic-mask-reveal {
94            from { clip-path: inset(0 0 0 0); }
95            to { clip-path: inset(0 0 0 0); }
96          }
97          @keyframes framecn-kinetic-scene {
98            from { opacity: 0; }
99            to { opacity: 1; }
100          }
101// … truncated