{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "featured-color-panels",
  "title": "Color Panels Card",
  "description": "Pseudo-3D color panels shader (via @paper-design/shaders-react) — semi-transparent slabs rotating around a central axis. Up to 7 colors, density/angle/length/fade/blur/gradient controls. Generative, animated by default. Includes the shared title overlay API (titleText/titlePosition/titleSize/titleColor).",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/featured-color-panels/featured-color-panels.tsx",
      "content": "\"use client\";\n\nimport { ColorPanels } from \"@paper-design/shaders-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type TitlePosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"center-left\"\n  | \"center\"\n  | \"center-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nconst POSITION_CLASSES: Record<TitlePosition, string> = {\n  \"top-left\": \"items-start justify-start text-left\",\n  \"top-center\": \"items-start justify-center text-center\",\n  \"top-right\": \"items-start justify-end text-right\",\n  \"center-left\": \"items-center justify-start text-left\",\n  center: \"items-center justify-center text-center\",\n  \"center-right\": \"items-center justify-end text-right\",\n  \"bottom-left\": \"items-end justify-start text-left\",\n  \"bottom-center\": \"items-end justify-center text-center\",\n  \"bottom-right\": \"items-end justify-end text-right\",\n};\n\nexport type FeaturedColorPanelsProps = {\n  /** Up to 7 colors. */\n  colors?: string[];\n  /** Background color. */\n  colorBack?: string;\n  /** Angle between panels (0.25-7). */\n  density?: number;\n  /** Skew angle (-1 to 1). */\n  angle1?: number;\n  /** Skew angle (-1 to 1). */\n  angle2?: number;\n  /** Panel length relative to height (0-3). */\n  length?: number;\n  /** Color highlight on panel edges. */\n  edges?: boolean;\n  /** Side blur, 0 = sharp (0-0.5). */\n  blur?: number;\n  /** Transparency near central axis (0-1). */\n  fadeIn?: number;\n  /** Transparency near viewer (0-1). */\n  fadeOut?: number;\n  /** Color mixing within a panel, 0 = solid, 1 = gradient (0-1). */\n  gradient?: number;\n  /** Animation speed multiplier. 0 = static. */\n  speed?: number;\n  /** Zoom, 0.01-4. */\n  scale?: number;\n  /** Rotation in degrees, 0-360. */\n  rotation?: number;\n  /** Horizontal offset (-1 to 1). */\n  offsetX?: number;\n  /** Vertical offset (-1 to 1). */\n  offsetY?: number;\n  title?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  /** Where to anchor the title block. Default \"bottom-left\". */\n  titlePosition?: TitlePosition;\n  /** Title font size in px. Eyebrow scales proportionally. Default 30. */\n  titleSize?: number;\n  /** Inline color for the title + eyebrow. Overrides titleClassName color. */\n  titleColor?: string;\n  titleClassName?: string;\n  children?: React.ReactNode;\n  aspectRatio?: string;\n  className?: string;\n};\n\nconst DEFAULT_COLORS = [\n  \"#ff9d00\",\n  \"#fd4f30\",\n  \"#809bff\",\n  \"#6d2eff\",\n  \"#333aff\",\n  \"#f15cff\",\n  \"#ffd557\",\n];\n\nexport function FeaturedColorPanels({\n  colors = DEFAULT_COLORS,\n  colorBack = \"#000000\",\n  density = 3,\n  angle1 = 0,\n  angle2 = 0,\n  length = 1.1,\n  edges = false,\n  blur = 0,\n  fadeIn = 1,\n  fadeOut = 0.3,\n  gradient = 0,\n  speed = 0.5,\n  scale = 0.8,\n  rotation = 0,\n  offsetX = 0,\n  offsetY = 0,\n  title,\n  eyebrow,\n  titlePosition = \"bottom-left\",\n  titleSize = 30,\n  titleColor,\n  titleClassName = \"text-white\",\n  children,\n  aspectRatio = \"16/9\",\n  className,\n}: FeaturedColorPanelsProps) {\n  const eyebrowSize = Math.max(11, Math.round(titleSize * 0.4));\n\n  return (\n    <figure\n      className={cn(\n        \"relative isolate overflow-hidden rounded-2xl bg-neutral-900\",\n        className\n      )}\n      style={{ aspectRatio }}\n    >\n      <ColorPanels\n        angle1={angle1}\n        angle2={angle2}\n        blur={blur}\n        colorBack={colorBack}\n        colors={colors}\n        density={density}\n        edges={edges}\n        fadeIn={fadeIn}\n        fadeOut={fadeOut}\n        fit=\"cover\"\n        gradient={gradient}\n        length={length}\n        offsetX={offsetX}\n        offsetY={offsetY}\n        rotation={rotation}\n        scale={scale}\n        speed={speed}\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          width: \"100%\",\n          height: \"100%\",\n        }}\n      />\n\n      {children ? (\n        <div className=\"relative z-10 size-full\">{children}</div>\n      ) : null}\n\n      {title || eyebrow ? (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 z-10 flex p-4 sm:p-6\",\n            POSITION_CLASSES[titlePosition]\n          )}\n        >\n          <figcaption className=\"flex max-w-full flex-col gap-1\">\n            {eyebrow ? (\n              <span\n                className={cn(\"font-medium opacity-80\", titleClassName)}\n                style={{ fontSize: `${eyebrowSize}px`, color: titleColor }}\n              >\n                {eyebrow}\n              </span>\n            ) : null}\n            {title ? (\n              <h3\n                className={cn(\n                  \"font-bold leading-tight tracking-tight\",\n                  titleClassName\n                )}\n                style={{ fontSize: `${titleSize}px`, color: titleColor }}\n              >\n                {title}\n              </h3>\n            ) : null}\n          </figcaption>\n        </div>\n      ) : null}\n    </figure>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "featured"
  ],
  "type": "registry:block"
}