Frosted Glass Wipe

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { ReactNode, CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const DefaultPanel = ({ label, color }: { label: string; color: string }) => (
10  <div
11    style={{
12      alignItems: "center",
13      background: color,
14      color: "white",
15      display: "flex",
16      fontFamily: FONT_FAMILY,
17      fontSize: 96,
18      fontWeight: 700,
19      inset: 0,
20      justifyContent: "center",
21      letterSpacing: "-0.05em",
22      position: "absolute",
23    }}
24  >
25    {label}
26  </div>
27);
28 
29export interface FrostedGlassWipeProps {
30  from?: ReactNode;
31  to?: ReactNode;
32  transitionStart?: number;
33  transitionDuration?: number;
34  glassBlur?: number;
35  speed?: number;
36  fps?: number;
37  durationInFrames?: number;
38  width?: number;
39  height?: number;
40  background?: string;
41  className?: string;
42}
43 
44export const FrostedGlassWipe = ({
45  from,
46  to,
47  transitionStart = 36,
48  transitionDuration = 30,
49  glassBlur = 24,
50  speed = 1,
51  fps = 30,
52  durationInFrames = 90,
53  width = 1280,
54  height = 720,
55  background = "black",
56  className,
57}: FrostedGlassWipeProps) => {
58  const safeSpeed = Math.max(0.01, speed);
59  const durationMs = (durationInFrames / fps) * 1000;
60  const frameMs = 1000 / fps;
61  const startMs = transitionStart * frameMs;
62  const durationMsCalc = (transitionDuration * frameMs) / safeSpeed;
63 
64  const fromContent = from ?? <DefaultPanel label="Scene A" color="#0ea5e9" />;
65  const toContent = to ?? <DefaultPanel label="Scene B" color="#9333ea" />;
66 
67  const containerStyle: CSSProperties = {
68    background,
69    height,
70    overflow: "hidden",
71    position: "relative",
72    width,
73  };
74 
75  return (
76    <Timegroup
77      className={className}
78      duration={`${durationMs}ms`}
79      mode="fixed"
80      style={containerStyle}
81    >
82      <>
83        <style>{`
84          @keyframes framecn-frosted-glass {
85            from { transform: translateX(-110%); }
86            to { transform: translateX(110%); }
87          }
88          @keyframes framecn-frosted-show {
89            from { opacity: 0; }
90            to { opacity: 1; }
91          }
92        `}</style>
93        <div style={{ inset: 0, position: "absolute" }}>{fromContent}</div>
94        <div
95          style={{
96            animation: `framecn-frosted-show 1ms linear ${startMs + durationMsCalc / 2}ms forwards`,
97            inset: 0,
98            position: "absolute",
99          }}
100        >
101// … truncated