Blur Out Up

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 BlurOutUpProps {
10  text?: string;
11  staggerDelay?: 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 BlurOutUp = ({
23  text = "Words fade and blur",
24  staggerDelay = 4,
25  fontSize = 72,
26  color = "#171717",
27  fontWeight = 600,
28  speed = 1,
29  fps = 30,
30  durationInFrames = 90,
31  background = "white",
32  className,
33}: BlurOutUpProps) => {
34  const durationMs = (durationInFrames / fps) * 1000;
35  const safeSpeed = Math.max(0.01, speed);
36  const frameMs = 1000 / fps;
37 
38  const enterMs = (17 * frameMs) / safeSpeed;
39  const exitMs = (14 * frameMs) / safeSpeed;
40  const staggerMs = (staggerDelay * frameMs) / safeSpeed;
41 
42  const words = text.split(" ");
43  const exitStartMs = Math.max(
44    0,
45    durationMs - exitMs - (words.length - 1) * staggerMs
46  );
47 
48  const containerStyle: CSSProperties = {
49    alignItems: "center",
50    background,
51    display: "flex",
52    inset: 0,
53    justifyContent: "center",
54    position: "absolute",
55  };
56 
57  return (
58    <Timegroup
59      className={className}
60      duration={`${durationMs}ms`}
61      mode="fixed"
62      style={containerStyle}
63    >
64      <>
65        <style>{`
66          @keyframes framecn-bou-in {
67            from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
68            to { opacity: 1; transform: translateY(0); filter: blur(0); }
69          }
70          @keyframes framecn-bou-out {
71            from { opacity: 1; transform: translateY(0); filter: blur(0); }
72            to { opacity: 0; transform: translateY(-14px); filter: blur(8px); }
73          }
74        `}</style>
75        <span
76          style={{
77            color,
78            fontFamily: FONT_FAMILY,
79            fontSize,
80            fontWeight,
81            letterSpacing: "-0.03em",
82          }}
83        >
84          {words.map((word, i) => (
85            <span
86              key={i}
87              style={{
88                animation: `framecn-bou-in ${enterMs}ms cubic-bezier(0.22,1,0.36,1) ${i * staggerMs}ms backwards, framecn-bou-out ${exitMs}ms cubic-bezier(0.64,0,0.78,0) ${exitStartMs + i * staggerMs}ms forwards`,
89                display: "inline-block",
90                marginRight: "0.25em",
91// … truncated