rgb-glitch-text

1import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3 
4export type RgbGlitchTextProps = {
5  text: string;
6  delayInFrames?: number;
7  durationInFrames?: number;
8  glitchStartFrame?: number;
9  glitchDurationInFrames?: number;
10  fontSize?: number;
11  color?: string;
12  fontWeight?: number;
13  fontFamily?: string;
14  redChannelColor?: string;
15  cyanChannelColor?: string;
16  accentColor?: string;
17  glowColor?: string;
18  intensity?: number;
19  sliceCount?: number;
20  maxWidth?: number | string;
21  textAlign?: React.CSSProperties["textAlign"];
22};
23 
24const DEFAULT_RED = "#f472b6";
25const DEFAULT_CYAN = "#2dd4bf";
26const DEFAULT_ACCENT = "#e8b86d";
27const DEFAULT_FONT_FAMILY =
28  "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
29 
30function clamp(value: number, min: number, max: number) {
31  return Math.min(max, Math.max(min, value));
32}
33 
34function pulse(frame: number, start: number, duration: number) {
35  return interpolate(
36    frame,
37    [start, start + duration * 0.45, start + duration],
38    [0, 1, 0],
39    {
40      extrapolateLeft: "clamp",
41      extrapolateRight: "clamp",
42      easing: Easing.bezier(0.16, 1, 0.3, 1),
43    },
44  );
45}
46 
47function sliceOffset(index: number, burst: number, amplitude: number) {
48  const direction = index % 2 === 0 ? 1 : -1;
49  const variance = 0.52 + ((index * 37) % 41) / 100;
50  return direction * burst * amplitude * variance;
51}
52 
53export const RgbGlitchText: React.FC<RgbGlitchTextProps> = ({
54  text,
55  delayInFrames = 0,
56  durationInFrames,
57  glitchStartFrame,
58  glitchDurationInFrames,
59  fontSize: fontSizeProp,
60  color = "#f4f4f5",
61  fontWeight = 800,
62  fontFamily,
63  redChannelColor = DEFAULT_RED,
64  cyanChannelColor = DEFAULT_CYAN,
65  accentColor = DEFAULT_ACCENT,
66  glowColor = "rgba(232,184,109,0.3)",
67  intensity = 1,
68  sliceCount = 5,
69  maxWidth,
70  textAlign = "center",
71}) => {
72  const frame = useCurrentFrame();
73  const { width } = useVideoConfig();
74  const fontSize = fontSizeProp ?? scaleFont(92, width);
75  const start = glitchStartFrame ?? delayInFrames + 10;
76  const duration = Math.max(6, glitchDurationInFrames ?? durationInFrames ?? 30);
77  const localFrame = frame - start;
78  const safeIntensity = clamp(intensity, 0, 2);
79  const normalizedSliceCount = clamp(Math.round(sliceCount), 3, 9);
80  const slices = Array.from({ length: normalizedSliceCount }, (_, index) => index);
81 
82  const firstBurst = pulse(localFrame, 0, duration * 0.34);
83// … truncated