@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultAbstractBackgroundCoverSlideHorizontal } from './default-abstract-background-cover-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideHorizontal/Animated',
+  component: DefaultAbstractBackgroundCoverSlideHorizontal,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultAbstractBackgroundCoverSlideHorizontal } from './default-abstract-background-cover-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideHorizontal',
+  component: DefaultAbstractBackgroundCoverSlideHorizontal,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.tsx

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

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Landscape.tsx

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

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.animated.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultAbstractBackgroundCoverSlideLandscape } from './default-abstract-background-cover-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideLandscape/Animated',
+  component: DefaultAbstractBackgroundCoverSlideLandscape,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultAbstractBackgroundCoverSlideLandscape } from './default-abstract-background-cover-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideLandscape',
+  component: DefaultAbstractBackgroundCoverSlideLandscape,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.tsx

@@ -0,0 +1,69 @@
+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 DefaultAbstractBackgroundCoverSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  kicker?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultAbstractBackgroundCoverSlide',
+  description: 'Abstract background cover slide',
+  sourceFile: 'src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.tsx',
+  pluginKey: 'core.slide.abstract-background-cover',
+  tags: ['scene', 'slide', 'cover', 'abstract'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultAbstractBackgroundCoverSlideProps',
+})
+
+export const DefaultAbstractBackgroundCoverSlide = 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(),
+      kicker: z.string().optional(),
+    }),
+    component: function DefaultAbstractBackgroundCoverSlide({ sceneId, sceneName, title, subtitle, kicker }: DefaultAbstractBackgroundCoverSlideProps) {
+      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="radial-gradient(circle at top left, #2563eb 0%, #020617 60%)">
+          <section style={{ display: 'grid', placeItems: 'center', width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0', textAlign: 'center' }}>
+            <div style={{ maxWidth: isPortrait ? 620 : 980 }}>
+              {kicker ? (
+                <SceneMotionLayer variant="hero-copy">
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.eyebrow * 0.9 : scale.eyebrow, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.66 }}>{kicker}</p>
+                </SceneMotionLayer>
+              ) : null}
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1 style={{ margin: isPortrait ? '14px 0 0' : '20px 0 0', fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.06em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: isPortrait ? '16px auto 0' : '20px auto 0', maxWidth: isPortrait ? 560 : 760, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.8 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/abstract-background-cover/index.ts

@@ -0,0 +1,4 @@
+export { DefaultAbstractBackgroundCoverSlide } from './default-abstract-background-cover-slide'
+export { componentMetadata } from './default-abstract-background-cover-slide'
+export { DefaultAbstractBackgroundCoverSlideLandscape, componentMetadata as DefaultAbstractBackgroundCoverSlideLandscapeMetadata } from './default-abstract-background-cover-slide-Landscape'
+export { DefaultAbstractBackgroundCoverSlideHorizontal, componentMetadata as DefaultAbstractBackgroundCoverSlideHorizontalMetadata } from './default-abstract-background-cover-slide-Horizontal'

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

@@ -0,0 +1,26 @@
+import { DefaultAgendaSlideHorizontal } from './default-agenda-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideHorizontal/Animated',
+  component: DefaultAgendaSlideHorizontal,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,25 @@
+import { DefaultAgendaSlideHorizontal } from './default-agenda-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideHorizontal',
+  component: DefaultAgendaSlideHorizontal,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { DefaultAgendaSlideLandscape } from './default-agenda-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideLandscape/Animated',
+  component: DefaultAgendaSlideLandscape,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,25 @@
+import { DefaultAgendaSlideLandscape } from './default-agenda-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideLandscape',
+  component: DefaultAgendaSlideLandscape,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,136 @@
+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 DefaultAgendaSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  items: Array<{
+    title: string
+    detail?: string
+    active?: boolean
+  }>
+  footer?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultAgendaSlide',
+  description: 'Agenda and outline slide',
+  sourceFile: 'src/core/scene/slide/agenda/default-agenda-slide.tsx',
+  pluginKey: 'core.slide.agenda',
+  tags: ['scene', 'slide', 'agenda'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultAgendaSlideProps',
+})
+
+export const DefaultAgendaSlide = 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(),
+      items: z.array(
+        z.object({
+          title: z.string().min(1),
+          detail: z.string().optional(),
+          active: z.boolean().optional(),
+        }),
+      ).min(1),
+      footer: z.string().optional(),
+    }),
+    component: function DefaultAgendaSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      items,
+      footer,
+    }: DefaultAgendaSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(items.length, isPortrait ? 2 : 2, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 320,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 110 : 150,
+      })
+
+      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: 'grid',
+              gridTemplateRows: 'auto 1fr auto',
+              gap: isPortrait ? 20 : 32,
+            }}
+          >
+            <div>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 960, 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>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+                gap: isPortrait ? 12 : 20,
+                alignContent: 'start',
+              }}
+            >
+              {items.slice(0, 5).map((item, index) => {
+                const active = item.active ?? index === 0
+                return (
+                  <SceneMotionLayer key={item.title} variant="card" delayIndex={index}>
+                    <article
+                      style={{
+                        minHeight: grid.cardMinHeight,
+                        padding: isPortrait ? '16px 16px 18px' : 24,
+                        borderRadius: 0,
+                        background: active ? 'rgba(59,130,246,0.16)' : 'rgba(15, 23, 42, 0.62)',
+                        border: `1px solid ${active ? 'rgba(96,165,250,0.34)' : 'rgba(148,163,184,0.18)'}`,
+                      }}
+                    >
+                      <p style={{ margin: 0, fontSize: isPortrait ? scale.eyebrow * 0.9 : scale.eyebrow, letterSpacing: '0.26em', textTransform: 'uppercase', opacity: 0.72 }}>
+                        {String(index + 1).padStart(2, '0')}
+                      </p>
+                      <h2 style={{ margin: '16px 0 0', fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.2 }}>{item.title}</h2>
+                      {item.detail ? <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.82 : scale.body, lineHeight: 1.42, opacity: 0.76 }}>{item.detail}</p> : null}
+                    </article>
+                  </SceneMotionLayer>
+                )
+              })}
+            </div>
+            {footer ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={items.length + 1}>
+                <p style={{ margin: 0, fontSize: scale.caption, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.62 }}>{footer}</p>
+              </SceneMotionLayer>
+            ) : null}
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultAgendaSlide } from './default-agenda-slide'
+export { componentMetadata } from './default-agenda-slide'
+export { DefaultAgendaSlideLandscape, componentMetadata as DefaultAgendaSlideLandscapeMetadata } from './default-agenda-slide-Landscape'
+export { DefaultAgendaSlideHorizontal, componentMetadata as DefaultAgendaSlideHorizontalMetadata } from './default-agenda-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultAgendaCardsSlideHorizontal } from './default-agenda-cards-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/agenda-cards/DefaultAgendaCardsSlideHorizontal/Animated',
+  component: DefaultAgendaCardsSlideHorizontal,
+  args: {
+    title: 'Agenda Cards',
+    subtitle: 'A more visual agenda layout.',
+    items: [
+      { title: 'Intro', detail: 'Set the context' },
+      { title: 'Demo', detail: 'Show the workflow' },
+      { title: 'Discussion', detail: 'Review tradeoffs' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultAgendaCardsSlideHorizontal } from './default-agenda-cards-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/agenda-cards/DefaultAgendaCardsSlideHorizontal',
+  component: DefaultAgendaCardsSlideHorizontal,
+  args: {
+    title: 'Agenda Cards',
+    subtitle: 'A more visual agenda layout.',
+    items: [
+      { title: 'Intro', detail: 'Set the context' },
+      { title: 'Demo', detail: 'Show the workflow' },
+      { title: 'Discussion', detail: 'Review tradeoffs' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { DefaultAgendaCardsSlideLandscape } from './default-agenda-cards-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/agenda-cards/DefaultAgendaCardsSlideLandscape/Animated',
+  component: DefaultAgendaCardsSlideLandscape,
+  args: {
+    title: 'Agenda Cards',
+    subtitle: 'A more visual agenda layout.',
+    items: [
+      { title: 'Intro', detail: 'Set the context' },
+      { title: 'Demo', detail: 'Show the workflow' },
+      { title: 'Discussion', detail: 'Review tradeoffs' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultAgendaCardsSlideLandscape } from './default-agenda-cards-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/agenda-cards/DefaultAgendaCardsSlideLandscape',
+  component: DefaultAgendaCardsSlideLandscape,
+  args: {
+    title: 'Agenda Cards',
+    subtitle: 'A more visual agenda layout.',
+    items: [
+      { title: 'Intro', detail: 'Set the context' },
+      { title: 'Demo', detail: 'Show the workflow' },
+      { title: 'Discussion', detail: 'Review tradeoffs' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}