@vibecuting/video-project-core 0.1.25 → 0.1.27

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',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultMapLocationSlideHorizontal } from './default-map-location-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideHorizontal',
+  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 Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

package/src/core/scene/slide/map-location/default-map-location-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultMapLocationSlideLandscape } from './default-map-location-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideLandscape/Animated',
+  component: DefaultMapLocationSlideLandscape,
+  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: '16:9',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultMapLocationSlideLandscape } from './default-map-location-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/map-location/DefaultMapLocationSlideLandscape',
+  component: DefaultMapLocationSlideLandscape,
+  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 Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,94 @@
+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'
+import { GeoMapPreview } from '../geo-map'
+
+export interface DefaultMapLocationSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  location?: string
+  note?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultMapLocationSlide',
+  description: 'Map and location slide',
+  sourceFile: 'src/core/scene/slide/map-location/default-map-location-slide.tsx',
+  pluginKey: 'core.slide.map-location',
+  tags: ['scene', 'slide', 'map-location'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultMapLocationSlideProps',
+})
+
+export const DefaultMapLocationSlide = 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(),
+      location: z.string().optional(),
+      note: z.string().optional(),
+    }),
+    component: function DefaultMapLocationSlide({ sceneId, sceneName, title, subtitle, location, note }: DefaultMapLocationSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const { height, width } = runtime
+      const isPortrait = height > width
+      const scale = getSlideTypographyScale(height)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#0f172a">
+          <section style={{ display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '1fr 1fr', gap: isPortrait ? 20 : 40, width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0', alignItems: 'center' }}>
+            <div>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 560, 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 : 520, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+              {location ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: '24px 0 0', fontSize: isPortrait ? scale.body * 0.92 : scale.body, fontWeight: 700 }}>{location}</p>
+                </SceneMotionLayer>
+              ) : null}
+              {note ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={3}>
+                  <p style={{ margin: '12px 0 0', maxWidth: isPortrait ? 560 : 520, fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5, opacity: 0.76 }}>{note}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <SceneMotionLayer variant="panel" delayIndex={4}>
+              <GeoMapPreview
+                title="Map Preview"
+                subtitle="Geographic layouts, routes, and market markers render in a fixed 16:9 card."
+                backgroundStyle="network"
+                points={[
+                  { label: location ?? 'Global Hub', x: 48, y: 42, tone: 'primary' },
+                  { label: 'North America', x: 22, y: 38, tone: 'neutral' },
+                  { label: 'Asia Pacific', x: 72, y: 62, tone: 'accent' },
+                ]}
+                routes={[
+                  { from: [22, 38], to: [48, 42], tone: 'primary' },
+                  { from: [48, 42], to: [72, 62], tone: 'accent' },
+                ]}
+                style={{ minHeight: isPortrait ? 320 : 500, borderRadius: 0 }}
+              />
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/map-location/index.ts

@@ -0,0 +1,4 @@
+export { DefaultMapLocationSlide } from './default-map-location-slide'
+export { componentMetadata } from './default-map-location-slide'
+export { DefaultMapLocationSlideLandscape, componentMetadata as DefaultMapLocationSlideLandscapeMetadata } from './default-map-location-slide-Landscape'
+export { DefaultMapLocationSlideHorizontal, componentMetadata as DefaultMapLocationSlideHorizontalMetadata } from './default-map-location-slide-Horizontal'