@vibecuting/video-project-core 0.1.25 → 0.1.26

package/src/core/scene/slide/map-location/default-map-location-slide-Horizontal.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultMapLocationSlideHorizontal } from './default-map-location-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideHorizontal',
+  component: DefaultMapLocationSlideHorizontal,
+  args: {
+    title: 'Launch Location',
+    subtitle: 'Use a map-style slide to frame regions and deployment targets.',
+    location: 'Tokyo, Japan',
+    note: 'Replace the placeholder with a real map or a geographic visualization.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/map-location/default-map-location-slide-Horizontal.tsx

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

package/src/core/scene/slide/map-location/default-map-location-slide-Landscape.tsx

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

package/src/core/scene/slide/map-location/default-map-location-slide.animated.stories.tsx

@@ -0,0 +1,21 @@
+import { DefaultMapLocationSlideLandscape } from './default-map-location-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideLandscape/Animated',
+  component: DefaultMapLocationSlideLandscape,
+  args: {
+    title: 'Launch Location',
+    subtitle: 'Use a map-style slide to frame regions and deployment targets.',
+    location: 'Tokyo, Japan',
+    note: 'Replace the placeholder with a real map or a geographic visualization.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/map-location/default-map-location-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultMapLocationSlideLandscape } from './default-map-location-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideLandscape',
+  component: DefaultMapLocationSlideLandscape,
+  args: {
+    title: 'Launch Location',
+    subtitle: 'Use a map-style slide to frame regions and deployment targets.',
+    location: 'Tokyo, Japan',
+    note: 'Replace the placeholder with a real map or a geographic visualization.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/map-location/default-map-location-slide.tsx

@@ -0,0 +1,94 @@
+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'
+import { GeoMapPreview } from '../geo-map'
+
+export interface DefaultMapLocationSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  location?: string
+  note?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultMapLocationSlide',
+  description: 'Map and location slide',
+  sourceFile: 'src/core/scene/slide/map-location/default-map-location-slide.tsx',
+  pluginKey: 'core.slide.map-location',
+  tags: ['scene', 'slide', 'map-location'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultMapLocationSlideProps',
+})
+
+export const DefaultMapLocationSlide = 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(),
+      location: z.string().optional(),
+      note: z.string().optional(),
+    }),
+    component: function DefaultMapLocationSlide({ sceneId, sceneName, title, subtitle, location, note }: DefaultMapLocationSlideProps) {
+      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={{ display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '1fr 1fr', gap: isPortrait ? 20 : 40, width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0', alignItems: 'center' }}>
+            <div>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 560, 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 : 520, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+              {location ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: '24px 0 0', fontSize: isPortrait ? scale.body * 0.92 : scale.body, fontWeight: 700 }}>{location}</p>
+                </SceneMotionLayer>
+              ) : null}
+              {note ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={3}>
+                  <p style={{ margin: '12px 0 0', maxWidth: isPortrait ? 560 : 520, fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5, opacity: 0.76 }}>{note}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <SceneMotionLayer variant="panel" delayIndex={4}>
+              <GeoMapPreview
+                title="Map Preview"
+                subtitle="Geographic layouts, routes, and market markers render in a fixed 16:9 card."
+                backgroundStyle="network"
+                points={[
+                  { label: location ?? 'Global Hub', x: 48, y: 42, tone: 'primary' },
+                  { label: 'North America', x: 22, y: 38, tone: 'neutral' },
+                  { label: 'Asia Pacific', x: 72, y: 62, tone: 'accent' },
+                ]}
+                routes={[
+                  { from: [22, 38], to: [48, 42], tone: 'primary' },
+                  { from: [48, 42], to: [72, 62], tone: 'accent' },
+                ]}
+                style={{ minHeight: isPortrait ? 320 : 500, borderRadius: 0 }}
+              />
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/map-location/index.ts

@@ -0,0 +1,4 @@
+export { DefaultMapLocationSlide } from './default-map-location-slide'
+export { componentMetadata } from './default-map-location-slide'
+export { DefaultMapLocationSlideLandscape, componentMetadata as DefaultMapLocationSlideLandscapeMetadata } from './default-map-location-slide-Landscape'
+export { DefaultMapLocationSlideHorizontal, componentMetadata as DefaultMapLocationSlideHorizontalMetadata } from './default-map-location-slide-Horizontal'

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultMermaidDiagramSlideHorizontal } from './default-mermaid-diagram-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/mermaid-diagram/default-mermaid-diagram-slideHorizontal/Animated',
+  component: DefaultMermaidDiagramSlideHorizontal,
+  args: {
+    title: 'Mermaid Diagram',
+    subtitle: 'Render flowcharts, sequence diagrams, and decision trees directly from Mermaid syntax.',
+    chart: `flowchart LR
+  A[Brief] --> B[Design]
+  B --> C[Build]
+  C --> D[Review]
+  D --> E[Ship]`,
+    caption: 'Diagram text is rendered with Mermaid in the preview.',
+  },
+} satisfies Meta<typeof DefaultMermaidDiagramSlideHorizontal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide-Horizontal.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultMermaidDiagramSlideHorizontal } from './default-mermaid-diagram-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/mermaid-diagram/default-mermaid-diagram-slideHorizontal',
+  component: DefaultMermaidDiagramSlideHorizontal,
+  args: {
+    title: 'Mermaid Diagram',
+    subtitle: 'Render flowcharts, sequence diagrams, and decision trees directly from Mermaid syntax.',
+    chart: `flowchart LR
+  A[Brief] --> B[Design]
+  B --> C[Build]
+  C --> D[Review]
+  D --> E[Ship]`,
+    caption: 'Diagram text is rendered with Mermaid in the preview.',
+  },
+} satisfies Meta<typeof DefaultMermaidDiagramSlideHorizontal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide-Horizontal.tsx

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

package/src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide-Landscape.tsx

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

package/src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide.animated.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultMermaidDiagramSlideLandscape } from './default-mermaid-diagram-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/mermaid-diagram/default-mermaid-diagram-slideLandscape/Animated',
+  component: DefaultMermaidDiagramSlideLandscape,
+  args: {
+    title: 'Mermaid Diagram',
+    subtitle: 'Render flowcharts, sequence diagrams, and decision trees directly from Mermaid syntax.',
+    chart: `flowchart LR
+  A[Brief] --> B[Design]
+  B --> C[Build]
+  C --> D[Review]
+  D --> E[Ship]`,
+    caption: 'Diagram text is rendered with Mermaid in the preview.',
+  },
+} satisfies Meta<typeof DefaultMermaidDiagramSlideLandscape>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultMermaidDiagramSlideLandscape } from './default-mermaid-diagram-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/mermaid-diagram/default-mermaid-diagram-slideLandscape',
+  component: DefaultMermaidDiagramSlideLandscape,
+  args: {
+    title: 'Mermaid Diagram',
+    subtitle: 'Render flowcharts, sequence diagrams, and decision trees directly from Mermaid syntax.',
+    chart: `flowchart LR
+  A[Brief] --> B[Design]
+  B --> C[Build]
+  C --> D[Review]
+  D --> E[Ship]`,
+    caption: 'Diagram text is rendered with Mermaid in the preview.',
+  },
+} satisfies Meta<typeof DefaultMermaidDiagramSlideLandscape>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide.tsx

@@ -0,0 +1,90 @@
+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'
+import { MermaidDiagram } from './mermaid-diagram'
+
+export interface DefaultMermaidDiagramSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  chart: string
+  caption?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultMermaidDiagramSlide',
+  description: 'Mermaid diagram slide',
+  sourceFile: 'src/core/scene/slide/mermaid-diagram/default-mermaid-diagram-slide.tsx',
+  pluginKey: 'core.slide.mermaid-diagram',
+  tags: ['scene', 'slide', 'mermaid', 'diagram'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultMermaidDiagramSlideProps',
+})
+
+export const DefaultMermaidDiagramSlide = 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(),
+      chart: z.string().min(1),
+      caption: z.string().optional(),
+    }),
+    component: function DefaultMermaidDiagramSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      chart,
+      caption,
+    }: DefaultMermaidDiagramSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.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', display: 'flex', flexDirection: 'column', gap: isPortrait ? 14 : 20 }}>
+            <div style={{ display: 'grid', gap: 14, maxWidth: isPortrait ? 700 : 1080 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, fontSize: isPortrait ? scale.title * 0.76 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                  <p style={{ margin: 0, maxWidth: isPortrait ? 680 : 820, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div style={{ flex: 1, minHeight: 0, borderRadius: 0, padding: isPortrait ? 16 : 24, background: 'linear-gradient(180deg, rgba(15,23,42,0.78), rgba(2,6,23,0.92))', border: '1px solid rgba(148,163,184,0.18)', overflow: 'hidden' }}>
+                <div style={{ width: '100%', height: '100%', display: 'grid', placeItems: 'center', overflow: 'hidden' }}>
+                  <MermaidDiagram chart={chart} className="max-h-full max-w-full" />
+                </div>
+              </div>
+            </SceneMotionLayer>
+            {caption ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={3}>
+                <p style={{ margin: 0, fontSize: isPortrait ? scale.caption * 0.9 : scale.caption, opacity: 0.72 }}>{caption}</p>
+              </SceneMotionLayer>
+            ) : null}
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/mermaid-diagram/index.ts

@@ -0,0 +1,3 @@
+export * from './default-mermaid-diagram-slide'
+export { DefaultMermaidDiagramSlideLandscape, componentMetadata as DefaultMermaidDiagramSlideLandscapeMetadata } from './default-mermaid-diagram-slide-Landscape'
+export { DefaultMermaidDiagramSlideHorizontal, componentMetadata as DefaultMermaidDiagramSlideHorizontalMetadata } from './default-mermaid-diagram-slide-Horizontal'

package/src/core/scene/slide/mermaid-diagram/mermaid-diagram.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import mermaid from 'mermaid'
+
+export interface MermaidDiagramProps {
+  chart: string
+  theme?: 'default' | 'dark' | 'forest' | 'neutral'
+  className?: string
+}
+
+export function MermaidDiagram({ chart, theme = 'default', className }: MermaidDiagramProps) {
+  const elementRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme,
+      securityLevel: 'loose',
+      fontFamily: 'Inter, ui-sans-serif, system-ui, sans-serif',
+    })
+  }, [theme])
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function renderMermaid() {
+      if (!elementRef.current) {
+        return
+      }
+
+      try {
+        const id = `mermaid-${Math.random().toString(36).slice(2, 10)}`
+        const { svg } = await mermaid.render(id, chart)
+
+        if (!cancelled && elementRef.current) {
+          elementRef.current.innerHTML = svg
+        }
+      } catch (error) {
+        if (!cancelled && elementRef.current) {
+          elementRef.current.innerHTML = `<pre style="margin:0;color:#ef4444;white-space:pre-wrap;">Mermaid render error: ${String(error)}</pre>`
+        }
+      }
+    }
+
+    void renderMermaid()
+
+    return () => {
+      cancelled = true
+    }
+  }, [chart])
+
+  return <div ref={elementRef} className={className} />
+}

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

@@ -0,0 +1,24 @@
+import { DefaultMetricCardsSlideHorizontal } from './default-metric-cards-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-cards/DefaultMetricCardsSlideHorizontal/Animated',
+  component: DefaultMetricCardsSlideHorizontal,
+  args: {
+    title: 'Metric Cards',
+    subtitle: 'A cards-first layout for metrics and KPI highlights.',
+    metrics: [
+      { value: '98%', label: 'Success rate' },
+      { value: '12ms', label: 'Latency' },
+      { value: '24K', label: 'Users' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/metric-cards/default-metric-cards-slide-Horizontal.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultMetricCardsSlideHorizontal } from './default-metric-cards-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-cards/DefaultMetricCardsSlideHorizontal',
+  component: DefaultMetricCardsSlideHorizontal,
+  args: {
+    title: 'Metric Cards',
+    subtitle: 'A cards-first layout for metrics and KPI highlights.',
+    metrics: [
+      { value: '98%', label: 'Success rate' },
+      { value: '12ms', label: 'Latency' },
+      { value: '24K', label: 'Users' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/metric-cards/default-metric-cards-slide-Horizontal.tsx

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

package/src/core/scene/slide/metric-cards/default-metric-cards-slide-Landscape.tsx

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

package/src/core/scene/slide/metric-cards/default-metric-cards-slide.animated.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultMetricCardsSlideLandscape } from './default-metric-cards-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/metric-cards/DefaultMetricCardsSlideLandscape/Animated',
+  component: DefaultMetricCardsSlideLandscape,
+  args: {
+    title: 'Metric Cards',
+    subtitle: 'A cards-first layout for metrics and KPI highlights.',
+    metrics: [
+      { value: '98%', label: 'Success rate' },
+      { value: '12ms', label: 'Latency' },
+      { value: '24K', label: 'Users' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/metric-cards/default-metric-cards-slide.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultMetricCardsSlideLandscape } from './default-metric-cards-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/metric-cards/DefaultMetricCardsSlideLandscape',
+  component: DefaultMetricCardsSlideLandscape,
+  args: {
+    title: 'Metric Cards',
+    subtitle: 'A cards-first layout for metrics and KPI highlights.',
+    metrics: [
+      { value: '98%', label: 'Success rate' },
+      { value: '12ms', label: 'Latency' },
+      { value: '24K', label: 'Users' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}