ai-generation-canvas

1import { loadFont } from "@remotion/google-fonts/Inter";
2import {
3  AbsoluteFill,
4  Easing,
5  interpolate,
6  spring,
7  useCurrentFrame,
8  useVideoConfig,
9} from "remotion";
10import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
11import { EASING } from "@/remotion/lib/motion-tokens";
12 
13const { fontFamily } = loadFont("normal", {
14  weights: ["500", "600", "700"],
15  subsets: ["latin"],
16});
17 
18/** Frames over which the whole canvas fades out at the end of the demo. */
19const EXIT_DURATION = 22;
20const DEMO_BG = "#080810";
21 
22export type AiGenerationMetric = {
23  label: string;
24  value: string;
25  delta?: string;
26};
27 
28export type AiGenerationCanvasProps = {
29  prompt?: string;
30  accentColor?: string;
31  cardCount?: number;
32  metrics?: AiGenerationMetric[];
33  eyebrow?: string;
34  statusLabel?: string;
35  speed?: number;
36};
37 
38const DEFAULT_METRICS: AiGenerationMetric[] = [
39  { label: "Revenue", value: "$48.2k", delta: "+12.4%" },
40  { label: "Active users", value: "12,840", delta: "+18.1%" },
41  { label: "Sessions", value: "9.1k", delta: "+8.7%" },
42  { label: "Conversion", value: "3.8%", delta: "+2.2%" },
43  { label: "Retention", value: "76%", delta: "+5.4%" },
44  { label: "Latency", value: "142ms", delta: "-11.8%" },
45];
46 
47function clamp(value: number, min: number, max: number) {
48  return Math.min(max, Math.max(min, value));
49}
50 
51function fittedPromptSize(prompt: string, width: number, isPortrait: boolean) {
52  const base = scaleFont(isPortrait ? 46 : 34, width);
53  const longCopyAdjustment = prompt.length > 56 ? 0.78 : prompt.length > 36 ? 0.88 : 1;
54  return Math.round(clamp(base * longCopyAdjustment, scaleFont(24, width), base));
55}
56 
57const SparkIcon: React.FC<{ size: number; color: string }> = ({ size, color }) => (
58  <svg viewBox="0 0 24 24" width={size} height={size} fill="none">
59    <path
60      d="M12 2.6l2.58 6.82L21.4 12l-6.82 2.58L12 21.4l-2.58-6.82L2.6 12l6.82-2.58L12 2.6z"
61      fill={color}
62    />
63  </svg>
64);
65 
66const MiniBarChart: React.FC<{
67  accentColor: string;
68  scale: number;
69  progress: number;
70}> = ({ accentColor, scale, progress }) => {
71  const bars = [0.42, 0.72, 0.56, 0.88, 0.5, 0.95, 0.66];
72 
73  return (
74    <div
75      style={{
76        display: "flex",
77        alignItems: "flex-end",
78        gap: 8 * scale,
79        height: 76 * scale,
80        marginTop: 18 * scale,
81      }}
82    >
83      {bars.map((height, index) => (
84        <div
85          key={index}
86          style={{
87            flex: 1,
88            height: `${height * progress * 100}%`,
89// … truncated