AI Generation Canvas

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface AIGenerationCanvasProps {
7  prompt?: string;
8  accentColor?: string;
9  cardCount?: number;
10  speed?: number;
11  fps?: number;
12  durationInFrames?: number;
13  className?: string;
14}
15 
16const FONT_FAMILY =
17  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
18 
19const MiniBarChart = ({ accentColor }: { accentColor: string }) => {
20  const bars = [0.4, 0.7, 0.55, 0.85, 0.5, 0.95, 0.65];
21  return (
22    <div
23      style={{
24        alignItems: "flex-end",
25        display: "flex",
26        gap: 6,
27        height: 60,
28        marginTop: 12,
29      }}
30    >
31      {bars.map((h, i) => (
32        <div
33          key={i}
34          style={{
35            background: accentColor,
36            borderRadius: 3,
37            flex: 1,
38            height: `${h * 100}%`,
39            opacity: 0.3 + h * 0.7,
40          }}
41        />
42      ))}
43    </div>
44  );
45};
46 
47const MiniRows = () => (
48  <div
49    style={{
50      display: "flex",
51      flexDirection: "column",
52      gap: 6,
53      marginTop: 12,
54    }}
55  >
56    {[0.9, 0.7, 0.85, 0.6].map((w, i) => (
57      <div
58        key={i}
59        style={{
60          background: "rgba(255,255,255,0.12)",
61          borderRadius: 4,
62          height: 8,
63          width: `${w * 100}%`,
64        }}
65      />
66    ))}
67  </div>
68);
69 
70const StatBlock = ({
71  accentColor,
72  value,
73}: {
74  accentColor: string;
75  value: string;
76}) => (
77  <div style={{ marginTop: 8 }}>
78    <div
79      style={{
80        color: "white",
81        fontFamily: FONT_FAMILY,
82        fontSize: 36,
83        fontWeight: 700,
84        letterSpacing: "-0.03em",
85      }}
86    >
87      {value}
88    </div>
89    <div
90      style={{
91        color: accentColor,
92        fontSize: 12,
93        fontWeight: 500,
94        marginTop: 2,
95      }}
96    >
97      +12.4% this week
98    </div>
99  </div>
100);
101 
102const CardContent = ({
103  index,
104  accentColor,
105}: {
106  index: number;
107  accentColor: string;
108}) => {
109  const titles = [
110    "Revenue",
111    "Active Users",
112    "Sessions",
113    "Conversion",
114    "Retention",
115    "Latency",
116  ];
117  const values = ["$48.2k", "12,840", "9.1k", "3.8%", "76%", "142ms"];
118  const variant = index % 3;
119 
120  let content;
121  if (variant === 0) {
122    content = (
123      <>
124        <StatBlock
125          accentColor={accentColor}
126          value={values[index % values.length]}
127        />
128        <MiniBarChart accentColor={accentColor} />
129      </>
130    );
131  } else if (variant === 1) {
132// … truncated