@vibecuting/video-project-core 0.1.25 → 0.1.27

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

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

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

@@ -0,0 +1,25 @@
+import { DefaultGallerySlideLandscape } from './default-gallery-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/gallery/DefaultGallerySlideLandscape/Animated',
+  component: DefaultGallerySlideLandscape,
+  args: {
+    title: 'Gallery',
+    subtitle: 'A three-column image grid with room for captions.',
+    images: [
+      { title: 'Frame One', caption: 'Opening moment' },
+      { title: 'Frame Two', caption: 'Product close-up' },
+      { title: 'Frame Three', caption: 'Team collaboration' },
+      { title: 'Frame Four', caption: 'UI detail' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,24 @@
+import { DefaultGallerySlideLandscape } from './default-gallery-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/gallery/DefaultGallerySlideLandscape',
+  component: DefaultGallerySlideLandscape,
+  args: {
+    title: 'Gallery',
+    subtitle: 'A three-column image grid with room for captions.',
+    images: [
+      { title: 'Frame One', caption: 'Opening moment' },
+      { title: 'Frame Two', caption: 'Product close-up' },
+      { title: 'Frame Three', caption: 'Team collaboration' },
+      { title: 'Frame Four', caption: 'UI detail' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,83 @@
+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 DefaultGallerySlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  images: Array<{
+    title: string
+    caption?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultGallerySlide',
+  description: 'Gallery and image grid slide',
+  sourceFile: 'src/core/scene/slide/gallery/default-gallery-slide.tsx',
+  pluginKey: 'core.slide.gallery',
+  tags: ['scene', 'slide', 'gallery'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultGallerySlideProps',
+})
+
+export const DefaultGallerySlide = 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(),
+      images: z.array(z.object({ title: z.string().min(1), caption: z.string().optional() })).min(1),
+    }),
+    component: function DefaultGallerySlide({ sceneId, sceneName, title, subtitle, images }: DefaultGallerySlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(images.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="#0f172a">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <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.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 24 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 14 : grid.gap }}>
+              {images.slice(0, 5).map((image, index) => (
+                <SceneMotionLayer key={`${image.title}-${index}`} variant="card" delayIndex={index}>
+                  <article style={{ minHeight: grid.cardMinHeight, padding: isPortrait ? '16px 16px 18px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: ['#1e293b', '#0f172a', '#111827'][index % 3], border: '1px solid rgba(148,163,184,0.16)' }}>
+                    <div style={{ width: '100%', aspectRatio: '4 / 3', borderRadius: 0, background: 'rgba(255,255,255,0.08)' }} />
+                    <h2 style={{ margin: '16px 0 0', fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.2 }}>{image.title}</h2>
+                    {image.caption ? <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.82 : scale.body, lineHeight: 1.42, opacity: 0.72 }}>{image.caption}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

@@ -0,0 +1,4 @@
+export { DefaultGallerySlide } from './default-gallery-slide'
+export { componentMetadata } from './default-gallery-slide'
+export { DefaultGallerySlideLandscape, componentMetadata as DefaultGallerySlideLandscapeMetadata } from './default-gallery-slide-Landscape'
+export { DefaultGallerySlideHorizontal, componentMetadata as DefaultGallerySlideHorizontalMetadata } from './default-gallery-slide-Horizontal'

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultGeoMapSlideHorizontal } from './default-geo-map-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/geo-map/default-geo-map-slideHorizontal/Animated',
+  component: DefaultGeoMapSlideHorizontal,
+  args: {
+    title: 'Geo Map',
+    subtitle: 'A reusable geo layout for location, movement, and market slides.',
+    note: 'Markers and route overlays are driven by percentage-based coordinates.',
+    backgroundStyle: 'global',
+    points: [
+      { label: 'San Francisco', x: 20, y: 42, tone: 'primary' },
+      { label: 'London', x: 48, y: 28, tone: 'accent' },
+      { label: 'Singapore', x: 72, y: 64, tone: 'neutral' },
+    ],
+    routes: [
+      { from: [20, 42], to: [48, 28], tone: 'primary' },
+      { from: [48, 28], to: [72, 64], tone: 'accent' },
+    ],
+  },
+} satisfies Meta<typeof DefaultGeoMapSlideHorizontal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultGeoMapSlideHorizontal } from './default-geo-map-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/geo-map/default-geo-map-slideHorizontal',
+  component: DefaultGeoMapSlideHorizontal,
+  args: {
+    title: 'Geo Map',
+    subtitle: 'A reusable geo layout for location, movement, and market slides.',
+    note: 'Markers and route overlays are driven by percentage-based coordinates.',
+    backgroundStyle: 'global',
+    points: [
+      { label: 'San Francisco', x: 20, y: 42, tone: 'primary' },
+      { label: 'London', x: 48, y: 28, tone: 'accent' },
+      { label: 'Singapore', x: 72, y: 64, tone: 'neutral' },
+    ],
+    routes: [
+      { from: [20, 42], to: [48, 28], tone: 'primary' },
+      { from: [48, 28], to: [72, 64], tone: 'accent' },
+    ],
+  },
+} satisfies Meta<typeof DefaultGeoMapSlideHorizontal>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultGeoMapSlideLandscape } from './default-geo-map-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/geo-map/default-geo-map-slideLandscape/Animated',
+  component: DefaultGeoMapSlideLandscape,
+  args: {
+    title: 'Geo Map',
+    subtitle: 'A reusable geo layout for location, movement, and market slides.',
+    note: 'Markers and route overlays are driven by percentage-based coordinates.',
+    backgroundStyle: 'global',
+    points: [
+      { label: 'San Francisco', x: 20, y: 42, tone: 'primary' },
+      { label: 'London', x: 48, y: 28, tone: 'accent' },
+      { label: 'Singapore', x: 72, y: 64, tone: 'neutral' },
+    ],
+    routes: [
+      { from: [20, 42], to: [48, 28], tone: 'primary' },
+      { from: [48, 28], to: [72, 64], tone: 'accent' },
+    ],
+  },
+} satisfies Meta<typeof DefaultGeoMapSlideLandscape>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { DefaultGeoMapSlideLandscape } from './default-geo-map-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/geo-map/default-geo-map-slideLandscape',
+  component: DefaultGeoMapSlideLandscape,
+  args: {
+    title: 'Geo Map',
+    subtitle: 'A reusable geo layout for location, movement, and market slides.',
+    note: 'Markers and route overlays are driven by percentage-based coordinates.',
+    backgroundStyle: 'global',
+    points: [
+      { label: 'San Francisco', x: 20, y: 42, tone: 'primary' },
+      { label: 'London', x: 48, y: 28, tone: 'accent' },
+      { label: 'Singapore', x: 72, y: 64, tone: 'neutral' },
+    ],
+    routes: [
+      { from: [20, 42], to: [48, 28], tone: 'primary' },
+      { from: [48, 28], to: [72, 64], tone: 'accent' },
+    ],
+  },
+} satisfies Meta<typeof DefaultGeoMapSlideLandscape>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,119 @@
+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, type GeoMapPoint, type GeoMapRoute } from './geo-map-preview'
+
+export interface DefaultGeoMapSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  note?: string
+  points: GeoMapPoint[]
+  routes?: GeoMapRoute[]
+  backgroundStyle?: 'global' | 'city' | 'network'
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultGeoMapSlide',
+  description: 'Geo map slide',
+  sourceFile: 'src/core/scene/slide/geo-map/default-geo-map-slide.tsx',
+  pluginKey: 'core.slide.geo-map',
+  tags: ['scene', 'slide', 'geo-map', 'map'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultGeoMapSlideProps',
+})
+
+export const DefaultGeoMapSlide = 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(),
+      note: z.string().optional(),
+      backgroundStyle: z.enum(['global', 'city', 'network']).optional(),
+      points: z.array(
+        z.object({
+          label: z.string().min(1),
+          x: z.number().min(0).max(100),
+          y: z.number().min(0).max(100),
+          tone: z.enum(['primary', 'accent', 'neutral']).optional(),
+        }),
+      ).min(1),
+      routes: z
+        .array(
+          z.object({
+            from: z.tuple([z.number().min(0).max(100), z.number().min(0).max(100)]),
+            to: z.tuple([z.number().min(0).max(100), z.number().min(0).max(100)]),
+            tone: z.enum(['primary', 'accent', 'neutral']).optional(),
+          }),
+        )
+        .optional(),
+    }),
+    component: function DefaultGeoMapSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      note,
+      points,
+      routes,
+      backgroundStyle,
+    }: DefaultGeoMapSlideProps) {
+      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={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '0.92fr 1.08fr', gap: isPortrait ? 20 : 36, color: '#e2e8f0', alignItems: 'stretch' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: isPortrait ? 12 : 16 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 540, fontSize: isPortrait ? scale.title * 0.76 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                  <p style={{ margin: 0, maxWidth: isPortrait ? 560 : 480, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+              {note ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: 0, maxWidth: isPortrait ? 560 : 480, fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.5, opacity: 0.72 }}>{note}</p>
+                </SceneMotionLayer>
+              ) : null}
+              <div style={{ display: 'flex', gap: 12, marginTop: isPortrait ? 4 : 12, flexWrap: 'wrap' }}>
+                {points.slice(0, 3).map((point) => (
+                  <SceneMotionLayer key={point.label} variant="list-item" delayIndex={0}>
+                    <span style={{ padding: '10px 14px', borderRadius: 0, background: 'rgba(15,23,42,0.7)', border: '1px solid rgba(148,163,184,0.18)', fontSize: scale.caption }}>
+                      {point.label}
+                    </span>
+                  </SceneMotionLayer>
+                ))}
+              </div>
+            </div>
+            <SceneMotionLayer variant="panel">
+              <div style={{ minHeight: 0 }}>
+                <GeoMapPreview title={undefined} subtitle={undefined} points={points} routes={routes} backgroundStyle={backgroundStyle ?? 'global'} style={{ height: isPortrait ? 360 : '100%', borderRadius: 0 }} />
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/geo-map/geo-map-preview.tsx

@@ -0,0 +1,164 @@
+import type { CSSProperties } from 'react'
+
+export interface GeoMapPoint {
+  label: string
+  x: number
+  y: number
+  tone?: 'primary' | 'accent' | 'neutral'
+}
+
+export interface GeoMapRoute {
+  from: [number, number]
+  to: [number, number]
+  tone?: 'primary' | 'accent' | 'neutral'
+}
+
+export interface GeoMapPreviewProps {
+  title?: string
+  subtitle?: string
+  points: GeoMapPoint[]
+  routes?: GeoMapRoute[]
+  backgroundStyle?: 'global' | 'city' | 'network'
+  style?: CSSProperties
+}
+
+const pointColors = {
+  primary: '#38bdf8',
+  accent: '#f97316',
+  neutral: '#94a3b8',
+}
+
+const routeColors = pointColors
+
+export function GeoMapPreview({
+  title,
+  subtitle,
+  points,
+  routes = [],
+  backgroundStyle = 'global',
+  style,
+}: GeoMapPreviewProps) {
+  const background =
+    backgroundStyle === 'city'
+      ? 'radial-gradient(circle at 30% 28%, rgba(56,189,248,0.34), transparent 26%), radial-gradient(circle at 70% 64%, rgba(249,115,22,0.18), transparent 22%), linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.98))'
+      : backgroundStyle === 'network'
+        ? 'radial-gradient(circle at 50% 45%, rgba(56,189,248,0.24), transparent 22%), linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.98))'
+        : 'radial-gradient(circle at 30% 24%, rgba(56,189,248,0.22), transparent 28%), radial-gradient(circle at 70% 62%, rgba(249,115,22,0.16), transparent 24%), linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.98))'
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        borderRadius: 36,
+        border: '1px solid rgba(148,163,184,0.18)',
+        background,
+        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.03)',
+        ...style,
+      }}
+    >
+      <svg viewBox="0 0 1000 700" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
+        <defs>
+          <linearGradient id="geo-grid-stroke" x1="0" x2="1">
+            <stop offset="0%" stopColor="rgba(148,163,184,0.08)" />
+            <stop offset="50%" stopColor="rgba(148,163,184,0.18)" />
+            <stop offset="100%" stopColor="rgba(148,163,184,0.08)" />
+          </linearGradient>
+        </defs>
+        {Array.from({ length: 8 }).map((_, index) => (
+          <line key={`h-${index}`} x1="0" y1={index * 100} x2="1000" y2={index * 100} stroke="url(#geo-grid-stroke)" strokeWidth="1" />
+        ))}
+        {Array.from({ length: 10 }).map((_, index) => (
+          <line key={`v-${index}`} y1="0" x1={index * 100} y2="700" x2={index * 100} stroke="url(#geo-grid-stroke)" strokeWidth="1" />
+        ))}
+        <path
+          d="M 120 500 C 240 420, 260 330, 360 320 S 560 280, 620 190 S 820 140, 900 250"
+          fill="none"
+          stroke="rgba(56,189,248,0.2)"
+          strokeWidth="4"
+          strokeDasharray="12 10"
+        />
+        <path
+          d="M 150 180 C 240 220, 310 180, 390 230 S 560 320, 690 280 S 840 220, 915 350"
+          fill="none"
+          stroke="rgba(249,115,22,0.16)"
+          strokeWidth="4"
+          strokeDasharray="18 12"
+        />
+      </svg>
+
+      <div style={{ position: 'absolute', inset: 0, padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', pointerEvents: 'none' }}>
+        <div>
+          {title ? <h3 style={{ margin: 0, fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.03em', color: '#f8fafc' }}>{title}</h3> : null}
+          {subtitle ? <p style={{ margin: '10px 0 0', maxWidth: 380, fontSize: 14, lineHeight: 1.5, color: 'rgba(226,232,240,0.72)' }}>{subtitle}</p> : null}
+        </div>
+
+        <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
+          {routes.map((route, index) => {
+            const color = routeColors[route.tone ?? 'neutral']
+            return (
+              <svg key={`${index}-${route.from.join('-')}-${route.to.join('-')}`} viewBox="0 0 1000 700" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
+                <line
+                  x1={`${route.from[0]}%`}
+                  y1={`${route.from[1]}%`}
+                  x2={`${route.to[0]}%`}
+                  y2={`${route.to[1]}%`}
+                  stroke={color}
+                  strokeWidth="3"
+                  strokeDasharray="10 10"
+                  opacity="0.75"
+                />
+              </svg>
+            )
+          })}
+
+          {points.map((point) => {
+            const color = pointColors[point.tone ?? 'neutral']
+            return (
+              <div
+                key={point.label}
+                style={{
+                  position: 'absolute',
+                  left: `${point.x}%`,
+                  top: `${point.y}%`,
+                  transform: 'translate(-50%, -50%)',
+                  display: 'grid',
+                  placeItems: 'center',
+                  gap: 10,
+                }}
+              >
+                <div style={{ position: 'relative', width: 18, height: 18 }}>
+                  <span
+                    style={{
+                      position: 'absolute',
+                      inset: 0,
+                      borderRadius: 999,
+                      background: color,
+                      boxShadow: `0 0 0 10px color-mix(in srgb, ${color} 24%, transparent)`,
+                    }}
+                  />
+                </div>
+                <div
+                  style={{
+                    padding: '8px 12px',
+                    borderRadius: 999,
+                    background: 'rgba(15,23,42,0.72)',
+                    border: '1px solid rgba(148,163,184,0.18)',
+                    color: '#e2e8f0',
+                    fontSize: 12,
+                    whiteSpace: 'nowrap',
+                    backdropFilter: 'blur(8px)',
+                  }}
+                >
+                  {point.label}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,4 @@
+export * from './default-geo-map-slide'
+export * from './geo-map-preview'
+export { DefaultGeoMapSlideLandscape, componentMetadata as DefaultGeoMapSlideLandscapeMetadata } from './default-geo-map-slide-Landscape'
+export { DefaultGeoMapSlideHorizontal, componentMetadata as DefaultGeoMapSlideHorizontalMetadata } from './default-geo-map-slide-Horizontal'

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

@@ -0,0 +1,20 @@
+import { DefaultHeroSlideHorizontal } from './default-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/hero/DefaultHeroSlideHorizontal/Animated',
+  component: DefaultHeroSlideHorizontal,
+  args: {
+    kicker: 'Introducing',
+    title: 'A Better Workflow',
+    subtitle: 'A focused opener for the talk or section.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}