@vibecuting/video-project-core 0.1.24 → 0.1.26

package/src/core/scene/slide/before-after/default-before-after-slide-Horizontal.tsx

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

package/src/core/scene/slide/before-after/default-before-after-slide-Landscape.tsx

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

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

@@ -0,0 +1,23 @@
+import { DefaultBeforeAfterSlideLandscape } from './default-before-after-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/before-after/DefaultBeforeAfterSlideLandscape/Animated',
+  component: DefaultBeforeAfterSlideLandscape,
+  args: {
+    title: 'Before / After',
+    subtitle: 'Great for transformation stories and rollout summaries.',
+    beforeTitle: 'Manual routing',
+    afterTitle: 'Automated routing',
+    beforeBody: 'Teams used to copy commands and maintain separate variants by hand.',
+    afterBody: 'Now the same flow is derived from shared templates and typed props.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/before-after/default-before-after-slide.stories.tsx

@@ -0,0 +1,22 @@
+import { DefaultBeforeAfterSlideLandscape } from './default-before-after-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/before-after/DefaultBeforeAfterSlideLandscape',
+  component: DefaultBeforeAfterSlideLandscape,
+  args: {
+    title: 'Before / After',
+    subtitle: 'Great for transformation stories and rollout summaries.',
+    beforeTitle: 'Manual routing',
+    afterTitle: 'Automated routing',
+    beforeBody: 'Teams used to copy commands and maintain separate variants by hand.',
+    afterBody: 'Now the same flow is derived from shared templates and typed props.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/before-after/default-before-after-slide.tsx

@@ -0,0 +1,109 @@
+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 DefaultBeforeAfterSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  beforeTitle: string
+  afterTitle: string
+  beforeBody?: string
+  afterBody?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultBeforeAfterSlide',
+  description: 'Before and after slide',
+  sourceFile: 'src/core/scene/slide/before-after/default-before-after-slide.tsx',
+  pluginKey: 'core.slide.before-after',
+  tags: ['scene', 'slide', 'before-after'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultBeforeAfterSlideProps',
+})
+
+export const DefaultBeforeAfterSlide = 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(),
+      beforeTitle: z.string().min(1),
+      afterTitle: z.string().min(1),
+      beforeBody: z.string().optional(),
+      afterBody: z.string().optional(),
+    }),
+    component: function DefaultBeforeAfterSlide({ sceneId, sceneName, title, subtitle, beforeTitle, afterTitle, beforeBody, afterBody }: DefaultBeforeAfterSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(2, isPortrait ? 2 : 2, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 320,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 160,
+      })
+      const sectionPadding = isPortrait ? '48px 28px' : '72px 88px'
+      const titleMaxWidth = isPortrait ? Math.min(780, Math.round(runtime.width * 0.88)) : 980
+      const subtitleMaxWidth = isPortrait ? Math.min(660, Math.round(runtime.width * 0.84)) : 820
+      const cardMinHeight = grid.cardMinHeight
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#0f172a">
+          <section style={{ width: '100%', height: '100%', padding: sectionPadding, color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: titleMaxWidth, 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: subtitleMaxWidth, fontSize: scale.body, lineHeight: 1.55, opacity: 0.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div
+              style={{
+                marginTop: isPortrait ? 28 : 36,
+                display: 'grid',
+                gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+                gap: isPortrait ? 18 : grid.gap,
+              }}
+            >
+              {[
+                { heading: beforeTitle, body: beforeBody, accent: '#f97316', label: 'Before' },
+                { heading: afterTitle, body: afterBody, accent: '#22c55e', label: 'After' },
+              ].map((panel, index) => (
+                <SceneMotionLayer key={panel.heading} variant="card" delayIndex={index}>
+                  <article
+                    style={{
+                      minHeight: cardMinHeight,
+                      padding: isPortrait ? '18px 20px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`,
+                      borderRadius: 0,
+                      background: 'rgba(15,23,42,0.7)',
+                      border: '1px solid rgba(148,163,184,0.16)',
+                    }}
+                  >
+                    <p style={{ margin: 0, fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.64 }}>{panel.label}</p>
+                    <h2 style={{ margin: '18px 0 0', fontSize: scale.body, lineHeight: 1.2 }}>{panel.heading}</h2>
+                    {panel.body ? <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.42, opacity: 0.8 }}>{panel.body}</p> : null}
+                    <div style={{ marginTop: 20, width: 56, height: 10, borderRadius: 0, background: panel.accent }} />
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/before-after/index.ts

@@ -0,0 +1,4 @@
+export { DefaultBeforeAfterSlide } from './default-before-after-slide'
+export { componentMetadata } from './default-before-after-slide'
+export { DefaultBeforeAfterSlideLandscape, componentMetadata as DefaultBeforeAfterSlideLandscapeMetadata } from './default-before-after-slide-Landscape'
+export { DefaultBeforeAfterSlideHorizontal, componentMetadata as DefaultBeforeAfterSlideHorizontalMetadata } from './default-before-after-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultCalloutSlideHorizontal } from './default-callout-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/callout/DefaultCalloutSlideHorizontal/Animated',
+  component: DefaultCalloutSlideHorizontal,
+  args: {
+    title: 'Important',
+    subtitle: 'A slide that focuses the audience on one key point.',
+    callout: 'Reduce the steps from 8 to 3',
+    note: 'Pair this with a short spoken explanation.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultCalloutSlideHorizontal } from './default-callout-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/callout/DefaultCalloutSlideHorizontal',
+  component: DefaultCalloutSlideHorizontal,
+  args: {
+    title: 'Important',
+    subtitle: 'A slide that focuses the audience on one key point.',
+    callout: 'Reduce the steps from 8 to 3',
+    note: 'Pair this with a short spoken explanation.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { DefaultCalloutSlideLandscape } from './default-callout-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/callout/DefaultCalloutSlideLandscape/Animated',
+  component: DefaultCalloutSlideLandscape,
+  args: {
+    title: 'Important',
+    subtitle: 'A slide that focuses the audience on one key point.',
+    callout: 'Reduce the steps from 8 to 3',
+    note: 'Pair this with a short spoken explanation.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultCalloutSlideLandscape } from './default-callout-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/callout/DefaultCalloutSlideLandscape',
+  component: DefaultCalloutSlideLandscape,
+  args: {
+    title: 'Important',
+    subtitle: 'A slide that focuses the audience on one key point.',
+    callout: 'Reduce the steps from 8 to 3',
+    note: 'Pair this with a short spoken explanation.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,75 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultCalloutSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  callout: string
+  note?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultCalloutSlide',
+  description: 'Callout slide',
+  sourceFile: 'src/core/scene/slide/callout/default-callout-slide.tsx',
+  pluginKey: 'core.slide.callout',
+  tags: ['scene', 'slide', 'callout'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultCalloutSlideProps',
+})
+
+export const DefaultCalloutSlide = 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(),
+      callout: z.string().min(1),
+      note: z.string().optional(),
+    }),
+    component: function DefaultCalloutSlide({ sceneId, sceneName, title, subtitle, callout, note }: DefaultCalloutSlideProps) {
+      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={{ display: 'grid', placeItems: 'center', width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#0f172a', textAlign: 'center' }}>
+            <div style={{ maxWidth: isPortrait ? 620 : 960 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, 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 auto 0', maxWidth: isPortrait ? 560 : 780, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.8 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+              <SceneMotionLayer variant="panel" delayIndex={2}>
+                <div style={{ marginTop: isPortrait ? 24 : 32, padding: isPortrait ? '20px 22px' : '28px 32px', borderRadius: 0, background: '#0f172a', color: '#e2e8f0' }}>
+                  <p style={{ margin: 0, fontSize: Math.max(isPortrait ? scale.title * 0.66 : scale.title, 42), lineHeight: 1, letterSpacing: '-0.06em' }}>{callout}</p>
+                </div>
+              </SceneMotionLayer>
+              {note ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={3}>
+                  <p style={{ margin: '18px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, opacity: 0.76 }}>{note}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultCalloutSlide } from './default-callout-slide'
+export { componentMetadata } from './default-callout-slide'
+export { DefaultCalloutSlideLandscape, componentMetadata as DefaultCalloutSlideLandscapeMetadata } from './default-callout-slide-Landscape'
+export { DefaultCalloutSlideHorizontal, componentMetadata as DefaultCalloutSlideHorizontalMetadata } from './default-callout-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultChapterSlideHorizontal } from './default-chapter-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/chapter/DefaultChapterSlideHorizontal/Animated',
+  component: DefaultChapterSlideHorizontal,
+  args: {
+    chapterIndex: '01',
+    chapter: 'Opening',
+    title: 'Why This Matters',
+    description: 'A clean divider card for section changes and narrative resets.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultChapterSlideHorizontal } from './default-chapter-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/chapter/DefaultChapterSlideHorizontal',
+  component: DefaultChapterSlideHorizontal,
+  args: {
+    chapterIndex: '01',
+    chapter: 'Opening',
+    title: 'Why This Matters',
+    description: 'A clean divider card for section changes and narrative resets.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { DefaultChapterSlideLandscape } from './default-chapter-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/chapter/DefaultChapterSlideLandscape/Animated',
+  component: DefaultChapterSlideLandscape,
+  args: {
+    chapterIndex: '01',
+    chapter: 'Opening',
+    title: 'Why This Matters',
+    description: 'A clean divider card for section changes and narrative resets.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultChapterSlideLandscape } from './default-chapter-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/chapter/DefaultChapterSlideLandscape',
+  component: DefaultChapterSlideLandscape,
+  args: {
+    chapterIndex: '01',
+    chapter: 'Opening',
+    title: 'Why This Matters',
+    description: 'A clean divider card for section changes and narrative resets.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,91 @@
+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 DefaultChapterSlideProps extends DefaultSceneProps {
+  chapterIndex?: string
+  chapter: string
+  title: string
+  description?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultChapterSlide',
+  description: 'Chapter divider slide',
+  sourceFile: 'src/core/scene/slide/chapter/default-chapter-slide.tsx',
+  pluginKey: 'core.slide.chapter',
+  tags: ['scene', 'slide', 'chapter'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultChapterSlideProps',
+})
+
+export const DefaultChapterSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      chapterIndex: z.string().optional(),
+      chapter: z.string().min(1),
+      title: z.string().min(1),
+      description: z.string().optional(),
+    }),
+    component: function DefaultChapterSlide({
+      sceneId,
+      sceneName,
+      chapterIndex,
+      chapter,
+      title,
+      description,
+    }: DefaultChapterSlideProps) {
+      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="linear-gradient(135deg, #020617 0%, #0f172a 100%)"
+        >
+          <section
+            style={{
+              display: 'grid',
+              placeItems: 'center',
+              width: '100%',
+              height: '100%',
+              padding: isPortrait ? '44px 28px' : '72px 88px',
+              textAlign: 'center',
+            }}
+          >
+            <div style={{ maxWidth: isPortrait ? 620 : 960 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <p style={{ margin: 0, fontSize: scale.eyebrow, letterSpacing: '0.32em', textTransform: 'uppercase', opacity: 0.72 }}>
+                  {chapterIndex ? `Chapter ${chapterIndex}` : chapter}
+                </p>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1 style={{ margin: isPortrait ? '14px 0 0' : '18px 0 0', fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {description ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: '20px auto 0', maxWidth: isPortrait ? 560 : 720, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.82 }}>{description}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultChapterSlide } from './default-chapter-slide'
+export { componentMetadata } from './default-chapter-slide'
+export { DefaultChapterSlideLandscape, componentMetadata as DefaultChapterSlideLandscapeMetadata } from './default-chapter-slide-Landscape'
+export { DefaultChapterSlideHorizontal, componentMetadata as DefaultChapterSlideHorizontalMetadata } from './default-chapter-slide-Horizontal'