{
  "name": "audiogram-scene",
  "type": "registry:block",
  "description": "Podcast audiogram layout with spectrum bars",
  "dependencies": [
    "remotion",
    "@remotion/media-utils"
  ],
  "registryDependencies": [
    "audiogram-bars",
    "fade-in",
    "layout",
    "motion-tokens"
  ],
  "files": [
    {
      "path": "registry/bases/default/scenes/audiogram-scene/index.tsx",
      "type": "registry:block",
      "content": "import { loadFont } from \"@remotion/google-fonts/Inter\";\nimport { AbsoluteFill, Img, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport { getSafeAreaPadding, scaleFont } from \"@/remotion/lib/layout\";\nimport { DURATION } from \"@/remotion/lib/motion-tokens\";\nimport { AudiogramBars } from \"@/remotion/primitives/audiogram-bars\";\nimport { FadeIn } from \"@/remotion/primitives/fade-in\";\n\nconst { fontFamily } = loadFont(\"normal\", {\n  weights: [\"400\", \"600\", \"700\"],\n  subsets: [\"latin\"],\n});\n\nexport type AudiogramSceneProps = {\n  src: string;\n  title?: string;\n  subtitle?: string;\n  logoSrc?: string;\n  logoSize?: number;\n  accentColor?: string;\n  backgroundColor?: string;\n};\n\nconst COLORS = {\n  bg: \"#080810\",\n  title: \"#fafafa\",\n  subtitle: \"#d4d4d8\",\n  glow: \"rgba(232,184,109,0.16)\",\n  accent: \"#e8b86d\",\n} as const;\n\nexport const AudiogramScene: React.FC<AudiogramSceneProps> = ({\n  src,\n  title,\n  subtitle,\n  logoSrc,\n  logoSize,\n  accentColor = COLORS.accent,\n  backgroundColor = COLORS.bg,\n}) => {\n  const frame = useCurrentFrame();\n  const { width, height } = useVideoConfig();\n  const safeArea = getSafeAreaPadding({ width, height });\n  const hasHeader = Boolean(title || subtitle || logoSrc);\n\n  return (\n    <AbsoluteFill\n      style={{\n        backgroundColor,\n        backgroundImage: `radial-gradient(ellipse 90% 55% at 50% 0%, ${COLORS.glow}, transparent)`,\n        paddingLeft: safeArea.paddingLeft,\n        paddingRight: safeArea.paddingRight,\n        paddingTop: safeArea.paddingTop,\n        paddingBottom: safeArea.paddingBottom + scaleFont(28, width),\n        display: \"flex\",\n        flexDirection: \"column\",\n        // Header and bars read as one block; `space-between` left a dead band\n        // across the middle of the frame at every aspect ratio.\n        justifyContent: \"center\",\n        alignItems: \"stretch\",\n        gap: scaleFont(64, width),\n        fontFamily,\n      }}\n    >\n      {hasHeader ? (\n        <FadeIn durationInFrames={DURATION.fast}>\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: logoSrc ? \"center\" : \"flex-start\",\n              textAlign: logoSrc ? \"center\" : \"left\",\n              gap: scaleFont(12, width),\n            }}\n          >\n            {logoSrc ? (\n              <Img\n                src={logoSrc}\n                style={{\n                  width: logoSize ?? scaleFont(80, width),\n                  height: logoSize ?? scaleFont(80, width),\n                  borderRadius: scaleFont(18, width),\n                }}\n              />\n            ) : null}\n            {title ? (\n              <h1\n                style={{\n                  color: COLORS.title,\n                  fontSize: scaleFont(64, width),\n                  fontWeight: 700,\n                  margin: 0,\n                  lineHeight: 1.05,\n                  letterSpacing: \"-0.02em\",\n                }}\n              >\n                {title}\n              </h1>\n            ) : null}\n            {subtitle ? (\n              <p\n                style={{\n                  color: COLORS.subtitle,\n                  fontSize: scaleFont(32, width),\n                  margin: title ? `${scaleFont(10, width)}px 0 0` : 0,\n                  lineHeight: 1.35,\n                  fontWeight: 500,\n                }}\n              >\n                {subtitle}\n              </p>\n            ) : null}\n          </div>\n        </FadeIn>\n      ) : null}\n      <FadeIn durationInFrames={DURATION.normal} delayInFrames={10}>\n        <div\n          style={{\n            display: \"flex\",\n            justifyContent: \"center\",\n            width: \"100%\",\n            paddingBottom: scaleFont(18, width),\n          }}\n        >\n          <AudiogramBars\n            src={src}\n            frame={frame}\n            barColor={accentColor}\n            height={Math.round(height * 0.18)}\n          />\n        </div>\n      </FadeIn>\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "signals",
    "drive": "media",
    "tier": "advanced",
    "tags": [
      "audio"
    ]
  }
}