Chromatic Aberration Wipe

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