AI Generate Overlay

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface AIGenerateOverlayProps {
7  maxBlur?: number;
8  blurStartFrame?: number;
9  blurPeakFrame?: number;
10  revealStartFrame?: number;
11  pillText?: string;
12  accent?: string;
13  background?: string;
14  sourceImageBg?: string;
15  generatedImageBg?: string;
16  dotColor?: string;
17  dotSize?: number;
18  dotSpacing?: number;
19  speed?: number;
20  fps?: number;
21  durationInFrames?: number;
22  className?: string;
23}
24 
25const FONT_FAMILY =
26  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
27 
28const DEFAULT_SOURCE_BG =
29  "linear-gradient(135deg, #6b3a1a 0%, #d4a574 50%, #8b4513 100%)";
30 
31const DEFAULT_GENERATED_BG =
32  "radial-gradient(ellipse at center, #d4a574 0%, #8b4513 22%, #2a1a10 42%), linear-gradient(180deg, #1a1410 0%, #0a0806 50%, #1a1410 100%)";
33 
34const hexWithAlpha = (hex: string, alpha: number): string => {
35  const m = /^#([0-9a-f]{6})$/i.exec(hex);
36  if (!m) {
37    return hex;
38  }
39  const int = Number.parseInt(m[1], 16);
40  /* eslint-disable no-bitwise */
41  const r = (int >> 16) & 255;
42  const g = (int >> 8) & 255;
43  const b = int & 255;
44  /* eslint-enable no-bitwise */
45  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
46};
47 
48export const AIGenerateOverlay = ({
49  maxBlur = 20,
50  blurStartFrame = 20,
51  blurPeakFrame = 40,
52  revealStartFrame = 110,
53  pillText = "Generating…",
54  accent = "#a78bfa",
55  background = "#050505",
56  sourceImageBg = DEFAULT_SOURCE_BG,
57  generatedImageBg = DEFAULT_GENERATED_BG,
58  dotColor = "#ffffff",
59  dotSize = 1.2,
60  dotSpacing = 20,
61  speed = 1,
62  fps = 30,
63  durationInFrames = 150,
64  className,
65}: AIGenerateOverlayProps) => {
66  const safeSpeed = Math.max(0.01, speed);
67  const durationMs = ((durationInFrames / fps) * 1000) / safeSpeed;
68 
69  const blurStartPercent = (blurStartFrame / durationInFrames) * 100;
70  const blurPeakPercent = (blurPeakFrame / durationInFrames) * 100;
71  const revealStartPercent = (revealStartFrame / durationInFrames) * 100;
72 
73  const style = {
74    background,
75    fontFamily: FONT_FAMILY,
76    height: "100%",
77    position: "relative",
78    width: "100%",
79  } as CSSProperties;
80 
81  return (
82    <Timegroup
83      className={className}
84      duration={`${durationMs}ms`}
85      mode="fixed"
86      style={style}
87    >
88      <>
89        <style>{`
90          @keyframes framecn-ai-overlay-blur {
91            from {
92              filter: blur(0px) scale(1.06);
93              opacity: 1;
94            }
95// … truncated