@vibecuting/video-project-core 0.1.25 → 0.1.26

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

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

@@ -0,0 +1,81 @@
+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 DefaultAgendaCardsSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  items: Array<{
+    title: string
+    detail?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultAgendaCardsSlide',
+  description: 'Agenda cards slide',
+  sourceFile: 'src/core/scene/slide/agenda-cards/default-agenda-cards-slide.tsx',
+  pluginKey: 'core.slide.agenda-cards',
+  tags: ['scene', 'slide', 'agenda-cards'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultAgendaCardsSlideProps',
+})
+
+export const DefaultAgendaCardsSlide = 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() })).min(1),
+    }),
+    component: function DefaultAgendaCardsSlide({ sceneId, sceneName, title, subtitle, items }: DefaultAgendaCardsSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(items.length, isPortrait ? 2 : 3, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 330,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 150,
+      })
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#ffffff">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '48px 28px' : '72px 88px', color: '#0f172a' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 780 : 960, fontSize: scale.title, lineHeight: 0.94, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 680 : 800, fontSize: scale.body, lineHeight: 1.55, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 28 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 16 : grid.gap }}>
+              {items.slice(0, 5).map((item, index) => (
+                <SceneMotionLayer key={item.title} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: grid.cardMinHeight, padding: isPortrait ? '18px 20px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: index % 2 === 0 ? '#f8fafc' : '#eff6ff', border: '1px solid rgba(148,163,184,0.24)' }}>
+                    <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.88 : scale.body, fontWeight: 700 }}>{item.title}</p>
+                    {item.detail ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.42, opacity: 0.78 }}>{item.detail}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultAgendaCardsSlide } from './default-agenda-cards-slide'
+export { componentMetadata } from './default-agenda-cards-slide'
+export { DefaultAgendaCardsSlideLandscape, componentMetadata as DefaultAgendaCardsSlideLandscapeMetadata } from './default-agenda-cards-slide-Landscape'
+export { DefaultAgendaCardsSlideHorizontal, componentMetadata as DefaultAgendaCardsSlideHorizontalMetadata } from './default-agenda-cards-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultAnnotationSlideHorizontal } from './default-annotation-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/annotation/DefaultAnnotationSlideHorizontal/Animated',
+  component: DefaultAnnotationSlideHorizontal,
+  args: {
+    title: 'Annotations',
+    subtitle: 'Useful for margin notes and pointed explanations.',
+    annotations: [
+      { label: 'Note 1', detail: 'This label clarifies the main point.' },
+      { label: 'Note 2', detail: 'This one captures the edge case.' },
+      { label: 'Note 3', detail: 'This one gives the audience a shortcut.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultAnnotationSlideHorizontal } from './default-annotation-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/annotation/DefaultAnnotationSlideHorizontal',
+  component: DefaultAnnotationSlideHorizontal,
+  args: {
+    title: 'Annotations',
+    subtitle: 'Useful for margin notes and pointed explanations.',
+    annotations: [
+      { label: 'Note 1', detail: 'This label clarifies the main point.' },
+      { label: 'Note 2', detail: 'This one captures the edge case.' },
+      { label: 'Note 3', detail: 'This one gives the audience a shortcut.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { DefaultAnnotationSlideLandscape } from './default-annotation-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/annotation/DefaultAnnotationSlideLandscape/Animated',
+  component: DefaultAnnotationSlideLandscape,
+  args: {
+    title: 'Annotations',
+    subtitle: 'Useful for margin notes and pointed explanations.',
+    annotations: [
+      { label: 'Note 1', detail: 'This label clarifies the main point.' },
+      { label: 'Note 2', detail: 'This one captures the edge case.' },
+      { label: 'Note 3', detail: 'This one gives the audience a shortcut.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultAnnotationSlideLandscape } from './default-annotation-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/annotation/DefaultAnnotationSlideLandscape',
+  component: DefaultAnnotationSlideLandscape,
+  args: {
+    title: 'Annotations',
+    subtitle: 'Useful for margin notes and pointed explanations.',
+    annotations: [
+      { label: 'Note 1', detail: 'This label clarifies the main point.' },
+      { label: 'Note 2', detail: 'This one captures the edge case.' },
+      { label: 'Note 3', detail: 'This one gives the audience a shortcut.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/annotation/default-annotation-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, getAdaptiveSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultAnnotationSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  annotations: Array<{
+    label: string
+    detail: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultAnnotationSlide',
+  description: 'Annotation slide',
+  sourceFile: 'src/core/scene/slide/annotation/default-annotation-slide.tsx',
+  pluginKey: 'core.slide.annotation',
+  tags: ['scene', 'slide', 'annotation'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultAnnotationSlideProps',
+})
+
+export const DefaultAnnotationSlide = 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(),
+      annotations: z.array(z.object({ label: z.string().min(1), detail: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultAnnotationSlide({ sceneId, sceneName, title, subtitle, annotations }: DefaultAnnotationSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getAdaptiveSlideGridLayout(annotations.length, isPortrait ? 1 : 3)
+
+      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: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : grid.gap }}>
+              {annotations.slice(0, 6).map((annotation, index) => (
+                <SceneMotionLayer key={annotation.label} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: isPortrait ? 120 : grid.cardMinHeight, padding: isPortrait ? '16px 16px 18px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, 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.caption * 0.9 : scale.caption, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.62 }}>{annotation.label}</p>
+                    <p style={{ margin: '14px 0 0', fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.45, opacity: 0.86 }}>{annotation.detail}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultAnnotationSlide } from './default-annotation-slide'
+export { componentMetadata } from './default-annotation-slide'
+export { DefaultAnnotationSlideLandscape, componentMetadata as DefaultAnnotationSlideLandscapeMetadata } from './default-annotation-slide-Landscape'
+export { DefaultAnnotationSlideHorizontal, componentMetadata as DefaultAnnotationSlideHorizontalMetadata } from './default-annotation-slide-Horizontal'

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

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

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

@@ -0,0 +1,22 @@
+import { DefaultBeforeAfterSlideHorizontal } from './default-before-after-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/before-after/DefaultBeforeAfterSlideHorizontal',
+  component: DefaultBeforeAfterSlideHorizontal,
+  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: '9:16',
+  },
+}