@vibecuting/video-project-core 0.1.25 → 0.1.26

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

@@ -0,0 +1,82 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import { SlideFrame, getOverflowSafeSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultMetricCardsSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  metrics: Array<{
+    value: string
+    label: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultMetricCardsSlide',
+  description: 'Metric cards slide',
+  sourceFile: 'src/core/scene/slide/metric-cards/default-metric-cards-slide.tsx',
+  pluginKey: 'core.slide.metric-cards',
+  tags: ['scene', 'slide', 'metric-cards'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultMetricCardsSlideProps',
+})
+
+export const DefaultMetricCardsSlide = 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(),
+      metrics: z.array(z.object({ value: z.string().min(1), label: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultMetricCardsSlide({ sceneId, sceneName, title, subtitle, metrics }: DefaultMetricCardsSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(metrics.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 : 150,
+      })
+      const cardMinHeight = grid.cardMinHeight
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#f8fafc">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '48px 28px' : '72px 88px', color: '#0f172a' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 780 : 960, fontSize: scale.title, lineHeight: 0.94, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 680 : 800, fontSize: scale.body, lineHeight: 1.55, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 28 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 16 : grid.gap }}>
+              {metrics.slice(0, 5).map((metric, index) => (
+                <SceneMotionLayer key={metric.label} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: cardMinHeight, padding: isPortrait ? '18px 20px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: index % 2 === 0 ? '#ffffff' : '#eff6ff', border: '1px solid rgba(148,163,184,0.24)', boxShadow: '0 14px 32px rgba(15,23,42,0.05)' }}>
+                    <p style={{ margin: 0, fontSize: Math.max(isPortrait ? scale.statValue * 0.9 : scale.statValue, 40), lineHeight: 1, letterSpacing: '-0.06em', fontWeight: 700 }}>{metric.value}</p>
+                    <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.42, opacity: 0.78 }}>{metric.label}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/metric-cards/index.ts

@@ -0,0 +1,4 @@
+export { DefaultMetricCardsSlide } from './default-metric-cards-slide'
+export { componentMetadata } from './default-metric-cards-slide'
+export { DefaultMetricCardsSlideLandscape, componentMetadata as DefaultMetricCardsSlideLandscapeMetadata } from './default-metric-cards-slide-Landscape'
+export { DefaultMetricCardsSlideHorizontal, componentMetadata as DefaultMetricCardsSlideHorizontalMetadata } from './default-metric-cards-slide-Horizontal'

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

@@ -0,0 +1,27 @@
+import { DefaultMetricGridSlideHorizontal } from './default-metric-grid-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-grid/DefaultMetricGridSlideHorizontal/Animated',
+  component: DefaultMetricGridSlideHorizontal,
+  args: {
+    title: 'Metric Grid',
+    subtitle: 'A grid of headline numbers for status updates.',
+    metrics: [
+      { label: 'Users', value: '24K' },
+      { label: 'Growth', value: '+18%' },
+      { label: 'Latency', value: '18ms' },
+      { label: 'Retention', value: '91%' },
+      { label: 'Conversion', value: '4.8%' },
+      { label: 'NPS', value: '72' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,26 @@
+import { DefaultMetricGridSlideHorizontal } from './default-metric-grid-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-grid/DefaultMetricGridSlideHorizontal',
+  component: DefaultMetricGridSlideHorizontal,
+  args: {
+    title: 'Metric Grid',
+    subtitle: 'A grid of headline numbers for status updates.',
+    metrics: [
+      { label: 'Users', value: '24K' },
+      { label: 'Growth', value: '+18%' },
+      { label: 'Latency', value: '18ms' },
+      { label: 'Retention', value: '91%' },
+      { label: 'Conversion', value: '4.8%' },
+      { label: 'NPS', value: '72' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { DefaultMetricGridSlideLandscape } from './default-metric-grid-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/metric-grid/DefaultMetricGridSlideLandscape/Animated',
+  component: DefaultMetricGridSlideLandscape,
+  args: {
+    title: 'Metric Grid',
+    subtitle: 'A grid of headline numbers for status updates.',
+    metrics: [
+      { label: 'Users', value: '24K' },
+      { label: 'Growth', value: '+18%' },
+      { label: 'Latency', value: '18ms' },
+      { label: 'Retention', value: '91%' },
+      { label: 'Conversion', value: '4.8%' },
+      { label: 'NPS', value: '72' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,26 @@
+import { DefaultMetricGridSlideLandscape } from './default-metric-grid-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/metric-grid/DefaultMetricGridSlideLandscape',
+  component: DefaultMetricGridSlideLandscape,
+  args: {
+    title: 'Metric Grid',
+    subtitle: 'A grid of headline numbers for status updates.',
+    metrics: [
+      { label: 'Users', value: '24K' },
+      { label: 'Growth', value: '+18%' },
+      { label: 'Latency', value: '18ms' },
+      { label: 'Retention', value: '91%' },
+      { label: 'Conversion', value: '4.8%' },
+      { label: 'NPS', value: '72' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/metric-grid/default-metric-grid-slide.tsx

@@ -0,0 +1,75 @@
+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, getAdaptiveSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultMetricGridSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  metrics: Array<{
+    label: string
+    value: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultMetricGridSlide',
+  description: 'Metric grid slide',
+  sourceFile: 'src/core/scene/slide/metric-grid/default-metric-grid-slide.tsx',
+  pluginKey: 'core.slide.metric-grid',
+  tags: ['scene', 'slide', 'metric-grid'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultMetricGridSlideProps',
+})
+
+export const DefaultMetricGridSlide = 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(),
+      metrics: z.array(z.object({ label: z.string().min(1), value: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultMetricGridSlide({ sceneId, sceneName, title, subtitle, metrics }: DefaultMetricGridSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getAdaptiveSlideGridLayout(metrics.length, isPortrait ? 1 : 4)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#f8fafc">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#0f172a' }}>
+            <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.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 24 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 14 : grid.gap }}>
+              {metrics.slice(0, 6).map((metric, index) => (
+                <SceneMotionLayer key={metric.label} variant="stat" delayIndex={index}>
+                  <article style={{ minHeight: isPortrait ? 120 : grid.cardMinHeight, padding: isPortrait ? '16px 16px 18px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: '#ffffff', border: '1px solid rgba(148,163,184,0.24)', boxShadow: '0 14px 32px rgba(15,23,42,0.05)' }}>
+                    <p style={{ margin: 0, fontSize: isPortrait ? scale.caption * 0.9 : scale.caption, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.62 }}>{metric.label}</p>
+                    <p style={{ margin: '14px 0 0', fontSize: Math.max(isPortrait ? scale.statValue * 0.88 : scale.statValue, 42), lineHeight: 1, fontWeight: 700, color: ['#2563eb', '#0f766e', '#7c3aed'][index % 3] }}>{metric.value}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/metric-grid/index.ts

@@ -0,0 +1,4 @@
+export { DefaultMetricGridSlide } from './default-metric-grid-slide'
+export { componentMetadata } from './default-metric-grid-slide'
+export { DefaultMetricGridSlideLandscape, componentMetadata as DefaultMetricGridSlideLandscapeMetadata } from './default-metric-grid-slide-Landscape'
+export { DefaultMetricGridSlideHorizontal, componentMetadata as DefaultMetricGridSlideHorizontalMetadata } from './default-metric-grid-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultMetricListSlideHorizontal } from './default-metric-list-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-list/DefaultMetricListSlideHorizontal/Animated',
+  component: DefaultMetricListSlideHorizontal,
+  args: {
+    title: 'Metric List',
+    subtitle: 'A compact list for KPI explanations and notes.',
+    metrics: [
+      { label: 'Revenue', value: '$1.2M' },
+      { label: 'CAC', value: '$42' },
+      { label: 'LTV', value: '$310' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultMetricListSlideHorizontal } from './default-metric-list-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-list/DefaultMetricListSlideHorizontal',
+  component: DefaultMetricListSlideHorizontal,
+  args: {
+    title: 'Metric List',
+    subtitle: 'A compact list for KPI explanations and notes.',
+    metrics: [
+      { label: 'Revenue', value: '$1.2M' },
+      { label: 'CAC', value: '$42' },
+      { label: 'LTV', value: '$310' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { DefaultMetricListSlideLandscape } from './default-metric-list-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/metric-list/DefaultMetricListSlideLandscape/Animated',
+  component: DefaultMetricListSlideLandscape,
+  args: {
+    title: 'Metric List',
+    subtitle: 'A compact list for KPI explanations and notes.',
+    metrics: [
+      { label: 'Revenue', value: '$1.2M' },
+      { label: 'CAC', value: '$42' },
+      { label: 'LTV', value: '$310' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultMetricListSlideLandscape } from './default-metric-list-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/metric-list/DefaultMetricListSlideLandscape',
+  component: DefaultMetricListSlideLandscape,
+  args: {
+    title: 'Metric List',
+    subtitle: 'A compact list for KPI explanations and notes.',
+    metrics: [
+      { label: 'Revenue', value: '$1.2M' },
+      { label: 'CAC', value: '$42' },
+      { label: 'LTV', value: '$310' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/metric-list/default-metric-list-slide.tsx

@@ -0,0 +1,83 @@
+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 DefaultMetricListSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  metrics: Array<{
+    label: string
+    value: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultMetricListSlide',
+  description: 'Metric list slide',
+  sourceFile: 'src/core/scene/slide/metric-list/default-metric-list-slide.tsx',
+  pluginKey: 'core.slide.metric-list',
+  tags: ['scene', 'slide', 'metric-list'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultMetricListSlideProps',
+})
+
+export const DefaultMetricListSlide = 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(),
+      metrics: z.array(z.object({ label: z.string().min(1), value: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultMetricListSlide({ sceneId, sceneName, title, subtitle, metrics }: DefaultMetricListSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(metrics.length, isPortrait ? 2 : 1, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 320,
+        minCardWidth: isPortrait ? 180 : 220,
+        minCardHeight: isPortrait ? 100 : 112,
+      })
+      const itemHeight = grid.cardMinHeight
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#020617">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '48px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 780 : 980, fontSize: scale.title, lineHeight: 0.94, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 680 : 820, fontSize: scale.body, lineHeight: 1.55, opacity: 0.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 28 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : 14 }}>
+              {metrics.slice(0, 5).map((metric, index) => (
+                <SceneMotionLayer key={metric.label} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: itemHeight, display: 'grid', gridTemplateColumns: '1fr', gap: isPortrait ? 8 : 18, padding: isPortrait ? '14px 16px' : '18px 24px', borderRadius: 0, background: 'rgba(15,23,42,0.76)', border: '1px solid rgba(148,163,184,0.16)' }}>
+                    <div style={{ fontSize: isPortrait ? scale.body * 0.84 : scale.body, fontWeight: 700 }}>{metric.label}</div>
+                    <div style={{ fontSize: isPortrait ? scale.body * 0.88 : scale.body, lineHeight: 1.42 }}>{metric.value}</div>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/metric-list/index.ts

@@ -0,0 +1,4 @@
+export { DefaultMetricListSlide } from './default-metric-list-slide'
+export { componentMetadata } from './default-metric-list-slide'
+export { DefaultMetricListSlideLandscape, componentMetadata as DefaultMetricListSlideLandscapeMetadata } from './default-metric-list-slide-Landscape'
+export { DefaultMetricListSlideHorizontal, componentMetadata as DefaultMetricListSlideHorizontalMetadata } from './default-metric-list-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultMetricShowcaseSlideHorizontal } from './default-metric-showcase-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-showcase/DefaultMetricShowcaseSlideHorizontal/Animated',
+  component: DefaultMetricShowcaseSlideHorizontal,
+  args: {
+    title: 'Metric Showcase',
+    subtitle: 'One of the final metric-heavy layout families.',
+    metrics: [
+      { value: '98%', label: 'Success rate', note: 'Across all runs' },
+      { value: '12ms', label: 'Latency', note: 'Median response time' },
+      { value: '24K', label: 'Users', note: 'Monthly active users' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultMetricShowcaseSlideHorizontal } from './default-metric-showcase-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/metric-showcase/DefaultMetricShowcaseSlideHorizontal',
+  component: DefaultMetricShowcaseSlideHorizontal,
+  args: {
+    title: 'Metric Showcase',
+    subtitle: 'One of the final metric-heavy layout families.',
+    metrics: [
+      { value: '98%', label: 'Success rate', note: 'Across all runs' },
+      { value: '12ms', label: 'Latency', note: 'Median response time' },
+      { value: '24K', label: 'Users', note: 'Monthly active users' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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