@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/scene/slide/stats/default-stats-slide.tsx

@@ -0,0 +1,116 @@
+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 DefaultStatsSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  metrics: Array<{
+    value: string
+    label: string
+    note?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultStatsSlide',
+  description: 'Metric and KPI slide',
+  sourceFile: 'src/core/scene/slide/stats/default-stats-slide.tsx',
+  pluginKey: 'core.slide.stats',
+  tags: ['scene', 'slide', 'stats'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultStatsSlideProps',
+})
+
+export const DefaultStatsSlide = 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),
+          note: z.string().optional(),
+        }),
+      ).min(1),
+    }),
+    component: function DefaultStatsSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      metrics,
+    }: DefaultStatsSlideProps) {
+      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,
+      })
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#ffffff">
+          <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 : 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 : 860, fontSize: scale.body, lineHeight: 1.55, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : grid.gap, marginTop: isPortrait ? 24 : 40 }}>
+              {metrics.slice(0, 5).map((metric, index) => {
+                const palette = ['#2563eb', '#0f766e', '#ea580c', '#7c3aed'][index % 4]
+                return (
+                  <SceneMotionLayer key={`${metric.label}-${metric.value}`} variant="stat" delayIndex={index}>
+                    <article
+                      style={{
+                        minHeight: grid.cardMinHeight,
+                        padding: isPortrait ? '16px 18px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`,
+                        borderRadius: 0,
+                        background: '#f8fafc',
+                        border: '1px solid rgba(148,163,184,0.24)',
+                        boxShadow: '0 16px 40px rgba(15,23,42,0.06)',
+                      }}
+                    >
+                      <div style={{ width: 44, height: 44, borderRadius: 0, background: palette, opacity: 0.14 }} />
+                      <p style={{ margin: '18px 0 0', fontSize: Math.max(isPortrait ? scale.statValue * 0.86 : scale.statValue, 42), 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.28, fontWeight: 600 }}>{metric.label}</p>
+                      {metric.note ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.42, opacity: 0.78 }}>{metric.note}</p> : null}
+                    </article>
+                  </SceneMotionLayer>
+                )
+              })}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultStatsSlide } from './default-stats-slide'
+export { componentMetadata } from './default-stats-slide'
+export { DefaultStatsSlideLandscape, componentMetadata as DefaultStatsSlideLandscapeMetadata } from './default-stats-slide-Landscape'
+export { DefaultStatsSlideHorizontal, componentMetadata as DefaultStatsSlideHorizontalMetadata } from './default-stats-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultSwimlaneTimelineSlideHorizontal } from './default-swimlane-timeline-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/swimlane-timeline/DefaultSwimlaneTimelineSlideHorizontal/Animated',
+  component: DefaultSwimlaneTimelineSlideHorizontal,
+  args: {
+    title: 'Swimlane Timeline',
+    subtitle: 'Useful for parallel workstreams and dependencies.',
+    lanes: [
+      { label: 'Design', events: ['Research', 'Wireframe', 'Polish'] },
+      { label: 'Engineering', events: ['Prototype', 'Integrate', 'Ship'] },
+      { label: 'QA', events: ['Validate', 'Regression', 'Sign off'] },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-slide-Horizontal.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultSwimlaneTimelineSlideHorizontal } from './default-swimlane-timeline-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/swimlane-timeline/DefaultSwimlaneTimelineSlideHorizontal',
+  component: DefaultSwimlaneTimelineSlideHorizontal,
+  args: {
+    title: 'Swimlane Timeline',
+    subtitle: 'Useful for parallel workstreams and dependencies.',
+    lanes: [
+      { label: 'Design', events: ['Research', 'Wireframe', 'Polish'] },
+      { label: 'Engineering', events: ['Prototype', 'Integrate', 'Ship'] },
+      { label: 'QA', events: ['Validate', 'Regression', 'Sign off'] },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-slide-Horizontal.tsx

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

package/src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-slide-Landscape.tsx

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

package/src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-slide.animated.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultSwimlaneTimelineSlideLandscape } from './default-swimlane-timeline-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/swimlane-timeline/DefaultSwimlaneTimelineSlideLandscape/Animated',
+  component: DefaultSwimlaneTimelineSlideLandscape,
+  args: {
+    title: 'Swimlane Timeline',
+    subtitle: 'Useful for parallel workstreams and dependencies.',
+    lanes: [
+      { label: 'Design', events: ['Research', 'Wireframe', 'Polish'] },
+      { label: 'Engineering', events: ['Prototype', 'Integrate', 'Ship'] },
+      { label: 'QA', events: ['Validate', 'Regression', 'Sign off'] },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-slide.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultSwimlaneTimelineSlideLandscape } from './default-swimlane-timeline-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/swimlane-timeline/DefaultSwimlaneTimelineSlideLandscape',
+  component: DefaultSwimlaneTimelineSlideLandscape,
+  args: {
+    title: 'Swimlane Timeline',
+    subtitle: 'Useful for parallel workstreams and dependencies.',
+    lanes: [
+      { label: 'Design', events: ['Research', 'Wireframe', 'Polish'] },
+      { label: 'Engineering', events: ['Prototype', 'Integrate', 'Ship'] },
+      { label: 'QA', events: ['Validate', 'Regression', 'Sign off'] },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-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 { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultSwimlaneTimelineSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  lanes: Array<{
+    label: string
+    events: string[]
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultSwimlaneTimelineSlide',
+  description: 'Swimlane timeline slide',
+  sourceFile: 'src/core/scene/slide/swimlane-timeline/default-swimlane-timeline-slide.tsx',
+  pluginKey: 'core.slide.swimlane-timeline',
+  tags: ['scene', 'slide', 'swimlane-timeline'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultSwimlaneTimelineSlideProps',
+})
+
+export const DefaultSwimlaneTimelineSlide = 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(),
+      lanes: z.array(z.object({ label: z.string().min(1), events: z.array(z.string().min(1)).min(1) })).min(1),
+    }),
+    component: function DefaultSwimlaneTimelineSlide({ sceneId, sceneName, title, subtitle, lanes }: DefaultSwimlaneTimelineSlideProps) {
+      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="#ffffff">
+          <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', gap: isPortrait ? 12 : 18 }}>
+              {lanes.slice(0, 4).map((lane) => (
+                <SceneMotionLayer key={lane.label} variant="card">
+                  <div style={{ display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '140px 1fr', gap: isPortrait ? 10 : 16, alignItems: 'start' }}>
+                    <div style={{ fontSize: isPortrait ? scale.body * 0.92 : scale.body, fontWeight: 700, paddingTop: isPortrait ? 0 : 14 }}>{lane.label}</div>
+                    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(lane.events.length, isPortrait ? 1 : 4)}, minmax(0, 1fr))`, gap: isPortrait ? 10 : 14 }}>
+                      {lane.events.slice(0, 4).map((event, index) => (
+                        <SceneMotionLayer key={event} variant="timeline-item" delayIndex={index}>
+                          <article style={{ minHeight: isPortrait ? 92 : 120, padding: isPortrait ? '14px 16px' : 18, borderRadius: 0, background: ['#e2e8f0', '#bfdbfe', '#d1fae5', '#fce7f3'][index % 4], border: '1px solid rgba(148,163,184,0.18)' }}>
+                            <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.45 }}>{event}</p>
+                          </article>
+                        </SceneMotionLayer>
+                      ))}
+                    </div>
+                  </div>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/swimlane-timeline/index.ts

@@ -0,0 +1,4 @@
+export { DefaultSwimlaneTimelineSlide } from './default-swimlane-timeline-slide'
+export { componentMetadata } from './default-swimlane-timeline-slide'
+export { DefaultSwimlaneTimelineSlideLandscape, componentMetadata as DefaultSwimlaneTimelineSlideLandscapeMetadata } from './default-swimlane-timeline-slide-Landscape'
+export { DefaultSwimlaneTimelineSlideHorizontal, componentMetadata as DefaultSwimlaneTimelineSlideHorizontalMetadata } from './default-swimlane-timeline-slide-Horizontal'

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

@@ -0,0 +1,25 @@
+import { DefaultTableSlideHorizontal } from './default-table-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/table/DefaultTableSlideHorizontal/Animated',
+  component: DefaultTableSlideHorizontal,
+  args: {
+    title: 'Feature Matrix',
+    subtitle: 'Use a table when the comparison needs structure and scanability.',
+    columns: [{ heading: 'Plan' }, { heading: 'Latency' }, { heading: 'Seats' }, { heading: 'Support' }],
+    rows: [
+      { Plan: 'Starter', Latency: '35ms', Seats: '5', Support: 'Email' },
+      { Plan: 'Growth', Latency: '22ms', Seats: '25', Support: 'Priority' },
+      { Plan: 'Scale', Latency: '12ms', Seats: 'Unlimited', Support: 'Dedicated' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultTableSlideHorizontal } from './default-table-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/table/DefaultTableSlideHorizontal',
+  component: DefaultTableSlideHorizontal,
+  args: {
+    title: 'Feature Matrix',
+    subtitle: 'Use a table when the comparison needs structure and scanability.',
+    columns: [{ heading: 'Plan' }, { heading: 'Latency' }, { heading: 'Seats' }, { heading: 'Support' }],
+    rows: [
+      { Plan: 'Starter', Latency: '35ms', Seats: '5', Support: 'Email' },
+      { Plan: 'Growth', Latency: '22ms', Seats: '25', Support: 'Priority' },
+      { Plan: 'Scale', Latency: '12ms', Seats: 'Unlimited', Support: 'Dedicated' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/table/default-table-slide-Horizontal.tsx

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

package/src/core/scene/slide/table/default-table-slide-Landscape.tsx

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

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

@@ -0,0 +1,25 @@
+import { DefaultTableSlideLandscape } from './default-table-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/table/DefaultTableSlideLandscape/Animated',
+  component: DefaultTableSlideLandscape,
+  args: {
+    title: 'Feature Matrix',
+    subtitle: 'Use a table when the comparison needs structure and scanability.',
+    columns: [{ heading: 'Plan' }, { heading: 'Latency' }, { heading: 'Seats' }, { heading: 'Support' }],
+    rows: [
+      { Plan: 'Starter', Latency: '35ms', Seats: '5', Support: 'Email' },
+      { Plan: 'Growth', Latency: '22ms', Seats: '25', Support: 'Priority' },
+      { Plan: 'Scale', Latency: '12ms', Seats: 'Unlimited', Support: 'Dedicated' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/table/default-table-slide.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultTableSlideLandscape } from './default-table-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/table/DefaultTableSlideLandscape',
+  component: DefaultTableSlideLandscape,
+  args: {
+    title: 'Feature Matrix',
+    subtitle: 'Use a table when the comparison needs structure and scanability.',
+    columns: [{ heading: 'Plan' }, { heading: 'Latency' }, { heading: 'Seats' }, { heading: 'Support' }],
+    rows: [
+      { Plan: 'Starter', Latency: '35ms', Seats: '5', Support: 'Email' },
+      { Plan: 'Growth', Latency: '22ms', Seats: '25', Support: 'Priority' },
+      { Plan: 'Scale', Latency: '12ms', Seats: 'Unlimited', Support: 'Dedicated' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/table/default-table-slide.tsx

@@ -0,0 +1,115 @@
+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 DefaultTableSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  columns: Array<{
+    heading: string
+  }>
+  rows: Array<Record<string, string>>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultTableSlide',
+  description: 'Table and matrix slide',
+  sourceFile: 'src/core/scene/slide/table/default-table-slide.tsx',
+  pluginKey: 'core.slide.table',
+  tags: ['scene', 'slide', 'table'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultTableSlideProps',
+})
+
+export const DefaultTableSlide = 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(),
+      columns: z.array(z.object({ heading: z.string().min(1) })).min(1),
+      rows: z.array(z.record(z.string(), z.string())).min(1),
+    }),
+    component: function DefaultTableSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      columns,
+      rows,
+    }: DefaultTableSlideProps) {
+      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="#ffffff">
+          <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 : 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 : 860, fontSize: scale.body, lineHeight: 1.55, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div style={{ marginTop: 36, borderRadius: 0, overflow: 'hidden', border: '1px solid rgba(148,163,184,0.24)' }}>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: isPortrait ? '1fr' : `repeat(${columns.length}, minmax(0, 1fr))`,
+                    background: '#0f172a',
+                    color: '#e2e8f0',
+                  }}
+                >
+                  {columns.map((column) => (
+                    <div key={column.heading} style={{ padding: isPortrait ? '12px 14px' : '18px 24px', fontSize: isPortrait ? scale.body * 0.88 : scale.body, fontWeight: 700, minWidth: 0 }}>
+                      {column.heading}
+                    </div>
+                  ))}
+                </div>
+                {rows.map((row, rowIndex) => (
+                  <SceneMotionLayer key={rowIndex} variant="list-item" delayIndex={rowIndex}>
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: isPortrait ? '1fr' : `repeat(${columns.length}, minmax(0, 1fr))`,
+                        background: rowIndex % 2 === 0 ? '#f8fafc' : '#ffffff',
+                        borderTop: '1px solid rgba(148,163,184,0.18)',
+                      }}
+                    >
+                      {columns.map((column) => (
+                        <div key={column.heading} style={{ padding: isPortrait ? '12px 14px' : '18px 24px', fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.45, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                          {row[column.heading] ?? '—'}
+                        </div>
+                      ))}
+                    </div>
+                  </SceneMotionLayer>
+                ))}
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultTableSlide } from './default-table-slide'
+export { componentMetadata } from './default-table-slide'
+export { DefaultTableSlideLandscape, componentMetadata as DefaultTableSlideLandscapeMetadata } from './default-table-slide-Landscape'
+export { DefaultTableSlideHorizontal, componentMetadata as DefaultTableSlideHorizontalMetadata } from './default-table-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultTerminalSlideHorizontal } from './default-terminal-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/terminal/DefaultTerminalSlideHorizontal/Animated',
+  component: DefaultTerminalSlideHorizontal,
+  args: {
+    title: 'Build Output',
+    subtitle: 'A terminal frame for commands, logs, and install feedback.',
+    prompt: '$ pnpm build',
+    lines: ['> build completed', '✓ generated 12 assets', '✓ exit code 0'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}