@vibecuting/video-project-core 0.1.25 → 0.1.26

package/src/core/scene/slide/feature-cards/default-feature-cards-slide-Landscape.tsx

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

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

@@ -0,0 +1,24 @@
+import { DefaultFeatureCardsSlideLandscape } from './default-feature-cards-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/feature-cards/DefaultFeatureCardsSlideLandscape/Animated',
+  component: DefaultFeatureCardsSlideLandscape,
+  args: {
+    title: 'Feature Cards',
+    subtitle: 'A card layout for showcasing capability highlights.',
+    cards: [
+      { title: 'Reusable', body: 'Built from the shared slide foundation.' },
+      { title: 'Typed', body: 'Props are validated at runtime with Zod.' },
+      { title: 'Polished', body: 'Styled to work as a presentation asset.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/feature-cards/default-feature-cards-slide.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultFeatureCardsSlideLandscape } from './default-feature-cards-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/feature-cards/DefaultFeatureCardsSlideLandscape',
+  component: DefaultFeatureCardsSlideLandscape,
+  args: {
+    title: 'Feature Cards',
+    subtitle: 'A card layout for showcasing capability highlights.',
+    cards: [
+      { title: 'Reusable', body: 'Built from the shared slide foundation.' },
+      { title: 'Typed', body: 'Props are validated at runtime with Zod.' },
+      { title: 'Polished', body: 'Styled to work as a presentation asset.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,81 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getOverflowSafeSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultFeatureCardsSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  cards: Array<{
+    title: string
+    body?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultFeatureCardsSlide',
+  description: 'Feature cards slide',
+  sourceFile: 'src/core/scene/slide/feature-cards/default-feature-cards-slide.tsx',
+  pluginKey: 'core.slide.feature-cards',
+  tags: ['scene', 'slide', 'feature-cards'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultFeatureCardsSlideProps',
+})
+
+export const DefaultFeatureCardsSlide = 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(),
+      cards: z.array(z.object({ title: z.string().min(1), body: z.string().optional() })).min(1),
+    }),
+    component: function DefaultFeatureCardsSlide({ sceneId, sceneName, title, subtitle, cards }: DefaultFeatureCardsSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(cards.length, isPortrait ? 2 : 3, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 330,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 150,
+      })
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#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 : 960, fontSize: scale.title, lineHeight: 0.94, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 680 : 800, fontSize: scale.body, lineHeight: 1.55, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 28 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 16 : grid.gap }}>
+              {cards.slice(0, 5).map((card, index) => (
+                <SceneMotionLayer key={card.title} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: grid.cardMinHeight, padding: isPortrait ? '18px 20px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: index % 2 === 0 ? '#ffffff' : '#eff6ff', border: '1px solid rgba(148,163,184,0.24)' }}>
+                    <h2 style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.2 }}>{card.title}</h2>
+                    {card.body ? <p style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.82 : scale.body, lineHeight: 1.42, opacity: 0.78 }}>{card.body}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultFeatureCardsSlide } from './default-feature-cards-slide'
+export { componentMetadata } from './default-feature-cards-slide'
+export { DefaultFeatureCardsSlideLandscape, componentMetadata as DefaultFeatureCardsSlideLandscapeMetadata } from './default-feature-cards-slide-Landscape'
+export { DefaultFeatureCardsSlideHorizontal, componentMetadata as DefaultFeatureCardsSlideHorizontalMetadata } from './default-feature-cards-slide-Horizontal'

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

@@ -0,0 +1,27 @@
+import { DefaultFeatureGridSlideHorizontal } from './default-feature-grid-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/feature-grid/DefaultFeatureGridSlideHorizontal/Animated',
+  component: DefaultFeatureGridSlideHorizontal,
+  args: {
+    title: 'What the platform gives you',
+    subtitle: 'A dense feature layout for explaining value in a compact way.',
+    features: [
+      { title: 'Reusable building blocks', body: 'Compose scenes from canonical templates.' },
+      { title: 'Responsive typography', body: 'Scale across 16:9 and mobile-friendly canvases.' },
+      { title: 'Live preview workflows', body: 'See changes instantly in Storybook and Remotion.' },
+      { title: 'Clear metadata contracts', body: 'Each template has typed props and stable tagging.' },
+      { title: 'MCP-ready output', body: 'Align templates with structured machine interfaces.' },
+      { title: 'Fast iteration', body: 'Ship variations without rebuilding the whole scene.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,26 @@
+import { DefaultFeatureGridSlideHorizontal } from './default-feature-grid-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/feature-grid/DefaultFeatureGridSlideHorizontal',
+  component: DefaultFeatureGridSlideHorizontal,
+  args: {
+    title: 'What the platform gives you',
+    subtitle: 'A dense feature layout for explaining value in a compact way.',
+    features: [
+      { title: 'Reusable building blocks', body: 'Compose scenes from canonical templates.' },
+      { title: 'Responsive typography', body: 'Scale across 16:9 and mobile-friendly canvases.' },
+      { title: 'Live preview workflows', body: 'See changes instantly in Storybook and Remotion.' },
+      { title: 'Clear metadata contracts', body: 'Each template has typed props and stable tagging.' },
+      { title: 'MCP-ready output', body: 'Align templates with structured machine interfaces.' },
+      { title: 'Fast iteration', body: 'Ship variations without rebuilding the whole scene.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { DefaultFeatureGridSlideLandscape } from './default-feature-grid-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/feature-grid/DefaultFeatureGridSlideLandscape/Animated',
+  component: DefaultFeatureGridSlideLandscape,
+  args: {
+    title: 'What the platform gives you',
+    subtitle: 'A dense feature layout for explaining value in a compact way.',
+    features: [
+      { title: 'Reusable building blocks', body: 'Compose scenes from canonical templates.' },
+      { title: 'Responsive typography', body: 'Scale across 16:9 and mobile-friendly canvases.' },
+      { title: 'Live preview workflows', body: 'See changes instantly in Storybook and Remotion.' },
+      { title: 'Clear metadata contracts', body: 'Each template has typed props and stable tagging.' },
+      { title: 'MCP-ready output', body: 'Align templates with structured machine interfaces.' },
+      { title: 'Fast iteration', body: 'Ship variations without rebuilding the whole scene.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,26 @@
+import { DefaultFeatureGridSlideLandscape } from './default-feature-grid-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/feature-grid/DefaultFeatureGridSlideLandscape',
+  component: DefaultFeatureGridSlideLandscape,
+  args: {
+    title: 'What the platform gives you',
+    subtitle: 'A dense feature layout for explaining value in a compact way.',
+    features: [
+      { title: 'Reusable building blocks', body: 'Compose scenes from canonical templates.' },
+      { title: 'Responsive typography', body: 'Scale across 16:9 and mobile-friendly canvases.' },
+      { title: 'Live preview workflows', body: 'See changes instantly in Storybook and Remotion.' },
+      { title: 'Clear metadata contracts', body: 'Each template has typed props and stable tagging.' },
+      { title: 'MCP-ready output', body: 'Align templates with structured machine interfaces.' },
+      { title: 'Fast iteration', body: 'Ship variations without rebuilding the whole scene.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/feature-grid/default-feature-grid-slide.tsx

@@ -0,0 +1,126 @@
+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 DefaultFeatureGridSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  features: Array<{
+    title: string
+    body?: string
+    badge?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultFeatureGridSlide',
+  description: 'Feature grid slide',
+  sourceFile: 'src/core/scene/slide/feature-grid/default-feature-grid-slide.tsx',
+  pluginKey: 'core.slide.feature-grid',
+  tags: ['scene', 'slide', 'feature-grid'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultFeatureGridSlideProps',
+})
+
+export const DefaultFeatureGridSlide = 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(),
+      features: z.array(
+        z.object({
+          title: z.string().min(1),
+          body: z.string().optional(),
+          badge: z.string().optional(),
+        }),
+      ).min(1),
+    }),
+    component: function DefaultFeatureGridSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      features,
+    }: DefaultFeatureGridSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(features.length, isPortrait ? 2 : 3, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 340,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 150,
+      })
+      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(680, Math.round(runtime.width * 0.84)) : 860
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#ffffff">
+          <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={{
+                display: 'grid',
+                gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`,
+                gap: isPortrait ? 16 : grid.gap,
+                marginTop: isPortrait ? 28 : 36,
+              }}
+            >
+              {features.slice(0, 5).map((feature, index) => (
+                <SceneMotionLayer key={`${feature.title}-${index}`} variant="card" delayIndex={index}>
+                  <article
+                    style={{
+                      minHeight: Math.max(
+                        grid.cardMinHeight,
+                        Math.floor((runtime.height - (isPortrait ? 280 : 340)) / Math.max(Math.ceil(Math.min(features.length, 5) / grid.columns), 1) - 8),
+                      ),
+                      padding: isPortrait ? '18px 20px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`,
+                      borderRadius: 0,
+                      border: '1px solid rgba(148,163,184,0.24)',
+                      background: '#f8fafc',
+                    }}
+                  >
+                    <p style={{ margin: 0, fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.66 }}>
+                      {feature.badge ?? `Feature ${String(index + 1).padStart(2, '0')}`}
+                    </p>
+                    <h2 style={{ margin: '16px 0 0', fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.2 }}>{feature.title}</h2>
+                    {feature.body ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.42, opacity: 0.78 }}>{feature.body}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultFeatureGridSlide } from './default-feature-grid-slide'
+export { componentMetadata } from './default-feature-grid-slide'
+export { DefaultFeatureGridSlideLandscape, componentMetadata as DefaultFeatureGridSlideLandscapeMetadata } from './default-feature-grid-slide-Landscape'
+export { DefaultFeatureGridSlideHorizontal, componentMetadata as DefaultFeatureGridSlideHorizontalMetadata } from './default-feature-grid-slide-Horizontal'

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

@@ -0,0 +1,20 @@
+import { DefaultFeatureListSlideHorizontal } from './default-feature-list-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/feature-list/DefaultFeatureListSlideHorizontal/Animated',
+  component: DefaultFeatureListSlideHorizontal,
+  args: {
+    title: 'Feature List',
+    subtitle: 'A simple list for product capabilities.',
+    features: ['Clear props', 'Reusable layouts', 'Typed metadata', 'Remotion-ready rendering'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,19 @@
+import { DefaultFeatureListSlideHorizontal } from './default-feature-list-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/feature-list/DefaultFeatureListSlideHorizontal',
+  component: DefaultFeatureListSlideHorizontal,
+  args: {
+    title: 'Feature List',
+    subtitle: 'A simple list for product capabilities.',
+    features: ['Clear props', 'Reusable layouts', 'Typed metadata', 'Remotion-ready rendering'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/feature-list/default-feature-list-slide-Horizontal.tsx

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

package/src/core/scene/slide/feature-list/default-feature-list-slide-Landscape.tsx

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

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

@@ -0,0 +1,20 @@
+import { DefaultFeatureListSlideLandscape } from './default-feature-list-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/feature-list/DefaultFeatureListSlideLandscape/Animated',
+  component: DefaultFeatureListSlideLandscape,
+  args: {
+    title: 'Feature List',
+    subtitle: 'A simple list for product capabilities.',
+    features: ['Clear props', 'Reusable layouts', 'Typed metadata', 'Remotion-ready rendering'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/feature-list/default-feature-list-slide.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultFeatureListSlideLandscape } from './default-feature-list-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/feature-list/DefaultFeatureListSlideLandscape',
+  component: DefaultFeatureListSlideLandscape,
+  args: {
+    title: 'Feature List',
+    subtitle: 'A simple list for product capabilities.',
+    features: ['Clear props', 'Reusable layouts', 'Typed metadata', 'Remotion-ready rendering'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/feature-list/default-feature-list-slide.tsx

@@ -0,0 +1,79 @@
+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 DefaultFeatureListSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  features: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultFeatureListSlide',
+  description: 'Feature list slide',
+  sourceFile: 'src/core/scene/slide/feature-list/default-feature-list-slide.tsx',
+  pluginKey: 'core.slide.feature-list',
+  tags: ['scene', 'slide', 'feature-list'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultFeatureListSlideProps',
+})
+
+export const DefaultFeatureListSlide = 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(),
+      features: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultFeatureListSlide({ sceneId, sceneName, title, subtitle, features }: DefaultFeatureListSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(features.length, isPortrait ? 2 : 2, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 56 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 240 : 330,
+        minCardWidth: isPortrait ? 200 : 220,
+        minCardHeight: isPortrait ? 120 : 132,
+      })
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#ffffff">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '48px 28px' : '72px 88px', color: '#0f172a' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 780 : 980, fontSize: scale.title, lineHeight: 0.94, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 680 : 820, fontSize: scale.body, lineHeight: 1.55, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <ul style={{ margin: isPortrait ? '28px 0 0' : '36px 0 0', padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 14 : grid.gap }}>
+              {features.slice(0, 5).map((feature, index) => (
+                <SceneMotionLayer key={feature} variant="list-item" delayIndex={index}>
+                  <li style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'start', minHeight: Math.max(56, grid.cardMinHeight - 36), padding: isPortrait ? '12px 14px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: index % 2 === 0 ? '#f8fafc' : '#ffffff', border: '1px solid rgba(148,163,184,0.24)' }}>
+                    <span style={{ width: 14, height: 14, borderRadius: 0, marginTop: 8, background: '#2563eb' }} />
+                    <span style={{ fontSize: isPortrait ? scale.body * 0.84 : scale.body, lineHeight: 1.42 }}>{feature}</span>
+                  </li>
+                </SceneMotionLayer>
+              ))}
+            </ul>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)