@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/scene/slide/testimonial-wall/default-testimonial-wall-slide.tsx

@@ -0,0 +1,82 @@
+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 DefaultTestimonialWallSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  quotes: Array<{
+    quote: string
+    author: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultTestimonialWallSlide',
+  description: 'Testimonial wall slide',
+  sourceFile: 'src/core/scene/slide/testimonial-wall/default-testimonial-wall-slide.tsx',
+  pluginKey: 'core.slide.testimonial-wall',
+  tags: ['scene', 'slide', 'testimonial-wall'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultTestimonialWallSlideProps',
+})
+
+export const DefaultTestimonialWallSlide = 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(),
+      quotes: z.array(z.object({ quote: z.string().min(1), author: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultTestimonialWallSlide({ sceneId, sceneName, title, subtitle, quotes }: DefaultTestimonialWallSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(quotes.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,
+      })
+      const cardMinHeight = grid.cardMinHeight
+      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 : 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 : 800, 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 }}>
+              {quotes.slice(0, 5).map((item, index) => (
+                <SceneMotionLayer key={item.author} variant="quote" delayIndex={index}>
+                  <article style={{ minHeight: 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.body * 0.82 : scale.body, lineHeight: 1.42, fontStyle: 'italic' }}>“{item.quote}”</p>
+                    <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, fontWeight: 700 }}>{item.author}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/testimonial-wall/index.ts

@@ -0,0 +1,4 @@
+export { DefaultTestimonialWallSlide } from './default-testimonial-wall-slide'
+export { componentMetadata } from './default-testimonial-wall-slide'
+export { DefaultTestimonialWallSlideLandscape, componentMetadata as DefaultTestimonialWallSlideLandscapeMetadata } from './default-testimonial-wall-slide-Landscape'
+export { DefaultTestimonialWallSlideHorizontal, componentMetadata as DefaultTestimonialWallSlideHorizontalMetadata } from './default-testimonial-wall-slide-Horizontal'

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

@@ -0,0 +1,23 @@
+import { DefaultThreeColumnSlideHorizontal } from './default-three-column-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/three-column/DefaultThreeColumnSlideHorizontal/Animated',
+  component: DefaultThreeColumnSlideHorizontal,
+  args: {
+    title: 'Three Ways Forward',
+    columns: [
+      { heading: 'Strategy', body: 'Frame the narrative with a clear goal.' },
+      { heading: 'Execution', body: 'Break the work into three visible tracks.' },
+      { heading: 'Outcome', body: 'Finish with a measurable result.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,22 @@
+import { DefaultThreeColumnSlideHorizontal } from './default-three-column-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/three-column/DefaultThreeColumnSlideHorizontal',
+  component: DefaultThreeColumnSlideHorizontal,
+  args: {
+    title: 'Three Ways Forward',
+    columns: [
+      { heading: 'Strategy', body: 'Frame the narrative with a clear goal.' },
+      { heading: 'Execution', body: 'Break the work into three visible tracks.' },
+      { heading: 'Outcome', body: 'Finish with a measurable result.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/three-column/default-three-column-slide-Horizontal.tsx

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

package/src/core/scene/slide/three-column/default-three-column-slide-Landscape.tsx

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

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

@@ -0,0 +1,23 @@
+import { DefaultThreeColumnSlideLandscape } from './default-three-column-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/three-column/DefaultThreeColumnSlideLandscape/Animated',
+  component: DefaultThreeColumnSlideLandscape,
+  args: {
+    title: 'Three Ways Forward',
+    columns: [
+      { heading: 'Strategy', body: 'Frame the narrative with a clear goal.' },
+      { heading: 'Execution', body: 'Break the work into three visible tracks.' },
+      { heading: 'Outcome', body: 'Finish with a measurable result.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/three-column/default-three-column-slide.stories.tsx

@@ -0,0 +1,22 @@
+import { DefaultThreeColumnSlideLandscape } from './default-three-column-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/three-column/DefaultThreeColumnSlideLandscape',
+  component: DefaultThreeColumnSlideLandscape,
+  args: {
+    title: 'Three Ways Forward',
+    columns: [
+      { heading: 'Strategy', body: 'Frame the narrative with a clear goal.' },
+      { heading: 'Execution', body: 'Break the work into three visible tracks.' },
+      { heading: 'Outcome', body: 'Finish with a measurable result.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/three-column/default-three-column-slide.tsx

@@ -0,0 +1,102 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { getSlideTypographyScale, SlideFrame } from '../_shared'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+
+export interface DefaultThreeColumnSlideProps extends DefaultSceneProps {
+  title: string
+  columns: Array<{
+    heading: string
+    body?: string
+    accent?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultThreeColumnSlide',
+  description: 'Three column slide template',
+  sourceFile: 'src/core/scene/slide/three-column/default-three-column-slide.tsx',
+  pluginKey: 'core.slide.three-column',
+  tags: ['scene', 'slide', 'three-column'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultThreeColumnSlideProps',
+})
+
+export const DefaultThreeColumnSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      columns: z.array(
+        z.object({
+          heading: z.string().min(1),
+          body: z.string().optional(),
+          accent: z.string().optional(),
+        }),
+      ),
+    }),
+    component: function DefaultThreeColumnSlide({
+      sceneId,
+      sceneName,
+      title,
+      columns,
+    }: DefaultThreeColumnSlideProps) {
+      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 ? '48px 28px' : '72px 88px',
+              color: '#0f172a',
+            }}
+          >
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 780 : 920, fontSize: scale.title, lineHeight: 0.95, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: isPortrait ? '1fr' : 'repeat(3, minmax(0, 1fr))',
+                gap: isPortrait ? 14 : 24,
+                marginTop: isPortrait ? 24 : 40,
+              }}
+            >
+              {columns.slice(0, 3).map((column, index) => (
+                <SceneMotionLayer key={column.heading} variant="card" delayIndex={index}>
+                  <article
+                    style={{
+                      minHeight: isPortrait ? Math.round(runtime.height * 0.16) : 320,
+                      padding: isPortrait ? '16px 18px' : 28,
+                      borderRadius: 0,
+                      background: '#ffffff',
+                      border: '1px solid rgba(148,163,184,0.26)',
+                      boxShadow: '0 16px 40px rgba(15,23,42,0.06)',
+                    }}
+                  >
+                    <h2 style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.88 : scale.body, lineHeight: 1.15 }}>{column.heading}</h2>
+                    {column.body ? <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.82 : scale.body, lineHeight: 1.45, opacity: 0.84 }}>{column.body}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/three-column/index.ts

@@ -0,0 +1,4 @@
+export { DefaultThreeColumnSlide } from './default-three-column-slide'
+export { componentMetadata } from './default-three-column-slide'
+export { DefaultThreeColumnSlideLandscape, componentMetadata as DefaultThreeColumnSlideLandscapeMetadata } from './default-three-column-slide-Landscape'
+export { DefaultThreeColumnSlideHorizontal, componentMetadata as DefaultThreeColumnSlideHorizontalMetadata } from './default-three-column-slide-Horizontal'

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

@@ -0,0 +1,25 @@
+import { DefaultTimelineSlideHorizontal } from './default-timeline-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/timeline/DefaultTimelineSlideHorizontal/Animated',
+  component: DefaultTimelineSlideHorizontal,
+  args: {
+    title: 'Launch Roadmap',
+    subtitle: 'A roadmap slide with parallel work streams and key milestones.',
+    items: [
+      { label: 'Q1', title: 'Discovery', description: 'Align scope, research, and prototype.', status: 'done' },
+      { label: 'Q2', title: 'Build', description: 'Ship the core experience and iterate.', status: 'current' },
+      { label: 'Q3', title: 'Scale', description: 'Optimize performance and adoption.', status: 'upcoming' },
+      { label: 'Q4', title: 'Extend', description: 'Add integrations and advanced workflows.', status: 'upcoming' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultTimelineSlideHorizontal } from './default-timeline-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/timeline/DefaultTimelineSlideHorizontal',
+  component: DefaultTimelineSlideHorizontal,
+  args: {
+    title: 'Launch Roadmap',
+    subtitle: 'A roadmap slide with parallel work streams and key milestones.',
+    items: [
+      { label: 'Q1', title: 'Discovery', description: 'Align scope, research, and prototype.', status: 'done' },
+      { label: 'Q2', title: 'Build', description: 'Ship the core experience and iterate.', status: 'current' },
+      { label: 'Q3', title: 'Scale', description: 'Optimize performance and adoption.', status: 'upcoming' },
+      { label: 'Q4', title: 'Extend', description: 'Add integrations and advanced workflows.', status: 'upcoming' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { DefaultTimelineSlideLandscape } from './default-timeline-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/timeline/DefaultTimelineSlideLandscape/Animated',
+  component: DefaultTimelineSlideLandscape,
+  args: {
+    title: 'Launch Roadmap',
+    subtitle: 'A roadmap slide with parallel work streams and key milestones.',
+    items: [
+      { label: 'Q1', title: 'Discovery', description: 'Align scope, research, and prototype.', status: 'done' },
+      { label: 'Q2', title: 'Build', description: 'Ship the core experience and iterate.', status: 'current' },
+      { label: 'Q3', title: 'Scale', description: 'Optimize performance and adoption.', status: 'upcoming' },
+      { label: 'Q4', title: 'Extend', description: 'Add integrations and advanced workflows.', status: 'upcoming' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultTimelineSlideLandscape } from './default-timeline-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/timeline/DefaultTimelineSlideLandscape',
+  component: DefaultTimelineSlideLandscape,
+  args: {
+    title: 'Launch Roadmap',
+    subtitle: 'A roadmap slide with parallel work streams and key milestones.',
+    items: [
+      { label: 'Q1', title: 'Discovery', description: 'Align scope, research, and prototype.', status: 'done' },
+      { label: 'Q2', title: 'Build', description: 'Ship the core experience and iterate.', status: 'current' },
+      { label: 'Q3', title: 'Scale', description: 'Optimize performance and adoption.', status: 'upcoming' },
+      { label: 'Q4', title: 'Extend', description: 'Add integrations and advanced workflows.', status: 'upcoming' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,142 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import { SlideFrame, getOverflowSafeSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultTimelineSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  items: Array<{
+    label: string
+    title: string
+    description?: string
+    status?: 'done' | 'current' | 'upcoming'
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultTimelineSlide',
+  description: 'Roadmap and timeline slide',
+  sourceFile: 'src/core/scene/slide/timeline/default-timeline-slide.tsx',
+  pluginKey: 'core.slide.timeline',
+  tags: ['scene', 'slide', 'timeline'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultTimelineSlideProps',
+})
+
+const statusColorMap = {
+  done: '#16a34a',
+  current: '#2563eb',
+  upcoming: '#94a3b8',
+} as const
+
+export const DefaultTimelineSlide = 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({
+          label: z.string().min(1),
+          title: z.string().min(1),
+          description: z.string().optional(),
+          status: z.enum(['done', 'current', 'upcoming']).optional(),
+        }),
+      ).min(1),
+    }),
+    component: function DefaultTimelineSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      items,
+    }: DefaultTimelineSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const { height, width } = runtime
+      const isPortrait = height > width
+      const scale = getSlideTypographyScale(height)
+      const grid = getOverflowSafeSlideGridLayout(items.length, isPortrait ? 2 : 4, {
+        runtimeWidth: width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: height,
+        reservedHeight: isPortrait ? 240 : 330,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 150,
+      })
+      const itemCount = Math.min(items.length, 5)
+      const dense = itemCount >= 3
+      const cardMinHeight = grid.cardMinHeight
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 100%)"
+        >
+          <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: isPortrait ? '14px 0 0' : '18px 0 0', maxWidth: isPortrait ? 580 : 860, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+                gap: isPortrait ? 14 : grid.gap,
+                marginTop: isPortrait ? 24 : 40,
+              }}
+            >
+              {items.slice(0, 5).map((item, index) => {
+                const status = item.status ?? (index === 0 ? 'current' : 'upcoming')
+                const accent = statusColorMap[status]
+                return (
+                  <SceneMotionLayer key={`${item.label}-${item.title}`} variant="timeline-item" delayIndex={index}>
+                    <article
+                      style={{
+                        minHeight: cardMinHeight,
+                        padding: isPortrait ? (dense ? '14px 16px 16px' : '18px 18px 20px') : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`,
+                        borderRadius: 0,
+                        background: 'rgba(15, 23, 42, 0.62)',
+                        border: '1px solid rgba(148,163,184,0.18)',
+                      }}
+                    >
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+                        <span style={{ fontSize: isPortrait ? scale.caption * 0.92 : scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.7 }}>{item.label}</span>
+                        <span style={{ width: 12, height: 12, borderRadius: 999, background: accent, boxShadow: `0 0 0 8px ${accent}22` }} />
+                      </div>
+                      <h2 style={{ margin: dense ? '12px 0 0' : '22px 0 0', fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.2 }}>{item.title}</h2>
+                      {item.description ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.4, opacity: 0.8 }}>{item.description}</p> : null}
+                    </article>
+                  </SceneMotionLayer>
+                )
+              })}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultTimelineSlide } from './default-timeline-slide'
+export { componentMetadata } from './default-timeline-slide'
+export { DefaultTimelineSlideLandscape, componentMetadata as DefaultTimelineSlideLandscapeMetadata } from './default-timeline-slide-Landscape'
+export { DefaultTimelineSlideHorizontal, componentMetadata as DefaultTimelineSlideHorizontalMetadata } from './default-timeline-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultTimelineCardsSlideHorizontal } from './default-timeline-cards-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/timeline-cards/DefaultTimelineCardsSlideHorizontal/Animated',
+  component: DefaultTimelineCardsSlideHorizontal,
+  args: {
+    title: 'Timeline Cards',
+    subtitle: 'A timeline layout made of stacked cards.',
+    cards: [
+      { title: 'Q1', detail: 'Research and planning' },
+      { title: 'Q2', detail: 'Implementation and review' },
+      { title: 'Q3', detail: 'Rollout and optimization' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}