@vibecuting/video-project-core 0.1.25 → 0.1.26

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

@@ -0,0 +1,19 @@
+import { DefaultListSlideHorizontal } from './default-list-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/list/DefaultListSlideHorizontal',
+  component: DefaultListSlideHorizontal,
+  args: {
+    title: 'List',
+    subtitle: 'A flexible list slide for bullet points.',
+    items: ['First point', 'Second point', 'Third point', 'Fourth point'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { DefaultListSlideLandscape } from './default-list-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/list/DefaultListSlideLandscape/Animated',
+  component: DefaultListSlideLandscape,
+  args: {
+    title: 'List',
+    subtitle: 'A flexible list slide for bullet points.',
+    items: ['First point', 'Second point', 'Third point', 'Fourth point'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,19 @@
+import { DefaultListSlideLandscape } from './default-list-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/list/DefaultListSlideLandscape',
+  component: DefaultListSlideLandscape,
+  args: {
+    title: 'List',
+    subtitle: 'A flexible list slide for bullet points.',
+    items: ['First point', 'Second point', 'Third point', 'Fourth point'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,71 @@
+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 DefaultListSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  items: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultListSlide',
+  description: 'List slide',
+  sourceFile: 'src/core/scene/slide/list/default-list-slide.tsx',
+  pluginKey: 'core.slide.list',
+  tags: ['scene', 'slide', 'list'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultListSlideProps',
+})
+
+export const DefaultListSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      items: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultListSlide({ sceneId, sceneName, title, subtitle, items }: DefaultListSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getAdaptiveSlideGridLayout(items.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}
+            <ul style={{ margin: isPortrait ? '24px 0 0' : '36px 0 0', padding: 0, listStyle: 'none', display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : grid.gap }}>
+              {items.slice(0, 8).map((item, index) => (
+                <SceneMotionLayer key={item} variant="list-item" delayIndex={index}>
+                  <li style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'start', minHeight: isPortrait ? 88 : grid.cardMinHeight - 40, padding: isPortrait ? '14px 14px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: index % 2 === 0 ? '#ffffff' : '#eff6ff', border: '1px solid rgba(148,163,184,0.24)' }}>
+                    <span style={{ width: 12, height: 12, borderRadius: 0, marginTop: 8, background: '#2563eb' }} />
+                    <span style={{ fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5 }}>{item}</span>
+                  </li>
+                </SceneMotionLayer>
+              ))}
+            </ul>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultListSlide } from './default-list-slide'
+export { componentMetadata } from './default-list-slide'
+export { DefaultListSlideLandscape, componentMetadata as DefaultListSlideLandscapeMetadata } from './default-list-slide-Landscape'
+export { DefaultListSlideHorizontal, componentMetadata as DefaultListSlideHorizontalMetadata } from './default-list-slide-Horizontal'

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

@@ -0,0 +1,20 @@
+import { DefaultListHeroSlideHorizontal } from './default-list-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/list-hero/DefaultListHeroSlideHorizontal/Animated',
+  component: DefaultListHeroSlideHorizontal,
+  args: {
+    title: 'List Hero',
+    subtitle: 'A two-column layout with a lead title and supporting list.',
+    items: ['First item', 'Second item', 'Third item'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,19 @@
+import { DefaultListHeroSlideHorizontal } from './default-list-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/list-hero/DefaultListHeroSlideHorizontal',
+  component: DefaultListHeroSlideHorizontal,
+  args: {
+    title: 'List Hero',
+    subtitle: 'A two-column layout with a lead title and supporting list.',
+    items: ['First item', 'Second item', 'Third item'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { DefaultListHeroSlideLandscape } from './default-list-hero-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/list-hero/DefaultListHeroSlideLandscape/Animated',
+  component: DefaultListHeroSlideLandscape,
+  args: {
+    title: 'List Hero',
+    subtitle: 'A two-column layout with a lead title and supporting list.',
+    items: ['First item', 'Second item', 'Third item'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,19 @@
+import { DefaultListHeroSlideLandscape } from './default-list-hero-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/list-hero/DefaultListHeroSlideLandscape',
+  component: DefaultListHeroSlideLandscape,
+  args: {
+    title: 'List Hero',
+    subtitle: 'A two-column layout with a lead title and supporting list.',
+    items: ['First item', 'Second item', 'Third item'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,71 @@
+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 DefaultListHeroSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  items: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultListHeroSlide',
+  description: 'List hero slide',
+  sourceFile: 'src/core/scene/slide/list-hero/default-list-hero-slide.tsx',
+  pluginKey: 'core.slide.list-hero',
+  tags: ['scene', 'slide', 'list-hero'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultListHeroSlideProps',
+})
+
+export const DefaultListHeroSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      items: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultListHeroSlide({ sceneId, sceneName, title, subtitle, items }: DefaultListHeroSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#020617">
+          <section style={{ display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '1fr 1fr', gap: isPortrait ? 18 : 28, width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '64px 80px', color: '#e2e8f0', alignItems: 'stretch' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 0 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, 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: '14px 0 0', maxWidth: isPortrait ? 560 : 520, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.45, opacity: 0.8 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <div style={{ display: 'grid', gap: isPortrait ? 10 : 12 }}>
+              {items.slice(0, 6).map((item, index) => (
+                <SceneMotionLayer key={item} variant="list-item" delayIndex={index}>
+                  <article style={{ padding: isPortrait ? '12px 14px' : '14px 18px', borderRadius: 0, background: index % 2 === 0 ? 'rgba(15,23,42,0.8)' : 'rgba(30,41,59,0.82)', border: '1px solid rgba(148,163,184,0.16)' }}>
+                    <span style={{ fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5 }}>{item}</span>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/list-hero/index.ts

@@ -0,0 +1,4 @@
+export { DefaultListHeroSlide } from './default-list-hero-slide'
+export { componentMetadata } from './default-list-hero-slide'
+export { DefaultListHeroSlideLandscape, componentMetadata as DefaultListHeroSlideLandscapeMetadata } from './default-list-hero-slide-Landscape'
+export { DefaultListHeroSlideHorizontal, componentMetadata as DefaultListHeroSlideHorizontalMetadata } from './default-list-hero-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultListWithIconsSlideHorizontal } from './default-list-with-icons-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/list-with-icons/DefaultListWithIconsSlideHorizontal/Animated',
+  component: DefaultListWithIconsSlideHorizontal,
+  args: {
+    title: 'List with Icons',
+    subtitle: 'A list format that uses a compact icon for each item.',
+    items: [
+      { icon: 'A', text: 'Align the audience around the plan.' },
+      { icon: 'B', text: 'Break the topic into steps.' },
+      { icon: 'C', text: 'Close with the next action.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultListWithIconsSlideHorizontal } from './default-list-with-icons-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/list-with-icons/DefaultListWithIconsSlideHorizontal',
+  component: DefaultListWithIconsSlideHorizontal,
+  args: {
+    title: 'List with Icons',
+    subtitle: 'A list format that uses a compact icon for each item.',
+    items: [
+      { icon: 'A', text: 'Align the audience around the plan.' },
+      { icon: 'B', text: 'Break the topic into steps.' },
+      { icon: 'C', text: 'Close with the next action.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { DefaultListWithIconsSlideLandscape } from './default-list-with-icons-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/list-with-icons/DefaultListWithIconsSlideLandscape/Animated',
+  component: DefaultListWithIconsSlideLandscape,
+  args: {
+    title: 'List with Icons',
+    subtitle: 'A list format that uses a compact icon for each item.',
+    items: [
+      { icon: 'A', text: 'Align the audience around the plan.' },
+      { icon: 'B', text: 'Break the topic into steps.' },
+      { icon: 'C', text: 'Close with the next action.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultListWithIconsSlideLandscape } from './default-list-with-icons-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/list-with-icons/DefaultListWithIconsSlideLandscape',
+  component: DefaultListWithIconsSlideLandscape,
+  args: {
+    title: 'List with Icons',
+    subtitle: 'A list format that uses a compact icon for each item.',
+    items: [
+      { icon: 'A', text: 'Align the audience around the plan.' },
+      { icon: 'B', text: 'Break the topic into steps.' },
+      { icon: 'C', text: 'Close with the next action.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/list-with-icons/default-list-with-icons-slide.tsx

@@ -0,0 +1,78 @@
+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 DefaultListWithIconsSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  items: Array<{
+    icon: string
+    text: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultListWithIconsSlide',
+  description: 'List with icons slide',
+  sourceFile: 'src/core/scene/slide/list-with-icons/default-list-with-icons-slide.tsx',
+  pluginKey: 'core.slide.list-with-icons',
+  tags: ['scene', 'slide', 'list-with-icons'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultListWithIconsSlideProps',
+})
+
+export const DefaultListWithIconsSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      items: z.array(z.object({ icon: z.string().min(1), text: z.string().min(1) })).min(1),
+    }),
+    component: function DefaultListWithIconsSlide({ sceneId, sceneName, title, subtitle, items }: DefaultListWithIconsSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const sectionPadding = isPortrait ? '48px 28px' : '64px 80px'
+      const titleMaxWidth = isPortrait ? Math.min(780, Math.round(runtime.width * 0.88)) : 960
+      const subtitleMaxWidth = isPortrait ? Math.min(660, Math.round(runtime.width * 0.84)) : 760
+      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: '14px 0 0', maxWidth: subtitleMaxWidth, fontSize: scale.body, lineHeight: 1.45, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 22 : 28, display: 'grid', gap: isPortrait ? 10 : 12 }}>
+              {items.slice(0, 6).map((item, index) => (
+                <SceneMotionLayer key={`${item.icon}-${index}`} variant="list-item" delayIndex={index}>
+                  <article style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: isPortrait ? 10 : 12, alignItems: 'start', padding: isPortrait ? '10px 12px' : '12px 16px', borderRadius: 0, background: index % 2 === 0 ? '#f8fafc' : '#eff6ff', border: '1px solid rgba(148,163,184,0.24)', minHeight: 0 }}>
+                    <div style={{ width: isPortrait ? 24 : 28, height: isPortrait ? 24 : 28, borderRadius: 0, background: '#2563eb', color: '#ffffff', display: 'grid', placeItems: 'center', fontSize: scale.caption, fontWeight: 700, flexShrink: 0 }}>
+                      {item.icon}
+                    </div>
+                    <span style={{ fontSize: scale.body, lineHeight: 1.4 }}>{item.text}</span>
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/list-with-icons/index.ts

@@ -0,0 +1,4 @@
+export { DefaultListWithIconsSlide } from './default-list-with-icons-slide'
+export { componentMetadata } from './default-list-with-icons-slide'
+export { DefaultListWithIconsSlideLandscape, componentMetadata as DefaultListWithIconsSlideLandscapeMetadata } from './default-list-with-icons-slide-Landscape'
+export { DefaultListWithIconsSlideHorizontal, componentMetadata as DefaultListWithIconsSlideHorizontalMetadata } from './default-list-with-icons-slide-Horizontal'

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

@@ -0,0 +1,21 @@
+import { DefaultMapLocationSlideHorizontal } from './default-map-location-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideHorizontal/Animated',
+  component: DefaultMapLocationSlideHorizontal,
+  args: {
+    title: 'Launch Location',
+    subtitle: 'Use a map-style slide to frame regions and deployment targets.',
+    location: 'Tokyo, Japan',
+    note: 'Replace the placeholder with a real map or a geographic visualization.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}