Changelog — Rolling Numbers

1"use client";
2 
3import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
4 
5export interface BlurRevealProps {
6  text: string;
7  className?: string;
8  blur?: number;
9  fontSize?: number;
10  color?: string;
11  fontWeight?: number;
12  speed?: number;
13}
14 
15export function BlurReveal({
16  text,
17  className,
18  blur = 10,
19  fontSize = 48,
20  color = "#171717",
21  fontWeight = 600,
22  speed = 1,
23}: BlurRevealProps) {
24  const frame = useCurrentFrame() * speed;
25  const { durationInFrames } = useVideoConfig();
26 
27  const opacity = interpolate(frame, [0, durationInFrames * 0.6], [0, 1], {
28    extrapolateRight: "clamp",
29  });
30 
31  const blurAmount = interpolate(
32    frame,
33    [0, durationInFrames * 0.6],
34    [blur, 0],
35    { extrapolateRight: "clamp" },
36  );
37 
38  return (
39    <div
40      style={{
41        position: "absolute",
42        inset: 0,
43        display: "flex",
44        alignItems: "center",
45        justifyContent: "center",
46        background: "transparent",
47      }}
48    >
49      <span
50        className={className}
51        style={{
52          opacity,
53          filter: `blur(${blurAmount}px)`,
54          fontSize,
55          fontWeight,
56          color,
57          letterSpacing: "-0.05em",
58          fontFamily:
59            "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
60        }}
61      >
62        {text}
63      </span>
64    </div>
65  );
66}