@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/scene/slide/diagram-matrix/default-diagram-matrix-slide-Horizontal.tsx

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

package/src/core/scene/slide/diagram-matrix/default-diagram-matrix-slide-Landscape.tsx

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

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

@@ -0,0 +1,25 @@
+import { DefaultDiagramMatrixSlideLandscape } from './default-diagram-matrix-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/diagram-matrix/DefaultDiagramMatrixSlideLandscape/Animated',
+  component: DefaultDiagramMatrixSlideLandscape,
+  args: {
+    title: 'Diagram Matrix',
+    subtitle: 'A quadrant-style matrix for mapping options and relationships.',
+    cells: [
+      { label: 'High impact', detail: 'Important and urgent' },
+      { label: 'Low effort', detail: 'Easy to ship quickly' },
+      { label: 'Long term', detail: 'Requires bigger investment' },
+      { label: 'Short term', detail: 'Can be completed in the current cycle' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/diagram-matrix/default-diagram-matrix-slide.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultDiagramMatrixSlideLandscape } from './default-diagram-matrix-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/diagram-matrix/DefaultDiagramMatrixSlideLandscape',
+  component: DefaultDiagramMatrixSlideLandscape,
+  args: {
+    title: 'Diagram Matrix',
+    subtitle: 'A quadrant-style matrix for mapping options and relationships.',
+    cells: [
+      { label: 'High impact', detail: 'Important and urgent' },
+      { label: 'Low effort', detail: 'Easy to ship quickly' },
+      { label: 'Long term', detail: 'Requires bigger investment' },
+      { label: 'Short term', detail: 'Can be completed in the current cycle' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/diagram-matrix/default-diagram-matrix-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 DefaultDiagramMatrixSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  cells: Array<{
+    label: string
+    detail?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultDiagramMatrixSlide',
+  description: 'Diagram matrix slide',
+  sourceFile: 'src/core/scene/slide/diagram-matrix/default-diagram-matrix-slide.tsx',
+  pluginKey: 'core.slide.diagram-matrix',
+  tags: ['scene', 'slide', 'diagram-matrix'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultDiagramMatrixSlideProps',
+})
+
+export const DefaultDiagramMatrixSlide = 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(),
+      cells: z.array(z.object({ label: z.string().min(1), detail: z.string().optional() })).min(1),
+    }),
+    component: function DefaultDiagramMatrixSlide({ sceneId, sceneName, title, subtitle, cells }: DefaultDiagramMatrixSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(cells.length, isPortrait ? 2 : 2, {
+        runtimeWidth: runtime.width,
+        runtimeHeight: runtime.height,
+        reservedWidth: isPortrait ? 56 : 160,
+        reservedHeight: isPortrait ? 240 : 300,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 140,
+      })
+
+      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 : 980, fontSize: isPortrait ? scale.title * 0.78 : 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 : 820, fontSize: isPortrait ? scale.body * 0.9 : 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: grid.gap }}>
+              {cells.slice(0, 4).map((cell, index) => (
+                <SceneMotionLayer key={cell.label} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: grid.cardMinHeight, padding: `${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, fontWeight: 700 }}>{cell.label}</p>
+                    {cell.detail ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.8 : scale.body * 0.92, lineHeight: 1.42, opacity: 0.78 }}>{cell.detail}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/diagram-matrix/index.ts

@@ -0,0 +1,4 @@
+export { DefaultDiagramMatrixSlide } from './default-diagram-matrix-slide'
+export { componentMetadata } from './default-diagram-matrix-slide'
+export { DefaultDiagramMatrixSlideLandscape, componentMetadata as DefaultDiagramMatrixSlideLandscapeMetadata } from './default-diagram-matrix-slide-Landscape'
+export { DefaultDiagramMatrixSlideHorizontal, componentMetadata as DefaultDiagramMatrixSlideHorizontalMetadata } from './default-diagram-matrix-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultFAQSlideHorizontal } from './default-faq-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/faq/DefaultFAQSlideHorizontal/Animated',
+  component: DefaultFAQSlideHorizontal,
+  args: {
+    title: 'Frequently Asked Questions',
+    subtitle: 'A simple slide for supporting content and common questions.',
+    questions: [
+      { question: 'How fast can I render?', answer: 'That depends on the scene complexity and the selected preset.' },
+      { question: 'Can I reuse components?', answer: 'Yes, every template is a standalone, typed React component.' },
+      { question: 'Do I need to write JSON?', answer: 'No, most templates use plain props and stories for authoring.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultFAQSlideHorizontal } from './default-faq-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/faq/DefaultFAQSlideHorizontal',
+  component: DefaultFAQSlideHorizontal,
+  args: {
+    title: 'Frequently Asked Questions',
+    subtitle: 'A simple slide for supporting content and common questions.',
+    questions: [
+      { question: 'How fast can I render?', answer: 'That depends on the scene complexity and the selected preset.' },
+      { question: 'Can I reuse components?', answer: 'Yes, every template is a standalone, typed React component.' },
+      { question: 'Do I need to write JSON?', answer: 'No, most templates use plain props and stories for authoring.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { DefaultFAQSlideLandscape } from './default-faq-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/faq/DefaultFAQSlideLandscape/Animated',
+  component: DefaultFAQSlideLandscape,
+  args: {
+    title: 'Frequently Asked Questions',
+    subtitle: 'A simple slide for supporting content and common questions.',
+    questions: [
+      { question: 'How fast can I render?', answer: 'That depends on the scene complexity and the selected preset.' },
+      { question: 'Can I reuse components?', answer: 'Yes, every template is a standalone, typed React component.' },
+      { question: 'Do I need to write JSON?', answer: 'No, most templates use plain props and stories for authoring.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultFAQSlideLandscape } from './default-faq-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/faq/DefaultFAQSlideLandscape',
+  component: DefaultFAQSlideLandscape,
+  args: {
+    title: 'Frequently Asked Questions',
+    subtitle: 'A simple slide for supporting content and common questions.',
+    questions: [
+      { question: 'How fast can I render?', answer: 'That depends on the scene complexity and the selected preset.' },
+      { question: 'Can I reuse components?', answer: 'Yes, every template is a standalone, typed React component.' },
+      { question: 'Do I need to write JSON?', answer: 'No, most templates use plain props and stories for authoring.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/faq/default-faq-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 { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getAdaptiveSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultFAQSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  questions: Array<{
+    question: string
+    answer: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultFAQSlide',
+  description: 'FAQ slide',
+  sourceFile: 'src/core/scene/slide/faq/default-faq-slide.tsx',
+  pluginKey: 'core.slide.faq',
+  tags: ['scene', 'slide', 'faq'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultFAQSlideProps',
+})
+
+export const DefaultFAQSlide = 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(),
+      questions: z.array(
+        z.object({
+          question: z.string().min(1),
+          answer: z.string().min(1),
+        }),
+      ).min(1),
+    }),
+    component: function DefaultFAQSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      questions,
+    }: DefaultFAQSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getAdaptiveSlideGridLayout(questions.length, isPortrait ? 1 : 2)
+
+      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={{ display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : grid.gap, marginTop: isPortrait ? 24 : 36 }}>
+              {questions.slice(0, 5).map((entry, index) => (
+                <SceneMotionLayer key={entry.question} variant="card" delayIndex={index}>
+                  <article
+                    style={{
+                      minHeight: isPortrait ? 120 : grid.cardMinHeight,
+                      padding: isPortrait ? '16px 16px 18px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`,
+                      borderRadius: 0,
+                      border: '1px solid rgba(148,163,184,0.24)',
+                      background: '#ffffff',
+                      boxShadow: '0 14px 36px rgba(15,23,42,0.05)',
+                    }}
+                  >
+                    <h2 style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.2 }}>{entry.question}</h2>
+                    <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.45, opacity: 0.82 }}>{entry.answer}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultFAQSlide } from './default-faq-slide'
+export { componentMetadata } from './default-faq-slide'
+export { DefaultFAQSlideLandscape, componentMetadata as DefaultFAQSlideLandscapeMetadata } from './default-faq-slide-Landscape'
+export { DefaultFAQSlideHorizontal, componentMetadata as DefaultFAQSlideHorizontalMetadata } from './default-faq-slide-Horizontal'

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

@@ -0,0 +1,23 @@
+import { DefaultFAQAccordionSlideHorizontal } from './default-faq-accordion-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/faq-accordion/DefaultFAQAccordionSlideHorizontal/Animated',
+  component: DefaultFAQAccordionSlideHorizontal,
+  args: {
+    title: 'FAQ Accordion',
+    subtitle: 'A stacked FAQ layout with prominent questions.',
+    entries: [
+      { question: 'What does this do?', answer: 'It packages answers in a clean accordion-like layout.' },
+      { question: 'Can I add more entries?', answer: 'Yes, the list is capped only for layout density.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,22 @@
+import { DefaultFAQAccordionSlideHorizontal } from './default-faq-accordion-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/faq-accordion/DefaultFAQAccordionSlideHorizontal',
+  component: DefaultFAQAccordionSlideHorizontal,
+  args: {
+    title: 'FAQ Accordion',
+    subtitle: 'A stacked FAQ layout with prominent questions.',
+    entries: [
+      { question: 'What does this do?', answer: 'It packages answers in a clean accordion-like layout.' },
+      { question: 'Can I add more entries?', answer: 'Yes, the list is capped only for layout density.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/faq-accordion/default-faq-accordion-slide-Horizontal.tsx

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

package/src/core/scene/slide/faq-accordion/default-faq-accordion-slide-Landscape.tsx

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

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

@@ -0,0 +1,23 @@
+import { DefaultFAQAccordionSlideLandscape } from './default-faq-accordion-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/faq-accordion/DefaultFAQAccordionSlideLandscape/Animated',
+  component: DefaultFAQAccordionSlideLandscape,
+  args: {
+    title: 'FAQ Accordion',
+    subtitle: 'A stacked FAQ layout with prominent questions.',
+    entries: [
+      { question: 'What does this do?', answer: 'It packages answers in a clean accordion-like layout.' },
+      { question: 'Can I add more entries?', answer: 'Yes, the list is capped only for layout density.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/faq-accordion/default-faq-accordion-slide.stories.tsx

@@ -0,0 +1,22 @@
+import { DefaultFAQAccordionSlideLandscape } from './default-faq-accordion-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/faq-accordion/DefaultFAQAccordionSlideLandscape',
+  component: DefaultFAQAccordionSlideLandscape,
+  args: {
+    title: 'FAQ Accordion',
+    subtitle: 'A stacked FAQ layout with prominent questions.',
+    entries: [
+      { question: 'What does this do?', answer: 'It packages answers in a clean accordion-like layout.' },
+      { question: 'Can I add more entries?', answer: 'Yes, the list is capped only for layout density.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/faq-accordion/default-faq-accordion-slide.tsx

@@ -0,0 +1,74 @@
+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 DefaultFAQAccordionSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  entries: Array<{
+    question: string
+    answer: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultFAQAccordionSlide',
+  description: 'FAQ accordion slide',
+  sourceFile: 'src/core/scene/slide/faq-accordion/default-faq-accordion-slide.tsx',
+  pluginKey: 'core.slide.faq-accordion',
+  tags: ['scene', 'slide', 'faq-accordion'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultFAQAccordionSlideProps',
+})
+
+export const DefaultFAQAccordionSlide = 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(),
+      entries: z.array(z.object({ question: z.string().min(1), answer: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultFAQAccordionSlide({ sceneId, sceneName, title, subtitle, entries }: DefaultFAQAccordionSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getAdaptiveSlideGridLayout(entries.length, isPortrait ? 1 : 2)
+      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 }}>
+              {entries.slice(0, 6).map((entry, index) => (
+                <SceneMotionLayer key={entry.question} 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)' }}>
+                    <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.88 : scale.body, fontWeight: 700 }}>{entry.question}</p>
+                    <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.82 : scale.body, lineHeight: 1.45, opacity: 0.78 }}>{entry.answer}</p>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/faq-accordion/index.ts

@@ -0,0 +1,4 @@
+export { DefaultFAQAccordionSlide } from './default-faq-accordion-slide'
+export { componentMetadata } from './default-faq-accordion-slide'
+export { DefaultFAQAccordionSlideLandscape, componentMetadata as DefaultFAQAccordionSlideLandscapeMetadata } from './default-faq-accordion-slide-Landscape'
+export { DefaultFAQAccordionSlideHorizontal, componentMetadata as DefaultFAQAccordionSlideHorizontalMetadata } from './default-faq-accordion-slide-Horizontal'