Directional 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 DirectionalWipeProps {
30  from?: ReactNode;
31  to?: ReactNode;
32  direction?: "left" | "right" | "up" | "down";
33  transitionStart?: number;
34  transitionDuration?: 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 DirectionalWipe = ({
45  from,
46  to,
47  direction = "left",
48  transitionStart = 36,
49  transitionDuration = 20,
50  speed = 1,
51  fps = 30,
52  durationInFrames = 90,
53  width = 1280,
54  height = 720,
55  background = "black",
56  className,
57}: DirectionalWipeProps) => {
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 axis: "x" | "y" =
65    direction === "left" || direction === "right" ? "x" : "y";
66  const sign = direction === "left" || direction === "up" ? -1 : 1;
67 
68  const fromContent = from ?? <DefaultPanel label="Scene A" color="#0ea5e9" />;
69  const toContent = to ?? <DefaultPanel label="Scene B" color="#9333ea" />;
70 
71  const containerStyle: CSSProperties = {
72    background,
73    height,
74    overflow: "hidden",
75    position: "relative",
76    width,
77  };
78 
79  return (
80    <Timegroup
81      className={className}
82      duration={`${durationMs}ms`}
83      mode="fixed"
84      style={containerStyle}
85    >
86      <>
87        <style>{`
88          @keyframes framecn-dir-wipe-from {
89            from { transform: translateX(0%); }
90            to { transform: translateX(${sign * 100}%); }
91          }
92          @keyframes framecn-dir-wipe-to {
93            from { transform: translateX(${-sign * 100}%); }
94            to { transform: translateX(0%); }
95          }
96          @keyframes framecn-dir-wipe-from-y {
97// … truncated