@vibecuting/video-project-core 0.1.24 → 0.1.26

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',
+  },
+}

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

@@ -0,0 +1,22 @@
+import { DefaultSplitSlideHorizontal } from './default-split-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/split/DefaultSplitSlideHorizontal',
+  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 Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { DefaultSplitSlideLandscape } from './default-split-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/split/DefaultSplitSlideLandscape/Animated',
+  component: DefaultSplitSlideLandscape,
+  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: '16:9',
+  },
+}

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

@@ -0,0 +1,22 @@
+import { DefaultSplitSlideLandscape } from './default-split-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/split/DefaultSplitSlideLandscape',
+  component: DefaultSplitSlideLandscape,
+  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 Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,108 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import { getSlideTypographyScale, SlideFrame } from '../_shared'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+
+export interface DefaultSplitSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  leftTitle: string
+  leftBody?: string
+  rightTitle: string
+  rightBody?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultSplitSlide',
+  description: 'Split slide template',
+  sourceFile: 'src/core/scene/slide/split/default-split-slide.tsx',
+  pluginKey: 'core.slide.split',
+  tags: ['scene', 'slide', 'split'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultSplitSlideProps',
+})
+
+export const DefaultSplitSlide = 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(),
+      leftTitle: z.string().min(1),
+      leftBody: z.string().optional(),
+      rightTitle: z.string().min(1),
+      rightBody: z.string().optional(),
+    }),
+    component: function DefaultSplitSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      leftTitle,
+      leftBody,
+      rightTitle,
+      rightBody,
+    }: DefaultSplitSlideProps) {
+      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}>
+          <section
+            style={{
+              display: 'grid',
+              gridTemplateColumns: isPortrait ? '1fr' : '1fr 1fr',
+              gap: isPortrait ? 20 : 40,
+              width: '100%',
+              height: '100%',
+              padding: isPortrait ? '44px 28px' : '72px 88px',
+              background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
+              color: '#0f172a',
+            }}
+          >
+            <div style={{ display: 'grid', alignContent: 'center', gap: isPortrait ? 14 : 20 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.94, letterSpacing: '-0.05em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.92 : scale.body, lineHeight: 1.5, opacity: 0.82 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <div style={{ display: 'grid', gap: isPortrait ? 14 : 24 }}>
+              <SceneMotionLayer variant="card">
+                <article style={{ padding: isPortrait ? '18px 18px 20px' : 28, borderRadius: 0, background: '#ffffff', border: '1px solid rgba(148,163,184,0.28)' }}>
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.eyebrow * 0.92 : scale.eyebrow, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.68 }}>
+                    {leftTitle}
+                  </p>
+                  {leftBody ? <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.45 }}>{leftBody}</p> : null}
+                </article>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="card" delayIndex={1}>
+                <article style={{ padding: isPortrait ? '18px 18px 20px' : 28, borderRadius: 0, background: '#ffffff', border: '1px solid rgba(148,163,184,0.28)' }}>
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.eyebrow * 0.92 : scale.eyebrow, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.68 }}>
+                    {rightTitle}
+                  </p>
+                  {rightBody ? <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.45 }}>{rightBody}</p> : null}
+                </article>
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultSplitSlide } from './default-split-slide'
+export { componentMetadata } from './default-split-slide'
+export { DefaultSplitSlideLandscape, componentMetadata as DefaultSplitSlideLandscapeMetadata } from './default-split-slide-Landscape'
+export { DefaultSplitSlideHorizontal, componentMetadata as DefaultSplitSlideHorizontalMetadata } from './default-split-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultSplitCardSlideHorizontal } from './default-split-card-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/split-card/DefaultSplitCardSlideHorizontal/Animated',
+  component: DefaultSplitCardSlideHorizontal,
+  args: {
+    title: 'Split Cards',
+    subtitle: 'A card-based split layout for balanced content.',
+    leftCard: 'Left content goes here.',
+    rightCard: 'Right content goes here.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultSplitCardSlideHorizontal } from './default-split-card-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/split-card/DefaultSplitCardSlideHorizontal',
+  component: DefaultSplitCardSlideHorizontal,
+  args: {
+    title: 'Split Cards',
+    subtitle: 'A card-based split layout for balanced content.',
+    leftCard: 'Left content goes here.',
+    rightCard: 'Right content goes here.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

package/src/core/scene/slide/split-card/default-split-card-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultSplitCardSlideLandscape } from './default-split-card-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/split-card/DefaultSplitCardSlideLandscape/Animated',
+  component: DefaultSplitCardSlideLandscape,
+  args: {
+    title: 'Split Cards',
+    subtitle: 'A card-based split layout for balanced content.',
+    leftCard: 'Left content goes here.',
+    rightCard: 'Right content goes here.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultSplitCardSlideLandscape } from './default-split-card-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/split-card/DefaultSplitCardSlideLandscape',
+  component: DefaultSplitCardSlideLandscape,
+  args: {
+    title: 'Split Cards',
+    subtitle: 'A card-based split layout for balanced content.',
+    leftCard: 'Left content goes here.',
+    rightCard: 'Right content goes here.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/split-card/default-split-card-slide.tsx

@@ -0,0 +1,72 @@
+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 DefaultSplitCardSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  leftCard: string
+  rightCard: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultSplitCardSlide',
+  description: 'Split card slide',
+  sourceFile: 'src/core/scene/slide/split-card/default-split-card-slide.tsx',
+  pluginKey: 'core.slide.split-card',
+  tags: ['scene', 'slide', 'split-card'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultSplitCardSlideProps',
+})
+
+export const DefaultSplitCardSlide = 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(),
+      leftCard: z.string().min(1),
+      rightCard: z.string().min(1),
+    }),
+    component: function DefaultSplitCardSlide({ sceneId, sceneName, title, subtitle, leftCard, rightCard }: DefaultSplitCardSlideProps) {
+      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', gridTemplateColumns: isPortrait ? '1fr' : 'repeat(2, minmax(0, 1fr))', gap: isPortrait ? 12 : 20 }}>
+              {[leftCard, rightCard].map((card, index) => (
+                <SceneMotionLayer key={card} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: isPortrait ? 160 : 300, padding: isPortrait ? '18px 18px 20px' : 28, 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.body * 0.86 : scale.body, lineHeight: 1.45 }}>{card}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/split-card/index.ts

@@ -0,0 +1,4 @@
+export { DefaultSplitCardSlide } from './default-split-card-slide'
+export { componentMetadata } from './default-split-card-slide'
+export { DefaultSplitCardSlideLandscape, componentMetadata as DefaultSplitCardSlideLandscapeMetadata } from './default-split-card-slide-Landscape'
+export { DefaultSplitCardSlideHorizontal, componentMetadata as DefaultSplitCardSlideHorizontalMetadata } from './default-split-card-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultSplitHeroSlideHorizontal } from './default-split-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/split-hero/DefaultSplitHeroSlideHorizontal/Animated',
+  component: DefaultSplitHeroSlideHorizontal,
+  args: {
+    title: 'Split Hero',
+    subtitle: 'A title slide that opens into two aligned columns.',
+    leftLabel: 'Product',
+    rightLabel: 'Platform',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultSplitHeroSlideHorizontal } from './default-split-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/split-hero/DefaultSplitHeroSlideHorizontal',
+  component: DefaultSplitHeroSlideHorizontal,
+  args: {
+    title: 'Split Hero',
+    subtitle: 'A title slide that opens into two aligned columns.',
+    leftLabel: 'Product',
+    rightLabel: 'Platform',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

package/src/core/scene/slide/split-hero/default-split-hero-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultSplitHeroSlideLandscape } from './default-split-hero-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/split-hero/DefaultSplitHeroSlideLandscape/Animated',
+  component: DefaultSplitHeroSlideLandscape,
+  args: {
+    title: 'Split Hero',
+    subtitle: 'A title slide that opens into two aligned columns.',
+    leftLabel: 'Product',
+    rightLabel: 'Platform',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}