matrix-decode

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3 
4export type MatrixDecodeProps = {
5  text: string;
6  durationInFrames?: number;
7  delayInFrames?: number;
8  fontSize?: number;
9  color?: string;
10  fontWeight?: number;
11  fontFamily?: string;
12};
13 
14const GLYPHS = "アイウエオカキクケコサシスセソ0123456789";
15 
16function scrambleChar(target: string, progress: number, index: number): string {
17  if (progress >= 1) return target;
18  const resolved = Math.floor(progress * target.length);
19  if (index < resolved) return target[index] ?? "";
20  const seed = (index * 17 + Math.floor(progress * 40)) % GLYPHS.length;
21  return GLYPHS[seed] ?? target;
22}
23 
24export const MatrixDecode: React.FC<MatrixDecodeProps> = ({
25  text,
26  durationInFrames = 50,
27  delayInFrames = 0,
28  fontSize: fontSizeProp,
29  color = "#2dd4bf",
30  fontWeight = 600,
31  fontFamily,
32}) => {
33  const frame = useCurrentFrame();
34  const { width } = useVideoConfig();
35  const fontSize = fontSizeProp ?? scaleFont(72, width);
36  const progress = interpolate(
37    frame,
38    [delayInFrames, delayInFrames + durationInFrames],
39    [0, 1],
40    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
41  );
42  const decoded = Array.from(text, (char, index) =>
43    char === " " ? " " : scrambleChar(char, progress, index),
44  ).join("");
45 
46  return (
47    <span
48      style={{
49        fontSize,
50        fontWeight,
51        color,
52        lineHeight: 1.2,
53        fontFamily: fontFamily ?? "ui-monospace, monospace",
54      }}
55    >
56      {decoded}
57    </span>
58  );
59};