{
  "name": "showcase",
  "type": "registry:block",
  "description": "Full demo reel with TransitionSeries",
  "dependencies": [
    "remotion",
    "@remotion/transitions"
  ],
  "registryDependencies": [
    "transition-fade",
    "title-card",
    "feature-list",
    "stat-card",
    "end-card",
    "motion-tokens"
  ],
  "composition": {
    "id": "Showcase",
    "component": "Showcase",
    "durationInFrames": 240,
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "importPath": "@/compositions/showcase/index"
  },
  "files": [
    {
      "path": "registry/bases/default/compositions/showcase/index.tsx",
      "type": "registry:block",
      "content": "import { AbsoluteFill } from \"remotion\";\nimport { TransitionSeries } from \"@remotion/transitions\";\nimport { transitionFade } from \"@/remotion/primitives/transition-fade\";\nimport { DURATION } from \"@/remotion/lib/motion-tokens\";\nimport { EndCard } from \"@/remotion/scenes/end-card\";\nimport { FeatureList } from \"@/remotion/scenes/feature-list\";\nimport { StatCard } from \"@/remotion/scenes/stat-card\";\nimport { TitleCard } from \"@/remotion/scenes/title-card\";\n\nconst COLORS = {\n  bg: \"#080810\",\n  accent: \"#e8b86d\",\n  featureBg: \"#0c0c14\",\n  statBg: \"#0a1014\",\n  statAccent: \"#2dd4bf\",\n  endBg: \"#080810\",\n  endAccent: \"#f59e0b\",\n} as const;\n\nconst SCENE_DURATIONS = {\n  title: 60,\n  features: 90,\n  stat: 75,\n  end: 60,\n} as const;\n\nconst FADE = transitionFade({ durationInFrames: DURATION.fast });\n\nexport type ShowcaseProps = {\n  title?: string;\n  subtitle?: string;\n  featureTitle?: string;\n  featureItems?: string[];\n  statValue?: number;\n  statLabel?: string;\n  statSuffix?: string;\n  ctaLabel?: string;\n  ctaUrl?: string;\n};\n\nexport const Showcase: React.FC<ShowcaseProps> = ({\n  title = \"Product story\",\n  subtitle = \"Install source, compose scenes, render on your timeline\",\n  featureTitle = \"Three layers you own\",\n  featureItems = [\n    \"Motion primitives you can edit\",\n    \"Scenes for hooks, charts, and captions\",\n    \"Compositions that wire the full story\",\n  ],\n  statValue = 3,\n  statLabel = \"Runtime dependencies\",\n  statSuffix = \"\",\n  ctaLabel,\n  ctaUrl,\n}) => {\n  return (\n    <AbsoluteFill\n      style={{\n        backgroundColor: COLORS.bg,\n        backgroundImage:\n          \"radial-gradient(ellipse 80% 60% at 20% 20%, rgba(232,184,109,0.1), transparent 50%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(45,212,191,0.08), transparent)\",\n      }}\n    >\n      <TransitionSeries>\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.title}>\n          <TitleCard\n            title={title}\n            subtitle={subtitle}\n            backgroundColor={COLORS.bg}\n            accentColor={COLORS.accent}\n          />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition {...FADE} />\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.features}>\n          <FeatureList\n            title={featureTitle}\n            items={featureItems}\n            backgroundColor={COLORS.featureBg}\n            accentColor={COLORS.accent}\n          />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition {...FADE} />\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.stat}>\n          <StatCard\n            value={statValue}\n            label={statLabel}\n            suffix={statSuffix}\n            backgroundColor={COLORS.statBg}\n            accentColor={COLORS.statAccent}\n          />\n        </TransitionSeries.Sequence>\n        <TransitionSeries.Transition {...FADE} />\n        <TransitionSeries.Sequence durationInFrames={SCENE_DURATIONS.end}>\n          <EndCard\n            speed={1.4}\n            title={title}\n            cta={ctaLabel}\n            url={ctaUrl}\n            backgroundColor={COLORS.endBg}\n            accentColor={COLORS.endAccent}\n          />\n        </TransitionSeries.Sequence>\n      </TransitionSeries>\n    </AbsoluteFill>\n  );\n};\n"
    }
  ],
  "atlas": {
    "lane": "reels",
    "drive": "time",
    "tier": "core"
  }
}