@vibecuting/video-project-core 0.1.25 → 0.1.27

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

@@ -0,0 +1,20 @@
+import { DefaultProsConsSlideHorizontal } from './default-pros-cons-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/pros-cons/DefaultProsConsSlideHorizontal',
+  component: DefaultProsConsSlideHorizontal,
+  args: {
+    title: 'Tradeoffs',
+    subtitle: 'Use this to show the positive and negative sides of a choice.',
+    pros: ['Fast to explain', 'Good reuse', 'Easy to scan'],
+    cons: ['Less narrative detail', 'Needs concise writing', 'Limited depth'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/pros-cons/default-pros-cons-slide-Horizontal.tsx

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

package/src/core/scene/slide/pros-cons/default-pros-cons-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultProsConsSlideLandscape } from './default-pros-cons-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/pros-cons/DefaultProsConsSlideLandscape/Animated',
+  component: DefaultProsConsSlideLandscape,
+  args: {
+    title: 'Tradeoffs',
+    subtitle: 'Use this to show the positive and negative sides of a choice.',
+    pros: ['Fast to explain', 'Good reuse', 'Easy to scan'],
+    cons: ['Less narrative detail', 'Needs concise writing', 'Limited depth'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/pros-cons/default-pros-cons-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultProsConsSlideLandscape } from './default-pros-cons-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/pros-cons/DefaultProsConsSlideLandscape',
+  component: DefaultProsConsSlideLandscape,
+  args: {
+    title: 'Tradeoffs',
+    subtitle: 'Use this to show the positive and negative sides of a choice.',
+    pros: ['Fast to explain', 'Good reuse', 'Easy to scan'],
+    cons: ['Less narrative detail', 'Needs concise writing', 'Limited depth'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/pros-cons/default-pros-cons-slide.tsx

@@ -0,0 +1,104 @@
+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 DefaultProsConsSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  pros: string[]
+  cons: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultProsConsSlide',
+  description: 'Pros and cons slide',
+  sourceFile: 'src/core/scene/slide/pros-cons/default-pros-cons-slide.tsx',
+  pluginKey: 'core.slide.pros-cons',
+  tags: ['scene', 'slide', 'pros-cons'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultProsConsSlideProps',
+})
+
+export const DefaultProsConsSlide = 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(),
+      pros: z.array(z.string().min(1)).min(1),
+      cons: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultProsConsSlide({ sceneId, sceneName, title, subtitle, pros, cons }: DefaultProsConsSlideProps) {
+      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
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#f8fafc">
+          <section style={{ width: '100%', height: '100%', padding: sectionPadding, color: '#0f172a' }}>
+            <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.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 28 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 18 : grid.gap + 6 }}>
+              {[
+                { heading: 'Pros', items: pros, accent: '#22c55e' },
+                { heading: 'Cons', items: cons, accent: '#ef4444' },
+              ].map((panel, index) => (
+                <SceneMotionLayer key={panel.heading} variant="card" delayIndex={index}>
+                  <article
+                    style={{
+                      minHeight: grid.cardMinHeight,
+                      padding: isPortrait ? '18px 20px' : `${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)',
+                    }}
+                  >
+                    <div style={{ width: 16, height: 16, borderRadius: 0, background: panel.accent, boxShadow: `0 0 0 10px ${panel.accent}22` }} />
+                    <h2 style={{ margin: '16px 0 0', fontSize: isPortrait ? scale.body * 0.92 : scale.body, lineHeight: 1.2 }}>{panel.heading}</h2>
+                    <ul style={{ margin: '14px 0 0', padding: 0, listStyle: 'none', display: 'grid', gap: 12 }}>
+                      {panel.items.map((item) => (
+                        <li key={item} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'start' }}>
+                          <span style={{ width: 10, height: 10, borderRadius: 0, marginTop: 10, background: panel.accent }} />
+                          <span style={{ fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.5, opacity: 0.88 }}>{item}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/pros-cons/index.ts

@@ -0,0 +1,4 @@
+export { DefaultProsConsSlide } from './default-pros-cons-slide'
+export { componentMetadata } from './default-pros-cons-slide'
+export { DefaultProsConsSlideLandscape, componentMetadata as DefaultProsConsSlideLandscapeMetadata } from './default-pros-cons-slide-Landscape'
+export { DefaultProsConsSlideHorizontal, componentMetadata as DefaultProsConsSlideHorizontalMetadata } from './default-pros-cons-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultQuoteSlideHorizontal } from './default-quote-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/quote/DefaultQuoteSlideHorizontal/Animated',
+  component: DefaultQuoteSlideHorizontal,
+  args: {
+    quote: 'This layout made the story feel simple, confident, and easy to present.',
+    author: 'Ava Chen',
+    role: 'VP of Product',
+    company: 'Foldspace',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultQuoteSlideHorizontal } from './default-quote-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/quote/DefaultQuoteSlideHorizontal',
+  component: DefaultQuoteSlideHorizontal,
+  args: {
+    quote: 'This layout made the story feel simple, confident, and easy to present.',
+    author: 'Ava Chen',
+    role: 'VP of Product',
+    company: 'Foldspace',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { DefaultQuoteSlideLandscape } from './default-quote-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/quote/DefaultQuoteSlideLandscape/Animated',
+  component: DefaultQuoteSlideLandscape,
+  args: {
+    quote: 'This layout made the story feel simple, confident, and easy to present.',
+    author: 'Ava Chen',
+    role: 'VP of Product',
+    company: 'Foldspace',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultQuoteSlideLandscape } from './default-quote-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/quote/DefaultQuoteSlideLandscape',
+  component: DefaultQuoteSlideLandscape,
+  args: {
+    quote: 'This layout made the story feel simple, confident, and easy to present.',
+    author: 'Ava Chen',
+    role: 'VP of Product',
+    company: 'Foldspace',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,88 @@
+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, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultQuoteSlideProps extends DefaultSceneProps {
+  quote: string
+  author: string
+  role?: string
+  company?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultQuoteSlide',
+  description: 'Quote and testimonial slide',
+  sourceFile: 'src/core/scene/slide/quote/default-quote-slide.tsx',
+  pluginKey: 'core.slide.quote',
+  tags: ['scene', 'slide', 'quote'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultQuoteSlideProps',
+})
+
+export const DefaultQuoteSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      quote: z.string().min(1),
+      author: z.string().min(1),
+      role: z.string().optional(),
+      company: z.string().optional(),
+    }),
+    component: function DefaultQuoteSlide({
+      sceneId,
+      sceneName,
+      quote,
+      author,
+      role,
+      company,
+    }: DefaultQuoteSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? author} background="#0f172a">
+          <section
+            style={{
+              display: 'grid',
+              placeItems: 'center',
+              width: '100%',
+              height: '100%',
+              padding: isPortrait ? '48px 28px' : '72px 88px',
+              color: '#e2e8f0',
+              textAlign: 'center',
+            }}
+          >
+            <div style={{ maxWidth: isPortrait ? 760 : 980 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <p style={{ margin: 0, fontSize: scale.eyebrow, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.66 }}>Testimonial</p>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="quote" delayIndex={1}>
+                <blockquote style={{ margin: '24px 0 0', fontSize: isPortrait ? Math.max(scale.title * 0.82, 42) : Math.max(scale.title, 54), lineHeight: 1.02, letterSpacing: '-0.05em' }}>
+                  “{quote}”
+                </blockquote>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                <p style={{ margin: '28px 0 0', fontSize: scale.body, lineHeight: 1.4, fontWeight: 600 }}>
+                  {author}
+                  {role || company ? <span style={{ opacity: 0.72 }}>{role ? ` · ${role}` : ''}{company ? ` · ${company}` : ''}</span> : null}
+                </p>
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultQuoteSlide } from './default-quote-slide'
+export { componentMetadata } from './default-quote-slide'
+export { DefaultQuoteSlideLandscape, componentMetadata as DefaultQuoteSlideLandscapeMetadata } from './default-quote-slide-Landscape'
+export { DefaultQuoteSlideHorizontal, componentMetadata as DefaultQuoteSlideHorizontalMetadata } from './default-quote-slide-Horizontal'

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

@@ -0,0 +1,19 @@
+import { DefaultQuoteBannerSlideHorizontal } from './default-quote-banner-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/quote-banner/DefaultQuoteBannerSlideHorizontal/Animated',
+  component: DefaultQuoteBannerSlideHorizontal,
+  args: {
+    quote: 'Small templates add up to a much better presentation system.',
+    author: 'Design Systems Team',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,18 @@
+import { DefaultQuoteBannerSlideHorizontal } from './default-quote-banner-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/quote-banner/DefaultQuoteBannerSlideHorizontal',
+  component: DefaultQuoteBannerSlideHorizontal,
+  args: {
+    quote: 'Small templates add up to a much better presentation system.',
+    author: 'Design Systems Team',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/quote-banner/default-quote-banner-slide-Horizontal.tsx

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

package/src/core/scene/slide/quote-banner/default-quote-banner-slide-Landscape.tsx

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

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

@@ -0,0 +1,19 @@
+import { DefaultQuoteBannerSlideLandscape } from './default-quote-banner-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/quote-banner/DefaultQuoteBannerSlideLandscape/Animated',
+  component: DefaultQuoteBannerSlideLandscape,
+  args: {
+    quote: 'Small templates add up to a much better presentation system.',
+    author: 'Design Systems Team',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/quote-banner/default-quote-banner-slide.stories.tsx

@@ -0,0 +1,18 @@
+import { DefaultQuoteBannerSlideLandscape } from './default-quote-banner-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/quote-banner/DefaultQuoteBannerSlideLandscape',
+  component: DefaultQuoteBannerSlideLandscape,
+  args: {
+    quote: 'Small templates add up to a much better presentation system.',
+    author: 'Design Systems Team',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/quote-banner/default-quote-banner-slide.tsx

@@ -0,0 +1,64 @@
+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 DefaultQuoteBannerSlideProps extends DefaultSceneProps {
+  quote: string
+  author?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultQuoteBannerSlide',
+  description: 'Quote banner slide',
+  sourceFile: 'src/core/scene/slide/quote-banner/default-quote-banner-slide.tsx',
+  pluginKey: 'core.slide.quote-banner',
+  tags: ['scene', 'slide', 'quote-banner'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultQuoteBannerSlideProps',
+})
+
+export const DefaultQuoteBannerSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      quote: z.string().min(1),
+      author: z.string().optional(),
+    }),
+    component: function DefaultQuoteBannerSlide({ sceneId, sceneName, quote, author }: DefaultQuoteBannerSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? quote} background="#020617">
+          <section style={{ display: 'grid', placeItems: 'center', width: '100%', height: '100%', padding: isPortrait ? '48px 28px' : '72px 88px', color: '#e2e8f0', textAlign: 'center' }}>
+            <div style={{ maxWidth: isPortrait ? 760 : 980 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <p style={{ margin: 0, fontSize: scale.eyebrow, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.68 }}>Quote</p>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="quote" delayIndex={1}>
+                <blockquote style={{ margin: '24px 0 0', fontSize: isPortrait ? Math.max(scale.title * 0.82, 42) : Math.max(scale.title, 54), lineHeight: 1.02, letterSpacing: '-0.05em' }}>“{quote}”</blockquote>
+              </SceneMotionLayer>
+              {author ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: '24px 0 0', fontSize: scale.body, opacity: 0.76 }}>{author}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/quote-banner/index.ts

@@ -0,0 +1,4 @@
+export { DefaultQuoteBannerSlide } from './default-quote-banner-slide'
+export { componentMetadata } from './default-quote-banner-slide'
+export { DefaultQuoteBannerSlideLandscape, componentMetadata as DefaultQuoteBannerSlideLandscapeMetadata } from './default-quote-banner-slide-Landscape'
+export { DefaultQuoteBannerSlideHorizontal, componentMetadata as DefaultQuoteBannerSlideHorizontalMetadata } from './default-quote-banner-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultQuoteSidecarSlideHorizontal } from './default-quote-sidecar-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/quote-sidecar/DefaultQuoteSidecarSlideHorizontal/Animated',
+  component: DefaultQuoteSidecarSlideHorizontal,
+  args: {
+    title: 'Quote Sidecar',
+    subtitle: 'A split layout for a quote and supporting intro copy.',
+    quote: 'The slide system is the product.',
+    author: 'Product Lead',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}