Blur Reveal

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface BlurRevealProps {
7  text?: string;
8  className?: string;
9  blur?: number;
10  fontSize?: number;
11  color?: string;
12  fontWeight?: number;
13  speed?: number;
14  fps?: number;
15  durationInFrames?: number;
16  width?: number;
17  height?: number;
18  background?: string;
19}
20 
21export const BlurReveal = ({
22  text = "BlurReveal",
23  className,
24  blur = 10,
25  fontSize = 48,
26  color = "#171717",
27  fontWeight = 600,
28  speed = 1,
29  fps = 30,
30  durationInFrames = 90,
31  width = 1000,
32  height = 500,
33  background = "white",
34}: BlurRevealProps) => {
35  const safeSpeed = Math.max(0.01, speed);
36  const durationMs = (durationInFrames / fps) * 1000;
37  const revealDurationMs =
38    (((durationInFrames * 0.6) / fps) * 1000) / safeSpeed;
39 
40  const containerStyle: CSSProperties = {
41    alignItems: "center",
42    background,
43    display: "flex",
44    height,
45    justifyContent: "center",
46    overflow: "hidden",
47    position: "relative",
48    width,
49  };
50 
51  return (
52    <Timegroup
53      className={className}
54      duration={`${durationMs}ms`}
55      mode="fixed"
56      style={containerStyle}
57    >
58      <>
59        <style>{`
60          @keyframes framecn-blur-reveal {
61            from {
62              opacity: 0;
63              filter: blur(${blur}px);
64            }
65            to {
66              opacity: 1;
67              filter: blur(0px);
68            }
69          }
70        `}</style>
71        <span
72          style={{
73            animation: `framecn-blur-reveal ${revealDurationMs}ms cubic-bezier(0.16, 1, 0.3, 1) backwards`,
74            color,
75            fontFamily:
76              "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
77            fontSize,
78            fontWeight,
79            letterSpacing: "-0.05em",
80          }}
81        >
82          {text}
83        </span>
84      </>
85    </Timegroup>
86  );
87};