@vibecuting/video-project-core 0.1.24 → 0.1.26

package/src/core/scene/slide/index.ts

@@ -1 +1,155 @@
+export * from './_shared'
 export { DefaultSlideScene } from './default-slide-scene'
+
+export { DefaultAbstractBackgroundCoverSlide } from './abstract-background-cover'
+export { DefaultAgendaCardsSlide } from './agenda-cards'
+export { DefaultAgendaSlide } from './agenda'
+export { DefaultAnnotationSlide } from './annotation'
+export { DefaultBeforeAfterSlide } from './before-after'
+export { DefaultCalloutSlide } from './callout'
+export { DefaultChartSidecarSlide } from './chart-sidecar'
+export { DefaultChartSlide } from './chart'
+export { DefaultChapterSlide } from './chapter'
+export { DefaultClosingSlide } from './closing'
+export { DefaultCodeCalloutSlide } from './code-callout'
+export { DefaultCodeSnippetSlide } from './code-snippet'
+export { DefaultComparisonCardSlide } from './comparison-card'
+export { DefaultComparisonSlide } from './comparison'
+export { DefaultCompactHeroSlide } from './compact-hero'
+export { DefaultCoverLeftSlide } from './cover-left'
+export { DefaultCoverRightSlide } from './cover-right'
+export { DefaultCoverSlide } from './cover'
+export { DefaultCustomerLogoWallSlide } from './customer-logo-wall'
+export { DefaultDataStorySlide } from './data-story'
+export { DefaultDeviceMockupSlide } from './device-mockup'
+export { DefaultDiagramMatrixSlide } from './diagram-matrix'
+export { DefaultDiagramSlide } from './diagram'
+export { DefaultFAQAccordionSlide } from './faq-accordion'
+export { DefaultFAQSidecarSlide } from './faq-sidecar'
+export { DefaultFAQSlide } from './faq'
+export { DefaultFeatureCardsSlide } from './feature-cards'
+export { DefaultFeatureGridSlide } from './feature-grid'
+export { DefaultFeatureListSlide } from './feature-list'
+export { DefaultFlowDiagramSlide } from './flow-diagram'
+export { DefaultGallerySlide } from './gallery'
+export { DefaultGeoMapSlide } from './geo-map'
+export { DefaultHeroSlide } from './hero'
+export { DefaultHeroVariantSlide } from './hero-variant'
+export { DefaultImageHeroSlide } from './image-hero'
+export { DefaultInteractiveDemoSlide } from './interactive-demo'
+export { DefaultKPIDashboardSlide } from './kpi-dashboard'
+export { DefaultListHeroSlide } from './list-hero'
+export { DefaultListSlide } from './list'
+export { DefaultListWithIconsSlide } from './list-with-icons'
+export { DefaultMapLocationSlide } from './map-location'
+export { DefaultMetricCardsSlide } from './metric-cards'
+export { DefaultMetricGridSlide } from './metric-grid'
+export { DefaultMetricListSlide } from './metric-list'
+export { DefaultMetricShowcaseSlide } from './metric-showcase'
+export { DefaultMetricsStripSlide } from './metrics-strip'
+export { DefaultMermaidDiagramSlide } from './mermaid-diagram'
+export { DefaultOrgChartSlide } from './org-chart'
+export { DefaultPricingSlide } from './pricing'
+export { DefaultProcessCardsSlide } from './process-cards'
+export { DefaultProcessSlide } from './process'
+export { DefaultProsConsSlide } from './pros-cons'
+export { DefaultQuoteBannerSlide } from './quote-banner'
+export { DefaultQuoteSidecarSlide } from './quote-sidecar'
+export { DefaultQuoteSlide } from './quote'
+export { DefaultScreenshotComparisonSlide } from './screenshot-comparison'
+export { DefaultSpeakerNotesSlide } from './speaker-notes'
+export { DefaultSplitCardSlide } from './split-card'
+export { DefaultSplitHeroSlide } from './split-hero'
+export { DefaultSplitSlide } from './split'
+export { DefaultStackTimelineSlide } from './stack-timeline'
+export { DefaultStatWallSlide } from './stat-wall'
+export { DefaultStatsSlide } from './stats'
+export { DefaultSwimlaneTimelineSlide } from './swimlane-timeline'
+export { DefaultTableSlide } from './table'
+export { DefaultTestimonialGridSlide } from './testimonial-grid'
+export { DefaultTestimonialWallSlide } from './testimonial-wall'
+export { DefaultTerminalSlide } from './terminal'
+export { DefaultThreeColumnSlide } from './three-column'
+export { DefaultTimelineCardsSlide } from './timeline-cards'
+export { DefaultTimelineSlide } from './timeline'
+export { DefaultTimelineSplitSlide } from './timeline-split'
+export { DefaultTitleWithImageSlide } from './title-with-image'
+export { DefaultSlideSceneLandscape, componentMetadata as DefaultSlideSceneLandscapeMetadata } from './default-slide-scene-Landscape'
+export { DefaultSlideSceneHorizontal, componentMetadata as DefaultSlideSceneHorizontalMetadata } from './default-slide-scene-Horizontal'
+
+const slideSceneMetadata = { sceneFamily: 'slide' as const }
+
+export const componentMetadata = slideSceneMetadata
+export const abstractBackgroundCoverMetadata = slideSceneMetadata
+export const agendaCardsMetadata = slideSceneMetadata
+export const agendaMetadata = slideSceneMetadata
+export const annotationMetadata = slideSceneMetadata
+export const beforeAfterMetadata = slideSceneMetadata
+export const calloutMetadata = slideSceneMetadata
+export const chartSidecarMetadata = slideSceneMetadata
+export const chartMetadata = slideSceneMetadata
+export const chapterMetadata = slideSceneMetadata
+export const closingMetadata = slideSceneMetadata
+export const codeCalloutMetadata = slideSceneMetadata
+export const codeSnippetMetadata = slideSceneMetadata
+export const comparisonCardMetadata = slideSceneMetadata
+export const comparisonMetadata = slideSceneMetadata
+export const compactHeroMetadata = slideSceneMetadata
+export const coverLeftMetadata = slideSceneMetadata
+export const coverRightMetadata = slideSceneMetadata
+export const coverMetadata = slideSceneMetadata
+export const customerLogoWallMetadata = slideSceneMetadata
+export const dataStoryMetadata = slideSceneMetadata
+export const deviceMockupMetadata = slideSceneMetadata
+export const diagramMatrixMetadata = slideSceneMetadata
+export const diagramMetadata = slideSceneMetadata
+export const faqAccordionMetadata = slideSceneMetadata
+export const faqSidecarMetadata = slideSceneMetadata
+export const faqMetadata = slideSceneMetadata
+export const featureCardsMetadata = slideSceneMetadata
+export const featureGridMetadata = slideSceneMetadata
+export const featureListMetadata = slideSceneMetadata
+export const flowDiagramMetadata = slideSceneMetadata
+export const galleryMetadata = slideSceneMetadata
+export const geoMapMetadata = slideSceneMetadata
+export const heroMetadata = slideSceneMetadata
+export const heroVariantMetadata = slideSceneMetadata
+export const imageHeroMetadata = slideSceneMetadata
+export const interactiveDemoMetadata = slideSceneMetadata
+export const kpiDashboardMetadata = slideSceneMetadata
+export const listHeroMetadata = slideSceneMetadata
+export const listMetadata = slideSceneMetadata
+export const listWithIconsMetadata = slideSceneMetadata
+export const mapLocationMetadata = slideSceneMetadata
+export const metricCardsMetadata = slideSceneMetadata
+export const metricGridMetadata = slideSceneMetadata
+export const metricListMetadata = slideSceneMetadata
+export const metricShowcaseMetadata = slideSceneMetadata
+export const metricsStripMetadata = slideSceneMetadata
+export const mermaidDiagramMetadata = slideSceneMetadata
+export const orgChartMetadata = slideSceneMetadata
+export const pricingMetadata = slideSceneMetadata
+export const processCardsMetadata = slideSceneMetadata
+export const processMetadata = slideSceneMetadata
+export const prosConsMetadata = slideSceneMetadata
+export const quoteBannerMetadata = slideSceneMetadata
+export const quoteSidecarMetadata = slideSceneMetadata
+export const quoteMetadata = slideSceneMetadata
+export const screenshotComparisonMetadata = slideSceneMetadata
+export const speakerNotesMetadata = slideSceneMetadata
+export const splitCardMetadata = slideSceneMetadata
+export const splitHeroMetadata = slideSceneMetadata
+export const splitMetadata = slideSceneMetadata
+export const stackTimelineMetadata = slideSceneMetadata
+export const statWallMetadata = slideSceneMetadata
+export const statsMetadata = slideSceneMetadata
+export const swimlaneTimelineMetadata = slideSceneMetadata
+export const tableMetadata = slideSceneMetadata
+export const testimonialGridMetadata = slideSceneMetadata
+export const testimonialWallMetadata = slideSceneMetadata
+export const terminalMetadata = slideSceneMetadata
+export const threeColumnMetadata = slideSceneMetadata
+export const timelineCardsMetadata = slideSceneMetadata
+export const timelineMetadata = slideSceneMetadata
+export const timelineSplitMetadata = slideSceneMetadata
+export const titleWithImageMetadata = slideSceneMetadata

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,21 @@
+import { DefaultInteractiveDemoSlideHorizontal } from './default-interactive-demo-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/interactive-demo/DefaultInteractiveDemoSlideHorizontal/Animated',
+  component: DefaultInteractiveDemoSlideHorizontal,
+  args: {
+    title: 'Interactive Demo',
+    subtitle: 'Use this slide to walk through a product interaction step by step.',
+    steps: ['Open the workspace', 'Pick a template', 'Preview the output', 'Export the result'],
+    note: 'Replace this box with a screen capture or animated mockup.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide-Horizontal.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultInteractiveDemoSlideHorizontal } from './default-interactive-demo-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/interactive-demo/DefaultInteractiveDemoSlideHorizontal',
+  component: DefaultInteractiveDemoSlideHorizontal,
+  args: {
+    title: 'Interactive Demo',
+    subtitle: 'Use this slide to walk through a product interaction step by step.',
+    steps: ['Open the workspace', 'Pick a template', 'Preview the output', 'Export the result'],
+    note: 'Replace this box with a screen capture or animated mockup.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultInteractiveDemoSlide, componentMetadata as baseComponentMetadata } from './default-interactive-demo-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultInteractiveDemoSlideHorizontal',
+  description: "Interactive demo slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/interactive-demo/default-interactive-demo-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultInteractiveDemoSlideHorizontal = VideoComponent(componentMetadata)(function DefaultInteractiveDemoSlideHorizontal(
+  props: ComponentProps<typeof DefaultInteractiveDemoSlide>,
+) {
+  return <DefaultInteractiveDemoSlide {...props} />
+})

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultInteractiveDemoSlide, componentMetadata as baseComponentMetadata } from './default-interactive-demo-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultInteractiveDemoSlideLandscape',
+  description: "Interactive demo slide (Landscape 16:9 variant)",
+  sourceFile: 'src/core/scene/slide/interactive-demo/default-interactive-demo-slide-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultInteractiveDemoSlideLandscape = VideoComponent(componentMetadata)(function DefaultInteractiveDemoSlideLandscape(
+  props: ComponentProps<typeof DefaultInteractiveDemoSlide>,
+) {
+  return <DefaultInteractiveDemoSlide {...props} />
+})

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide.animated.stories.tsx

@@ -0,0 +1,21 @@
+import { DefaultInteractiveDemoSlideLandscape } from './default-interactive-demo-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/interactive-demo/DefaultInteractiveDemoSlideLandscape/Animated',
+  component: DefaultInteractiveDemoSlideLandscape,
+  args: {
+    title: 'Interactive Demo',
+    subtitle: 'Use this slide to walk through a product interaction step by step.',
+    steps: ['Open the workspace', 'Pick a template', 'Preview the output', 'Export the result'],
+    note: 'Replace this box with a screen capture or animated mockup.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultInteractiveDemoSlideLandscape } from './default-interactive-demo-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/interactive-demo/DefaultInteractiveDemoSlideLandscape',
+  component: DefaultInteractiveDemoSlideLandscape,
+  args: {
+    title: 'Interactive Demo',
+    subtitle: 'Use this slide to walk through a product interaction step by step.',
+    steps: ['Open the workspace', 'Pick a template', 'Preview the output', 'Export the result'],
+    note: 'Replace this box with a screen capture or animated mockup.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/interactive-demo/default-interactive-demo-slide.tsx

@@ -0,0 +1,91 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultInteractiveDemoSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  steps: string[]
+  note?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultInteractiveDemoSlide',
+  description: 'Interactive demo slide',
+  sourceFile: 'src/core/scene/slide/interactive-demo/default-interactive-demo-slide.tsx',
+  pluginKey: 'core.slide.interactive-demo',
+  tags: ['scene', 'slide', 'interactive-demo'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultInteractiveDemoSlideProps',
+})
+
+export const DefaultInteractiveDemoSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      steps: z.array(z.string().min(1)).min(1),
+      note: z.string().optional(),
+    }),
+    component: function DefaultInteractiveDemoSlide({ sceneId, sceneName, title, subtitle, steps, note }: DefaultInteractiveDemoSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const { height, width } = runtime
+      const isPortrait = height > width
+      const scale = getSlideTypographyScale(height)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#0f172a">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 980, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 560 : 820, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 24 : 36, display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '1fr 1.1fr', gap: isPortrait ? 16 : 22, alignItems: 'stretch' }}>
+              <SceneMotionLayer variant="card">
+                <article style={{ padding: isPortrait ? '18px' : 28, borderRadius: 0, background: 'rgba(15,23,42,0.72)', border: '1px solid rgba(148,163,184,0.16)' }}>
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.caption * 0.92 : scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.64 }}>Flow</p>
+                  <ul style={{ margin: '18px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: isPortrait ? 10 : 14 }}>
+                    {steps.map((step, index) => (
+                      <SceneMotionLayer key={step} variant="list-item" delayIndex={index}>
+                        <li style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'start' }}>
+                          <span style={{ width: isPortrait ? 22 : 26, height: isPortrait ? 22 : 26, borderRadius: 0, background: '#2563eb', display: 'grid', placeItems: 'center', fontSize: scale.caption, fontWeight: 700 }}>{index + 1}</span>
+                          <span style={{ fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.45, opacity: 0.88 }}>{step}</span>
+                        </li>
+                      </SceneMotionLayer>
+                    ))}
+                  </ul>
+                </article>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="panel" delayIndex={2}>
+                <article style={{ padding: isPortrait ? '18px' : 28, borderRadius: 0, background: '#ffffff', color: '#0f172a', border: '1px solid rgba(148,163,184,0.24)' }}>
+                  <div style={{ width: '100%', height: '100%', minHeight: isPortrait ? 220 : 320, borderRadius: 0, background: 'linear-gradient(135deg, #bfdbfe 0%, #0f172a 100%)', display: 'grid', placeItems: 'center', textAlign: 'center', padding: 20 }}>
+                    <div>
+                      <p style={{ margin: 0, fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.7 }}>Live Demo</p>
+                      {note ? <p style={{ margin: '16px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5, color: '#eff6ff' }}>{note}</p> : null}
+                    </div>
+                  </div>
+                </article>
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/interactive-demo/index.ts

@@ -0,0 +1,4 @@
+export { DefaultInteractiveDemoSlide } from './default-interactive-demo-slide'
+export { componentMetadata } from './default-interactive-demo-slide'
+export { DefaultInteractiveDemoSlideLandscape, componentMetadata as DefaultInteractiveDemoSlideLandscapeMetadata } from './default-interactive-demo-slide-Landscape'
+export { DefaultInteractiveDemoSlideHorizontal, componentMetadata as DefaultInteractiveDemoSlideHorizontalMetadata } from './default-interactive-demo-slide-Horizontal'

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,25 @@
+import { DefaultKPIDashboardSlideHorizontal } from './default-kpi-dashboard-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/kpi-dashboard/DefaultKPIDashboardSlideHorizontal/Animated',
+  component: DefaultKPIDashboardSlideHorizontal,
+  args: {
+    title: 'KPI Dashboard',
+    subtitle: 'A denser dashboard card grid for executive summaries.',
+    panels: [
+      { label: 'Active users', value: '24K', hint: 'Up 18% week over week' },
+      { label: 'Conversion', value: '4.8%', hint: 'Above target' },
+      { label: 'Latency', value: '18ms', hint: 'Median API latency' },
+      { label: 'Retention', value: '91%', hint: '30-day cohort' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide-Horizontal.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultKPIDashboardSlideHorizontal } from './default-kpi-dashboard-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/kpi-dashboard/DefaultKPIDashboardSlideHorizontal',
+  component: DefaultKPIDashboardSlideHorizontal,
+  args: {
+    title: 'KPI Dashboard',
+    subtitle: 'A denser dashboard card grid for executive summaries.',
+    panels: [
+      { label: 'Active users', value: '24K', hint: 'Up 18% week over week' },
+      { label: 'Conversion', value: '4.8%', hint: 'Above target' },
+      { label: 'Latency', value: '18ms', hint: 'Median API latency' },
+      { label: 'Retention', value: '91%', hint: '30-day cohort' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultKPIDashboardSlide, componentMetadata as baseComponentMetadata } from './default-kpi-dashboard-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultKPIDashboardSlideHorizontal',
+  description: "KPI dashboard slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultKPIDashboardSlideHorizontal = VideoComponent(componentMetadata)(function DefaultKPIDashboardSlideHorizontal(
+  props: ComponentProps<typeof DefaultKPIDashboardSlide>,
+) {
+  return <DefaultKPIDashboardSlide {...props} />
+})

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultKPIDashboardSlide, componentMetadata as baseComponentMetadata } from './default-kpi-dashboard-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultKPIDashboardSlideLandscape',
+  description: "KPI dashboard slide (Landscape 16:9 variant)",
+  sourceFile: 'src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultKPIDashboardSlideLandscape = VideoComponent(componentMetadata)(function DefaultKPIDashboardSlideLandscape(
+  props: ComponentProps<typeof DefaultKPIDashboardSlide>,
+) {
+  return <DefaultKPIDashboardSlide {...props} />
+})

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide.animated.stories.tsx

@@ -0,0 +1,25 @@
+import { DefaultKPIDashboardSlideLandscape } from './default-kpi-dashboard-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/kpi-dashboard/DefaultKPIDashboardSlideLandscape/Animated',
+  component: DefaultKPIDashboardSlideLandscape,
+  args: {
+    title: 'KPI Dashboard',
+    subtitle: 'A denser dashboard card grid for executive summaries.',
+    panels: [
+      { label: 'Active users', value: '24K', hint: 'Up 18% week over week' },
+      { label: 'Conversion', value: '4.8%', hint: 'Above target' },
+      { label: 'Latency', value: '18ms', hint: 'Median API latency' },
+      { label: 'Retention', value: '91%', hint: '30-day cohort' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultKPIDashboardSlideLandscape } from './default-kpi-dashboard-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/kpi-dashboard/DefaultKPIDashboardSlideLandscape',
+  component: DefaultKPIDashboardSlideLandscape,
+  args: {
+    title: 'KPI Dashboard',
+    subtitle: 'A denser dashboard card grid for executive summaries.',
+    panels: [
+      { label: 'Active users', value: '24K', hint: 'Up 18% week over week' },
+      { label: 'Conversion', value: '4.8%', hint: 'Above target' },
+      { label: 'Latency', value: '18ms', hint: 'Median API latency' },
+      { label: 'Retention', value: '91%', hint: '30-day cohort' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide.tsx

@@ -0,0 +1,85 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getOverflowSafeSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultKPIDashboardSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  panels: Array<{
+    label: string
+    value: string
+    hint?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultKPIDashboardSlide',
+  description: 'KPI dashboard slide',
+  sourceFile: 'src/core/scene/slide/kpi-dashboard/default-kpi-dashboard-slide.tsx',
+  pluginKey: 'core.slide.kpi-dashboard',
+  tags: ['scene', 'slide', 'kpi-dashboard'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultKPIDashboardSlideProps',
+})
+
+export const DefaultKPIDashboardSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      panels: z.array(z.object({ label: z.string().min(1), value: z.string().min(1), hint: z.string().optional() })).min(1),
+    }),
+    component: function DefaultKPIDashboardSlide({ sceneId, sceneName, title, subtitle, panels }: DefaultKPIDashboardSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(panels.length, isPortrait ? 2 : 4, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 330,
+        minCardWidth: isPortrait ? 180 : 220,
+        minCardHeight: isPortrait ? 120 : 140,
+      })
+      const cardMinHeight = grid.cardMinHeight
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#020617">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 980, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 560 : 820, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 24 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : grid.gap }}>
+              {panels.slice(0, 5).map((panel, index) => (
+                <SceneMotionLayer key={panel.label} variant="stat" delayIndex={index}>
+                  <article style={{ minHeight: cardMinHeight, padding: isPortrait ? '16px 16px 18px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: index % 2 === 0 ? 'rgba(15,23,42,0.76)' : 'rgba(30,41,59,0.86)', border: '1px solid rgba(148,163,184,0.16)' }}>
+                    <p style={{ margin: 0, fontSize: isPortrait ? scale.caption * 0.9 : scale.caption, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.62 }}>{panel.label}</p>
+                    <p style={{ margin: '16px 0 0', fontSize: Math.max(isPortrait ? scale.statValue * 0.84 : scale.statValue, 40), lineHeight: 1, letterSpacing: '-0.06em', fontWeight: 700 }}>{panel.value}</p>
+                    {panel.hint ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.4, opacity: 0.76 }}>{panel.hint}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/kpi-dashboard/index.ts

@@ -0,0 +1,4 @@
+export { DefaultKPIDashboardSlide } from './default-kpi-dashboard-slide'
+export { componentMetadata } from './default-kpi-dashboard-slide'
+export { DefaultKPIDashboardSlideLandscape, componentMetadata as DefaultKPIDashboardSlideLandscapeMetadata } from './default-kpi-dashboard-slide-Landscape'
+export { DefaultKPIDashboardSlideHorizontal, componentMetadata as DefaultKPIDashboardSlideHorizontalMetadata } from './default-kpi-dashboard-slide-Horizontal'

package/src/core/scene/slide/list/default-list-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultListSlideHorizontal } from './default-list-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/list/DefaultListSlideHorizontal/Animated',
+  component: DefaultListSlideHorizontal,
+  args: {
+    title: 'List',
+    subtitle: 'A flexible list slide for bullet points.',
+    items: ['First point', 'Second point', 'Third point', 'Fourth point'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}