@vibecuting/video-project-core 0.1.25 → 0.1.27

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

@@ -0,0 +1,20 @@
+import { DefaultQuoteSidecarSlideHorizontal } from './default-quote-sidecar-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/quote-sidecar/DefaultQuoteSidecarSlideHorizontal',
+  component: DefaultQuoteSidecarSlideHorizontal,
+  args: {
+    title: 'Quote Sidecar',
+    subtitle: 'A split layout for a quote and supporting intro copy.',
+    quote: 'The slide system is the product.',
+    author: 'Product Lead',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/quote-sidecar/default-quote-sidecar-slide-Horizontal.tsx

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

package/src/core/scene/slide/quote-sidecar/default-quote-sidecar-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultQuoteSidecarSlideLandscape } from './default-quote-sidecar-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/quote-sidecar/DefaultQuoteSidecarSlideLandscape/Animated',
+  component: DefaultQuoteSidecarSlideLandscape,
+  args: {
+    title: 'Quote Sidecar',
+    subtitle: 'A split layout for a quote and supporting intro copy.',
+    quote: 'The slide system is the product.',
+    author: 'Product Lead',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/quote-sidecar/default-quote-sidecar-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultQuoteSidecarSlideLandscape } from './default-quote-sidecar-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/quote-sidecar/DefaultQuoteSidecarSlideLandscape',
+  component: DefaultQuoteSidecarSlideLandscape,
+  args: {
+    title: 'Quote Sidecar',
+    subtitle: 'A split layout for a quote and supporting intro copy.',
+    quote: 'The slide system is the product.',
+    author: 'Product Lead',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/quote-sidecar/default-quote-sidecar-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, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultQuoteSidecarSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  quote: string
+  author?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultQuoteSidecarSlide',
+  description: 'Quote sidecar slide',
+  sourceFile: 'src/core/scene/slide/quote-sidecar/default-quote-sidecar-slide.tsx',
+  pluginKey: 'core.slide.quote-sidecar',
+  tags: ['scene', 'slide', 'quote-sidecar'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultQuoteSidecarSlideProps',
+})
+
+export const DefaultQuoteSidecarSlide = 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(),
+      quote: z.string().min(1),
+      author: z.string().optional(),
+    }),
+    component: function DefaultQuoteSidecarSlide({ sceneId, sceneName, title, subtitle, quote, author }: DefaultQuoteSidecarSlideProps) {
+      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="#020617">
+          <section style={{ display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '1fr 1.1fr', gap: isPortrait ? 18 : 28, width: '100%', height: '100%', padding: isPortrait ? '48px 28px' : '64px 80px', color: '#e2e8f0', alignItems: 'stretch' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: isPortrait ? 'flex-start' : 'center', minWidth: 0 }}>
+              <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: '14px 0 0', maxWidth: isPortrait ? 680 : 520, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.45, opacity: 0.8 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <SceneMotionLayer variant="quote" delayIndex={2}>
+              <article style={{ padding: isPortrait ? 18 : 24, borderRadius: 0, background: 'rgba(15,23,42,0.82)', border: '1px solid rgba(148,163,184,0.16)', display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: isPortrait ? Math.round(runtime.height * 0.3) : 0, overflow: 'hidden' }}>
+                <p
+                  style={{
+                    margin: 0,
+                    fontSize: isPortrait ? Math.min(Math.max(scale.body * 1.2, 28), 38) : Math.min(Math.max(scale.body * 1.7, 40), 52),
+                    lineHeight: 1.05,
+                    letterSpacing: '-0.05em',
+                    display: '-webkit-box',
+                    WebkitBoxOrient: 'vertical',
+                    WebkitLineClamp: 4,
+                    overflow: 'hidden',
+                  }}
+                >
+                  “{quote}”
+                </p>
+                {author ? <p style={{ margin: '14px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, opacity: 0.76 }}>{author}</p> : null}
+              </article>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/quote-sidecar/index.ts

@@ -0,0 +1,4 @@
+export { DefaultQuoteSidecarSlide } from './default-quote-sidecar-slide'
+export { componentMetadata } from './default-quote-sidecar-slide'
+export { DefaultQuoteSidecarSlideLandscape, componentMetadata as DefaultQuoteSidecarSlideLandscapeMetadata } from './default-quote-sidecar-slide-Landscape'
+export { DefaultQuoteSidecarSlideHorizontal, componentMetadata as DefaultQuoteSidecarSlideHorizontalMetadata } from './default-quote-sidecar-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultScreenshotComparisonSlideHorizontal } from './default-screenshot-comparison-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/screenshot-comparison/DefaultScreenshotComparisonSlideHorizontal/Animated',
+  component: DefaultScreenshotComparisonSlideHorizontal,
+  args: {
+    title: 'Screenshot Comparison',
+    subtitle: 'Use this layout to compare UI states or versions.',
+    beforeLabel: 'Before',
+    afterLabel: 'After',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultScreenshotComparisonSlideHorizontal } from './default-screenshot-comparison-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/screenshot-comparison/DefaultScreenshotComparisonSlideHorizontal',
+  component: DefaultScreenshotComparisonSlideHorizontal,
+  args: {
+    title: 'Screenshot Comparison',
+    subtitle: 'Use this layout to compare UI states or versions.',
+    beforeLabel: 'Before',
+    afterLabel: 'After',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/screenshot-comparison/default-screenshot-comparison-slide-Horizontal.tsx

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

package/src/core/scene/slide/screenshot-comparison/default-screenshot-comparison-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultScreenshotComparisonSlideLandscape } from './default-screenshot-comparison-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/screenshot-comparison/DefaultScreenshotComparisonSlideLandscape/Animated',
+  component: DefaultScreenshotComparisonSlideLandscape,
+  args: {
+    title: 'Screenshot Comparison',
+    subtitle: 'Use this layout to compare UI states or versions.',
+    beforeLabel: 'Before',
+    afterLabel: 'After',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/screenshot-comparison/default-screenshot-comparison-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultScreenshotComparisonSlideLandscape } from './default-screenshot-comparison-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/screenshot-comparison/DefaultScreenshotComparisonSlideLandscape',
+  component: DefaultScreenshotComparisonSlideLandscape,
+  args: {
+    title: 'Screenshot Comparison',
+    subtitle: 'Use this layout to compare UI states or versions.',
+    beforeLabel: 'Before',
+    afterLabel: 'After',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/screenshot-comparison/default-screenshot-comparison-slide.tsx

@@ -0,0 +1,77 @@
+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 DefaultScreenshotComparisonSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  beforeLabel: string
+  afterLabel: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultScreenshotComparisonSlide',
+  description: 'Screenshot comparison slide',
+  sourceFile: 'src/core/scene/slide/screenshot-comparison/default-screenshot-comparison-slide.tsx',
+  pluginKey: 'core.slide.screenshot-comparison',
+  tags: ['scene', 'slide', 'screenshot-comparison'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultScreenshotComparisonSlideProps',
+})
+
+export const DefaultScreenshotComparisonSlide = 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(),
+      beforeLabel: z.string().min(1),
+      afterLabel: z.string().min(1),
+    }),
+    component: function DefaultScreenshotComparisonSlide({ sceneId, sceneName, title, subtitle, beforeLabel, afterLabel }: DefaultScreenshotComparisonSlideProps) {
+      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' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 980, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 560 : 820, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 24 : 36, display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : 'repeat(2, minmax(0, 1fr))', gap: isPortrait ? 14 : 20 }}>
+              {[beforeLabel, afterLabel].map((label, index) => (
+                <SceneMotionLayer key={label} variant="panel" delayIndex={index}>
+                  <article style={{ minHeight: isPortrait ? 260 : 440, borderRadius: 0, background: '#ffffff', color: '#0f172a', border: '1px solid rgba(148,163,184,0.24)', boxShadow: '0 14px 32px rgba(15,23,42,0.05)', overflow: 'hidden' }}>
+                    <div style={{ padding: '16px 20px', background: '#f8fafc', borderBottom: '1px solid rgba(148,163,184,0.18)' }}>
+                      <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.88 : scale.body, fontWeight: 700 }}>{label}</p>
+                    </div>
+                    <div style={{ display: 'grid', placeItems: 'center', minHeight: isPortrait ? 200 : 370, color: '#94a3b8', fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase' }}>
+                      Screenshot
+                    </div>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/screenshot-comparison/index.ts

@@ -0,0 +1,4 @@
+export { DefaultScreenshotComparisonSlide } from './default-screenshot-comparison-slide'
+export { componentMetadata } from './default-screenshot-comparison-slide'
+export { DefaultScreenshotComparisonSlideLandscape, componentMetadata as DefaultScreenshotComparisonSlideLandscapeMetadata } from './default-screenshot-comparison-slide-Landscape'
+export { DefaultScreenshotComparisonSlideHorizontal, componentMetadata as DefaultScreenshotComparisonSlideHorizontalMetadata } from './default-screenshot-comparison-slide-Horizontal'

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

@@ -0,0 +1,20 @@
+import { DefaultSpeakerNotesSlideHorizontal } from './default-speaker-notes-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/speaker-notes/DefaultSpeakerNotesSlideHorizontal/Animated',
+  component: DefaultSpeakerNotesSlideHorizontal,
+  args: {
+    title: 'Speaker Notes',
+    subtitle: 'A supportive slide for presenter prompts.',
+    notes: ['Pause after the intro.', 'Call out the main metric.', 'End with the transition to questions.'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,19 @@
+import { DefaultSpeakerNotesSlideHorizontal } from './default-speaker-notes-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/speaker-notes/DefaultSpeakerNotesSlideHorizontal',
+  component: DefaultSpeakerNotesSlideHorizontal,
+  args: {
+    title: 'Speaker Notes',
+    subtitle: 'A supportive slide for presenter prompts.',
+    notes: ['Pause after the intro.', 'Call out the main metric.', 'End with the transition to questions.'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/speaker-notes/default-speaker-notes-slide-Horizontal.tsx

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

package/src/core/scene/slide/speaker-notes/default-speaker-notes-slide-Landscape.tsx

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

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

@@ -0,0 +1,20 @@
+import { DefaultSpeakerNotesSlideLandscape } from './default-speaker-notes-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/speaker-notes/DefaultSpeakerNotesSlideLandscape/Animated',
+  component: DefaultSpeakerNotesSlideLandscape,
+  args: {
+    title: 'Speaker Notes',
+    subtitle: 'A supportive slide for presenter prompts.',
+    notes: ['Pause after the intro.', 'Call out the main metric.', 'End with the transition to questions.'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/speaker-notes/default-speaker-notes-slide.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultSpeakerNotesSlideLandscape } from './default-speaker-notes-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/speaker-notes/DefaultSpeakerNotesSlideLandscape',
+  component: DefaultSpeakerNotesSlideLandscape,
+  args: {
+    title: 'Speaker Notes',
+    subtitle: 'A supportive slide for presenter prompts.',
+    notes: ['Pause after the intro.', 'Call out the main metric.', 'End with the transition to questions.'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/speaker-notes/default-speaker-notes-slide.tsx

@@ -0,0 +1,70 @@
+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 DefaultSpeakerNotesSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  notes: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultSpeakerNotesSlide',
+  description: 'Speaker notes slide',
+  sourceFile: 'src/core/scene/slide/speaker-notes/default-speaker-notes-slide.tsx',
+  pluginKey: 'core.slide.speaker-notes',
+  tags: ['scene', 'slide', 'speaker-notes'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultSpeakerNotesSlideProps',
+})
+
+export const DefaultSpeakerNotesSlide = 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(),
+      notes: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultSpeakerNotesSlide({ sceneId, sceneName, title, subtitle, notes }: DefaultSpeakerNotesSlideProps) {
+      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="#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', gap: isPortrait ? 12 : 18 }}>
+              {notes.slice(0, 6).map((note, index) => (
+                <SceneMotionLayer key={`${note}-${index}`} variant="card" delayIndex={index}>
+                  <article style={{ padding: isPortrait ? '16px 16px 18px' : 22, borderRadius: 0, background: '#ffffff', border: '1px solid rgba(148,163,184,0.24)' }}>
+                    <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5 }}>{note}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/speaker-notes/index.ts

@@ -0,0 +1,4 @@
+export { DefaultSpeakerNotesSlide } from './default-speaker-notes-slide'
+export { componentMetadata } from './default-speaker-notes-slide'
+export { DefaultSpeakerNotesSlideLandscape, componentMetadata as DefaultSpeakerNotesSlideLandscapeMetadata } from './default-speaker-notes-slide-Landscape'
+export { DefaultSpeakerNotesSlideHorizontal, componentMetadata as DefaultSpeakerNotesSlideHorizontalMetadata } from './default-speaker-notes-slide-Horizontal'

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

@@ -0,0 +1,23 @@
+import { DefaultSplitSlideHorizontal } from './default-split-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/split/DefaultSplitSlideHorizontal/Animated',
+  component: DefaultSplitSlideHorizontal,
+  args: {
+    title: 'Market Strategy',
+    subtitle: 'A split layout for context on the left and supporting detail on the right.',
+    leftTitle: 'The Problem',
+    leftBody: 'A concise statement of the problem being solved.',
+    rightTitle: 'The Plan',
+    rightBody: 'A short summary of the proposed execution path.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}