Focus Blur Resolve

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