@vibecuting/video-project-core 0.1.25 → 0.1.27

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

@@ -0,0 +1,20 @@
+import { DefaultTerminalSlideHorizontal } from './default-terminal-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/terminal/DefaultTerminalSlideHorizontal',
+  component: DefaultTerminalSlideHorizontal,
+  args: {
+    title: 'Build Output',
+    subtitle: 'A terminal frame for commands, logs, and install feedback.',
+    prompt: '$ pnpm build',
+    lines: ['> build completed', '✓ generated 12 assets', '✓ exit code 0'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { DefaultTerminalSlideLandscape } from './default-terminal-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/terminal/DefaultTerminalSlideLandscape/Animated',
+  component: DefaultTerminalSlideLandscape,
+  args: {
+    title: 'Build Output',
+    subtitle: 'A terminal frame for commands, logs, and install feedback.',
+    prompt: '$ pnpm build',
+    lines: ['> build completed', '✓ generated 12 assets', '✓ exit code 0'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultTerminalSlideLandscape } from './default-terminal-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/terminal/DefaultTerminalSlideLandscape',
+  component: DefaultTerminalSlideLandscape,
+  args: {
+    title: 'Build Output',
+    subtitle: 'A terminal frame for commands, logs, and install feedback.',
+    prompt: '$ pnpm build',
+    lines: ['> build completed', '✓ generated 12 assets', '✓ exit code 0'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,85 @@
+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 DefaultTerminalSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  prompt?: string
+  lines: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultTerminalSlide',
+  description: 'Terminal command slide',
+  sourceFile: 'src/core/scene/slide/terminal/default-terminal-slide.tsx',
+  pluginKey: 'core.slide.terminal',
+  tags: ['scene', 'slide', 'terminal'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultTerminalSlideProps',
+})
+
+export const DefaultTerminalSlide = 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(),
+      prompt: z.string().optional(),
+      lines: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultTerminalSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      prompt,
+      lines,
+    }: DefaultTerminalSlideProps) {
+      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} background="#020617">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 640 : 980, fontSize: isPortrait ? scale.title * 0.76 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: isPortrait ? '14px 0 0' : '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}
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div style={{ marginTop: isPortrait ? 24 : 36, borderRadius: 0, overflow: 'hidden', border: '1px solid rgba(148,163,184,0.18)', background: '#0f172a' }}>
+                <div style={{ display: 'flex', gap: 8, padding: isPortrait ? 12 : 16, borderBottom: '1px solid rgba(148,163,184,0.12)' }}>
+                  <span style={{ width: 12, height: 12, borderRadius: 0, background: '#ef4444' }} />
+                  <span style={{ width: 12, height: 12, borderRadius: 0, background: '#f59e0b' }} />
+                  <span style={{ width: 12, height: 12, borderRadius: 0, background: '#22c55e' }} />
+                </div>
+                <pre style={{ margin: 0, padding: isPortrait ? 18 : 28, fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.65, whiteSpace: 'pre-wrap' }}>
+                  <code>
+                    {(prompt ? `${prompt}\n` : '') + lines.join('\n')}
+                  </code>
+                </pre>
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultTerminalSlide } from './default-terminal-slide'
+export { componentMetadata } from './default-terminal-slide'
+export { DefaultTerminalSlideLandscape, componentMetadata as DefaultTerminalSlideLandscapeMetadata } from './default-terminal-slide-Landscape'
+export { DefaultTerminalSlideHorizontal, componentMetadata as DefaultTerminalSlideHorizontalMetadata } from './default-terminal-slide-Horizontal'

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

@@ -0,0 +1,25 @@
+import { DefaultTestimonialGridSlideHorizontal } from './default-testimonial-grid-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-grid/DefaultTestimonialGridSlideHorizontal/Animated',
+  component: DefaultTestimonialGridSlideHorizontal,
+  args: {
+    title: 'What users say',
+    subtitle: 'A denser testimonial layout for multiple voices.',
+    testimonials: [
+      { quote: 'The new workflow is much easier to explain.', author: 'Sam, Ops' },
+      { quote: 'Templates make repeatable work much faster.', author: 'Maya, PM' },
+      { quote: 'The visuals feel polished without extra effort.', author: 'Liam, Designer' },
+      { quote: 'It is clear how to scale the presentation now.', author: 'Nora, Eng' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultTestimonialGridSlideHorizontal } from './default-testimonial-grid-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-grid/DefaultTestimonialGridSlideHorizontal',
+  component: DefaultTestimonialGridSlideHorizontal,
+  args: {
+    title: 'What users say',
+    subtitle: 'A denser testimonial layout for multiple voices.',
+    testimonials: [
+      { quote: 'The new workflow is much easier to explain.', author: 'Sam, Ops' },
+      { quote: 'Templates make repeatable work much faster.', author: 'Maya, PM' },
+      { quote: 'The visuals feel polished without extra effort.', author: 'Liam, Designer' },
+      { quote: 'It is clear how to scale the presentation now.', author: 'Nora, Eng' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/testimonial-grid/default-testimonial-grid-slide-Horizontal.tsx

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

package/src/core/scene/slide/testimonial-grid/default-testimonial-grid-slide-Landscape.tsx

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

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

@@ -0,0 +1,25 @@
+import { DefaultTestimonialGridSlideLandscape } from './default-testimonial-grid-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-grid/DefaultTestimonialGridSlideLandscape/Animated',
+  component: DefaultTestimonialGridSlideLandscape,
+  args: {
+    title: 'What users say',
+    subtitle: 'A denser testimonial layout for multiple voices.',
+    testimonials: [
+      { quote: 'The new workflow is much easier to explain.', author: 'Sam, Ops' },
+      { quote: 'Templates make repeatable work much faster.', author: 'Maya, PM' },
+      { quote: 'The visuals feel polished without extra effort.', author: 'Liam, Designer' },
+      { quote: 'It is clear how to scale the presentation now.', author: 'Nora, Eng' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/testimonial-grid/default-testimonial-grid-slide.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultTestimonialGridSlideLandscape } from './default-testimonial-grid-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-grid/DefaultTestimonialGridSlideLandscape',
+  component: DefaultTestimonialGridSlideLandscape,
+  args: {
+    title: 'What users say',
+    subtitle: 'A denser testimonial layout for multiple voices.',
+    testimonials: [
+      { quote: 'The new workflow is much easier to explain.', author: 'Sam, Ops' },
+      { quote: 'Templates make repeatable work much faster.', author: 'Maya, PM' },
+      { quote: 'The visuals feel polished without extra effort.', author: 'Liam, Designer' },
+      { quote: 'It is clear how to scale the presentation now.', author: 'Nora, Eng' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

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

@@ -0,0 +1,4 @@
+export { DefaultTestimonialGridSlide } from './default-testimonial-grid-slide'
+export { componentMetadata } from './default-testimonial-grid-slide'
+export { DefaultTestimonialGridSlideLandscape, componentMetadata as DefaultTestimonialGridSlideLandscapeMetadata } from './default-testimonial-grid-slide-Landscape'
+export { DefaultTestimonialGridSlideHorizontal, componentMetadata as DefaultTestimonialGridSlideHorizontalMetadata } from './default-testimonial-grid-slide-Horizontal'

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

@@ -0,0 +1,25 @@
+import { DefaultTestimonialWallSlideHorizontal } from './default-testimonial-wall-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-wall/DefaultTestimonialWallSlideHorizontal/Animated',
+  component: DefaultTestimonialWallSlideHorizontal,
+  args: {
+    title: 'Testimonial Wall',
+    subtitle: 'A multi-card wall for social proof.',
+    quotes: [
+      { quote: 'A huge improvement in clarity.', author: 'Riley' },
+      { quote: 'The template system saved a lot of time.', author: 'Jordan' },
+      { quote: 'The slides now feel cohesive.', author: 'Taylor' },
+      { quote: 'Great for recurring reviews.', author: 'Casey' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultTestimonialWallSlideHorizontal } from './default-testimonial-wall-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-wall/DefaultTestimonialWallSlideHorizontal',
+  component: DefaultTestimonialWallSlideHorizontal,
+  args: {
+    title: 'Testimonial Wall',
+    subtitle: 'A multi-card wall for social proof.',
+    quotes: [
+      { quote: 'A huge improvement in clarity.', author: 'Riley' },
+      { quote: 'The template system saved a lot of time.', author: 'Jordan' },
+      { quote: 'The slides now feel cohesive.', author: 'Taylor' },
+      { quote: 'Great for recurring reviews.', author: 'Casey' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { DefaultTestimonialWallSlideLandscape } from './default-testimonial-wall-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-wall/DefaultTestimonialWallSlideLandscape/Animated',
+  component: DefaultTestimonialWallSlideLandscape,
+  args: {
+    title: 'Testimonial Wall',
+    subtitle: 'A multi-card wall for social proof.',
+    quotes: [
+      { quote: 'A huge improvement in clarity.', author: 'Riley' },
+      { quote: 'The template system saved a lot of time.', author: 'Jordan' },
+      { quote: 'The slides now feel cohesive.', author: 'Taylor' },
+      { quote: 'Great for recurring reviews.', author: 'Casey' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultTestimonialWallSlideLandscape } from './default-testimonial-wall-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/testimonial-wall/DefaultTestimonialWallSlideLandscape',
+  component: DefaultTestimonialWallSlideLandscape,
+  args: {
+    title: 'Testimonial Wall',
+    subtitle: 'A multi-card wall for social proof.',
+    quotes: [
+      { quote: 'A huge improvement in clarity.', author: 'Riley' },
+      { quote: 'The template system saved a lot of time.', author: 'Jordan' },
+      { quote: 'The slides now feel cohesive.', author: 'Taylor' },
+      { quote: 'Great for recurring reviews.', author: 'Casey' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}