{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-generation-canvas",
  "title": "AI Generation Canvas",
  "description": "A prompt input transforms into a header, then a skeleton dashboard flips into populated cards.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/ai-generation-canvas/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface AIGenerationCanvasProps {\n  prompt?: string;\n  accentColor?: string;\n  cardCount?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nfunction MiniBarChart({ accentColor }: { accentColor: string }) {\n  const bars = [0.4, 0.7, 0.55, 0.85, 0.5, 0.95, 0.65];\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"flex-end\",\n        gap: 6,\n        height: 60,\n        marginTop: 12,\n      }}\n    >\n      {bars.map((h, i) => (\n        <div\n          key={i}\n          style={{\n            flex: 1,\n            height: `${h * 100}%`,\n            background: accentColor,\n            borderRadius: 3,\n            opacity: 0.3 + h * 0.7,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction MiniRows() {\n  return (\n    <div\n      style={{\n        marginTop: 12,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 6,\n      }}\n    >\n      {[0.9, 0.7, 0.85, 0.6].map((w, i) => (\n        <div\n          key={i}\n          style={{\n            height: 8,\n            width: `${w * 100}%`,\n            background: \"rgba(255,255,255,0.12)\",\n            borderRadius: 4,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction StatBlock({\n  accentColor,\n  value,\n}: {\n  accentColor: string;\n  value: string;\n}) {\n  return (\n    <div style={{ marginTop: 8 }}>\n      <div\n        style={{\n          fontSize: 36,\n          fontWeight: 700,\n          color: \"white\",\n          letterSpacing: \"-0.03em\",\n          fontFamily: FONT_FAMILY,\n        }}\n      >\n        {value}\n      </div>\n      <div\n        style={{\n          fontSize: 12,\n          color: accentColor,\n          marginTop: 2,\n          fontWeight: 500,\n        }}\n      >\n        +12.4% this week\n      </div>\n    </div>\n  );\n}\n\nfunction CardContent({\n  index,\n  accentColor,\n}: {\n  index: number;\n  accentColor: string;\n}) {\n  const titles = [\n    \"Revenue\",\n    \"Active Users\",\n    \"Sessions\",\n    \"Conversion\",\n    \"Retention\",\n    \"Latency\",\n  ];\n  const values = [\"$48.2k\", \"12,840\", \"9.1k\", \"3.8%\", \"76%\", \"142ms\"];\n  const variant = index % 3;\n  return (\n    <div style={{ width: \"100%\", height: \"100%\", padding: 18 }}>\n      <div\n        style={{\n          fontSize: 12,\n          color: \"rgba(255,255,255,0.55)\",\n          fontWeight: 500,\n          fontFamily: FONT_FAMILY,\n          letterSpacing: \"0.02em\",\n          textTransform: \"uppercase\",\n        }}\n      >\n        {titles[index % titles.length]}\n      </div>\n      {variant === 0 ? (\n        <>\n          <StatBlock\n            accentColor={accentColor}\n            value={values[index % values.length]}\n          />\n          <MiniBarChart accentColor={accentColor} />\n        </>\n      ) : variant === 1 ? (\n        <>\n          <StatBlock\n            accentColor={accentColor}\n            value={values[index % values.length]}\n          />\n          <MiniRows />\n        </>\n      ) : (\n        <>\n          <MiniBarChart accentColor={accentColor} />\n          <MiniRows />\n        </>\n      )}\n    </div>\n  );\n}\n\nexport function AIGenerationCanvas({\n  prompt = \"Generate a dashboard\",\n  accentColor = \"#7c3aed\",\n  cardCount = 4,\n  speed = 1,\n  className,\n}: AIGenerationCanvasProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // Phase boundaries\n  const P1_END = 40;\n  const P2_END = 70;\n  const P3_END = 100;\n\n  // Phase 1: typewriter\n  const charCount = Math.floor(\n    interpolate(frame, [4, P1_END - 2], [0, prompt.length], {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    }),\n  );\n  const typedText = prompt.substring(0, charCount);\n  const cursorVisible = Math.floor(frame / 12) % 2 === 0;\n\n  // Phase 2: input -> header transform\n  const transformProgress = spring({\n    frame: frame - P1_END,\n    fps,\n    config: { mass: 1, damping: 16, stiffness: 110 },\n    durationInFrames: 30,\n  });\n\n  // Centered input dimensions\n  const inputCenteredW = 640;\n  const inputCenteredH = 80;\n  const headerW = 1200;\n  const headerH = 56;\n  const inputW = interpolate(\n    transformProgress,\n    [0, 1],\n    [inputCenteredW, headerW],\n  );\n  const inputH = interpolate(\n    transformProgress,\n    [0, 1],\n    [inputCenteredH, headerH],\n  );\n  const inputTop = interpolate(transformProgress, [0, 1], [320, 40]);\n  const inputRadius = interpolate(transformProgress, [0, 1], [16, 12]);\n  const inputFontSize = interpolate(transformProgress, [0, 1], [24, 14]);\n\n  // Phase 3: skeleton fade\n  const skeletonOpacity = interpolate(frame, [P2_END, P3_END], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // Shimmer position\n  const shimmerPos = ((frame * 1.5) % 200) - 50;\n\n  // Phase 4: card flip reveal (after frame 100)\n  const cards = Array.from({ length: cardCount });\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"#0a0a0a\",\n        overflow: \"hidden\",\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      {/* subtle grid backdrop */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          backgroundImage:\n            \"linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)\",\n          backgroundSize: \"40px 40px\",\n          maskImage:\n            \"radial-gradient(ellipse at center, black 40%, transparent 80%)\",\n        }}\n      />\n\n      {/* Skeleton + content cards grid (Phase 3 onward) */}\n      {frame > P2_END && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: 130,\n            left: 40,\n            right: 40,\n            bottom: 40,\n            display: \"grid\",\n            gridTemplateColumns: `repeat(${Math.min(cardCount, 4)}, 1fr)`,\n            gap: 20,\n          }}\n        >\n          {cards.map((_, i) => {\n            const cardStart = P3_END + i * 8;\n            const flipProgress = spring({\n              frame: frame - cardStart,\n              fps,\n              config: { mass: 0.9, damping: 14, stiffness: 100 },\n              durationInFrames: 30,\n            });\n            const rotation = interpolate(flipProgress, [0, 1], [0, 180]);\n            const showSkeleton = rotation < 90;\n\n            return (\n              <div\n                key={i}\n                style={{\n                  position: \"relative\",\n                  perspective: 1200,\n                  opacity: skeletonOpacity,\n                }}\n              >\n                <div\n                  style={{\n                    position: \"relative\",\n                    width: \"100%\",\n                    height: \"100%\",\n                    transformStyle: \"preserve-3d\",\n                    transform: `rotateY(${rotation}deg)`,\n                  }}\n                >\n                  {/* Skeleton face */}\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      inset: 0,\n                      background: \"#141416\",\n                      border: \"1px solid rgba(255,255,255,0.06)\",\n                      borderRadius: 14,\n                      backfaceVisibility: \"hidden\",\n                      overflow: \"hidden\",\n                      visibility: showSkeleton ? \"visible\" : \"hidden\",\n                    }}\n                  >\n                    {/* shimmer overlay */}\n                    <div\n                      style={{\n                        position: \"absolute\",\n                        inset: 0,\n                        background: `linear-gradient(110deg, transparent 0%, transparent ${shimmerPos}%, ${accentColor}22 ${shimmerPos + 15}%, transparent ${shimmerPos + 30}%)`,\n                      }}\n                    />\n                    <div style={{ padding: 18 }}>\n                      <div\n                        style={{\n                          width: \"40%\",\n                          height: 10,\n                          background: \"rgba(255,255,255,0.08)\",\n                          borderRadius: 4,\n                        }}\n                      />\n                      <div\n                        style={{\n                          width: \"70%\",\n                          height: 28,\n                          background: \"rgba(255,255,255,0.08)\",\n                          borderRadius: 6,\n                          marginTop: 14,\n                        }}\n                      />\n                      <div\n                        style={{\n                          width: \"100%\",\n                          height: 60,\n                          background: \"rgba(255,255,255,0.05)\",\n                          borderRadius: 6,\n                          marginTop: 16,\n                        }}\n                      />\n                    </div>\n                  </div>\n                  {/* Content face */}\n                  <div\n                    style={{\n                      position: \"absolute\",\n                      inset: 0,\n                      background: \"#141416\",\n                      border: `1px solid ${accentColor}33`,\n                      borderRadius: 14,\n                      backfaceVisibility: \"hidden\",\n                      transform: \"rotateY(180deg)\",\n                      overflow: \"hidden\",\n                      boxShadow: `0 0 0 1px ${accentColor}22, 0 20px 40px rgba(0,0,0,0.4)`,\n                    }}\n                  >\n                    <CardContent index={i} accentColor={accentColor} />\n                  </div>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      {/* Prompt input — centered then transforms to header */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: inputTop,\n          width: inputW,\n          height: inputH,\n          marginLeft: -inputW / 2,\n          background: \"rgba(20,20,22,0.85)\",\n          border: `1px solid ${accentColor}55`,\n          borderRadius: inputRadius,\n          backdropFilter: \"blur(12px)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          padding: \"0 20px\",\n          boxShadow:\n            transformProgress < 0.5\n              ? `0 0 0 6px ${accentColor}11, 0 30px 80px rgba(0,0,0,0.6)`\n              : \"0 8px 24px rgba(0,0,0,0.4)\",\n        }}\n      >\n        {/* sparkle icon */}\n        <div\n          style={{\n            width: 20,\n            height: 20,\n            marginRight: 12,\n            color: accentColor,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            flexShrink: 0,\n          }}\n        >\n          <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"currentColor\">\n            <path d=\"M12 2l2.5 6.5L21 11l-6.5 2.5L12 20l-2.5-6.5L3 11l6.5-2.5L12 2z\" />\n          </svg>\n        </div>\n        <div\n          style={{\n            color: \"white\",\n            fontSize: inputFontSize,\n            fontWeight: 500,\n            letterSpacing: \"-0.01em\",\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n          }}\n        >\n          {typedText}\n          {frame < P1_END && cursorVisible && (\n            <span\n              style={{\n                display: \"inline-block\",\n                width: 2,\n                height: inputFontSize,\n                background: accentColor,\n                marginLeft: 2,\n                verticalAlign: \"middle\",\n              }}\n            />\n          )}\n        </div>\n        {transformProgress > 0.6 && (\n          <div\n            style={{\n              marginLeft: \"auto\",\n              display: \"flex\",\n              gap: 8,\n              alignItems: \"center\",\n              opacity: (transformProgress - 0.6) / 0.4,\n            }}\n          >\n            <div\n              style={{\n                width: 8,\n                height: 8,\n                borderRadius: 4,\n                background: accentColor,\n                boxShadow: `0 0 12px ${accentColor}`,\n              }}\n            />\n            <div\n              style={{\n                fontSize: 12,\n                color: \"rgba(255,255,255,0.6)\",\n                fontWeight: 500,\n              }}\n            >\n              Generating\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/ai-generation-canvas.tsx"
    }
  ],
  "type": "registry:component"
}