@vibecuting/video-project-core 0.1.25 → 0.1.26

package/src/core/scene/slide/customer-logo-wall/default-customer-logo-wall-slide-Landscape.tsx

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

package/src/core/scene/slide/customer-logo-wall/default-customer-logo-wall-slide.animated.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultCustomerLogoWallSlideLandscape } from './default-customer-logo-wall-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/customer-logo-wall/DefaultCustomerLogoWallSlideLandscape/Animated',
+  component: DefaultCustomerLogoWallSlideLandscape,
+  args: {
+    title: 'Trusted By',
+    subtitle: 'A simple logo wall for social proof.',
+    logos: ['Acme', 'Northstar', 'Pixel', 'Atlas', 'Nova', 'Orbit', 'Studio', 'Signal'],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/customer-logo-wall/default-customer-logo-wall-slide.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultCustomerLogoWallSlideLandscape } from './default-customer-logo-wall-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/customer-logo-wall/DefaultCustomerLogoWallSlideLandscape',
+  component: DefaultCustomerLogoWallSlideLandscape,
+  args: {
+    title: 'Trusted By',
+    subtitle: 'A simple logo wall for social proof.',
+    logos: ['Acme', 'Northstar', 'Pixel', 'Atlas', 'Nova', 'Orbit', 'Studio', 'Signal'],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/customer-logo-wall/default-customer-logo-wall-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 DefaultCustomerLogoWallSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  logos: string[]
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultCustomerLogoWallSlide',
+  description: 'Customer logo wall slide',
+  sourceFile: 'src/core/scene/slide/customer-logo-wall/default-customer-logo-wall-slide.tsx',
+  pluginKey: 'core.slide.customer-logo-wall',
+  tags: ['scene', 'slide', 'customer-logo-wall'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultCustomerLogoWallSlideProps',
+})
+
+export const DefaultCustomerLogoWallSlide = 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(),
+      logos: z.array(z.string().min(1)).min(1),
+    }),
+    component: function DefaultCustomerLogoWallSlide({ sceneId, sceneName, title, subtitle, logos }: DefaultCustomerLogoWallSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getAdaptiveSlideGridLayout(logos.length, isPortrait ? 1 : 4)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#ffffff">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#0f172a' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 980, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 560 : 820, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <div style={{ marginTop: isPortrait ? 24 : 36, display: 'grid', gridTemplateColumns: `repeat(${grid.columns}, minmax(0, 1fr))`, gap: isPortrait ? 12 : grid.gap }}>
+              {logos.slice(0, 12).map((logo, index) => (
+                <SceneMotionLayer key={logo} variant="card" delayIndex={index}>
+                  <div style={{ minHeight: isPortrait ? 72 : grid.cardMinHeight - 40, display: 'grid', placeItems: 'center', padding: isPortrait ? '14px 14px' : `${grid.cardPaddingY}px ${grid.cardPaddingX}px`, borderRadius: 0, background: '#f8fafc', border: '1px solid rgba(148,163,184,0.22)', fontSize: isPortrait ? scale.body * 0.86 : scale.body, fontWeight: 700 }}>
+                    {logo}
+                  </div>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/customer-logo-wall/index.ts

@@ -0,0 +1,4 @@
+export { DefaultCustomerLogoWallSlide } from './default-customer-logo-wall-slide'
+export { componentMetadata } from './default-customer-logo-wall-slide'
+export { DefaultCustomerLogoWallSlideLandscape, componentMetadata as DefaultCustomerLogoWallSlideLandscapeMetadata } from './default-customer-logo-wall-slide-Landscape'
+export { DefaultCustomerLogoWallSlideHorizontal, componentMetadata as DefaultCustomerLogoWallSlideHorizontalMetadata } from './default-customer-logo-wall-slide-Horizontal'

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

@@ -0,0 +1,24 @@
+import { DefaultDataStorySlideHorizontal } from './default-data-story-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/data-story/DefaultDataStorySlideHorizontal/Animated',
+  component: DefaultDataStorySlideHorizontal,
+  args: {
+    title: 'Data Story',
+    subtitle: 'A narrative layout that reads like a slide deck.',
+    storyPoints: [
+      { headline: 'Demand increased', detail: 'Requests rose after the launch announcement.' },
+      { headline: 'Latency held steady', detail: 'Median response time stayed within target.' },
+      { headline: 'Retention improved', detail: 'More users returned after the second week.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,23 @@
+import { DefaultDataStorySlideHorizontal } from './default-data-story-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/data-story/DefaultDataStorySlideHorizontal',
+  component: DefaultDataStorySlideHorizontal,
+  args: {
+    title: 'Data Story',
+    subtitle: 'A narrative layout that reads like a slide deck.',
+    storyPoints: [
+      { headline: 'Demand increased', detail: 'Requests rose after the launch announcement.' },
+      { headline: 'Latency held steady', detail: 'Median response time stayed within target.' },
+      { headline: 'Retention improved', detail: 'More users returned after the second week.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/data-story/default-data-story-slide-Horizontal.tsx

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

package/src/core/scene/slide/data-story/default-data-story-slide-Landscape.tsx

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

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

@@ -0,0 +1,24 @@
+import { DefaultDataStorySlideLandscape } from './default-data-story-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/data-story/DefaultDataStorySlideLandscape/Animated',
+  component: DefaultDataStorySlideLandscape,
+  args: {
+    title: 'Data Story',
+    subtitle: 'A narrative layout that reads like a slide deck.',
+    storyPoints: [
+      { headline: 'Demand increased', detail: 'Requests rose after the launch announcement.' },
+      { headline: 'Latency held steady', detail: 'Median response time stayed within target.' },
+      { headline: 'Retention improved', detail: 'More users returned after the second week.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/data-story/default-data-story-slide.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultDataStorySlideLandscape } from './default-data-story-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/data-story/DefaultDataStorySlideLandscape',
+  component: DefaultDataStorySlideLandscape,
+  args: {
+    title: 'Data Story',
+    subtitle: 'A narrative layout that reads like a slide deck.',
+    storyPoints: [
+      { headline: 'Demand increased', detail: 'Requests rose after the launch announcement.' },
+      { headline: 'Latency held steady', detail: 'Median response time stayed within target.' },
+      { headline: 'Retention improved', detail: 'More users returned after the second week.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/data-story/default-data-story-slide.tsx

@@ -0,0 +1,76 @@
+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 DefaultDataStorySlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  storyPoints: Array<{
+    headline: string
+    detail?: string
+  }>
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultDataStorySlide',
+  description: 'Data story slide',
+  sourceFile: 'src/core/scene/slide/data-story/default-data-story-slide.tsx',
+  pluginKey: 'core.slide.data-story',
+  tags: ['scene', 'slide', 'data-story'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultDataStorySlideProps',
+})
+
+export const DefaultDataStorySlide = 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(),
+      storyPoints: z.array(z.object({ headline: z.string().min(1), detail: z.string().optional() })).min(1),
+    }),
+    component: function DefaultDataStorySlide({ sceneId, sceneName, title, subtitle, storyPoints }: DefaultDataStorySlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const rowHeight = Math.max(120, Math.floor((runtime.height - (isPortrait ? 280 : 340)) / Math.max(Math.min(storyPoints.length, 5), 1)))
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="linear-gradient(135deg, #020617 0%, #0f172a 100%)">
+          <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', gap: isPortrait ? 10 : 14 }}>
+              {storyPoints.slice(0, 5).map((point, index) => (
+                <SceneMotionLayer key={point.headline} variant="timeline-item" delayIndex={index}>
+                  <article style={{ minHeight: rowHeight, padding: isPortrait ? '16px 16px 18px' : 24, borderRadius: 0, background: index % 2 === 0 ? 'rgba(15,23,42,0.72)' : 'rgba(30,41,59,0.84)', border: '1px solid rgba(148,163,184,0.16)' }}>
+                    <p style={{ margin: 0, fontSize: isPortrait ? scale.caption * 0.9 : scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.6 }}>Step {String(index + 1).padStart(2, '0')}</p>
+                    <h2 style={{ margin: '12px 0 0', fontSize: isPortrait ? scale.body * 0.86 : scale.body, lineHeight: 1.18 }}>{point.headline}</h2>
+                    {point.detail ? <p style={{ margin: '8px 0 0', fontSize: isPortrait ? scale.body * 0.78 : scale.body, lineHeight: 1.4, opacity: 0.8 }}>{point.detail}</p> : null}
+                  </article>
+                </SceneMotionLayer>
+              ))}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/data-story/index.ts

@@ -0,0 +1,4 @@
+export { DefaultDataStorySlide } from './default-data-story-slide'
+export { componentMetadata } from './default-data-story-slide'
+export { DefaultDataStorySlideLandscape, componentMetadata as DefaultDataStorySlideLandscapeMetadata } from './default-data-story-slide-Landscape'
+export { DefaultDataStorySlideHorizontal, componentMetadata as DefaultDataStorySlideHorizontalMetadata } from './default-data-story-slide-Horizontal'

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

@@ -0,0 +1,19 @@
+import { DefaultSlideSceneHorizontal } from './default-slide-scene-Horizontal'
+
+const meta = {
+  title: 'core/scene/DefaultSlideSceneHorizontal/Animated',
+  component: DefaultSlideSceneHorizontal,
+  args: {
+    title: 'Slide Scene',
+    body: 'Slide preview',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,18 @@
+import { DefaultSlideSceneHorizontal } from './default-slide-scene-Horizontal'
+
+const meta = {
+  title: 'core/scene/DefaultSlideSceneHorizontal',
+  component: DefaultSlideSceneHorizontal,
+  args: {
+    title: 'Slide Scene',
+    body: 'Slide preview',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { DefaultSlideSceneLandscape } from './default-slide-scene-Landscape'
+
+const meta = {
+  title: 'core/scene/DefaultSlideSceneLandscape/Animated',
+  component: DefaultSlideSceneLandscape,
+  args: {
+    title: 'Slide Scene',
+    body: 'Slide preview',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,18 @@
+import { DefaultSlideSceneLandscape } from './default-slide-scene-Landscape'
+
+const meta = {
+  title: 'core/scene/DefaultSlideSceneLandscape',
+  component: DefaultSlideSceneLandscape,
+  args: {
+    title: 'Slide Scene',
+    body: 'Slide preview',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -4,6 +4,7 @@ import { z } from 'zod'
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
 import { defineSceneComponent } from '../../../plugins/scene-component'
+import { SceneMotionStack } from '../../../base'
 import { useRemotionSceneRuntime } from '../../../base'
 import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
 
@@ -64,10 +65,12 @@ export const DefaultSlideScene = VideoComponent(componentMetadata)(
             padding: Math.round(runtime.height * 0.06),
           }}
         >
-          <aside style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
-            <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-            {body ? <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024) }}>{body}</p> : null}
-          </aside>
+          <SceneMotionStack>
+            <aside style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
+              <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+              {body ? <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024) }}>{body}</p> : null}
+            </aside>
+          </SceneMotionStack>
         </AbsoluteFill>
       )
     },

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

@@ -0,0 +1,21 @@
+import { DefaultDeviceMockupSlideHorizontal } from './default-device-mockup-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/device-mockup/DefaultDeviceMockupSlideHorizontal/Animated',
+  component: DefaultDeviceMockupSlideHorizontal,
+  args: {
+    title: 'Mobile Experience',
+    subtitle: 'A slide designed to showcase an app or website preview on a device frame.',
+    deviceLabel: 'Phone UI',
+    content: 'Use this space to present an app screen, a website mock, or a vertical video frame.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultDeviceMockupSlideHorizontal } from './default-device-mockup-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/device-mockup/DefaultDeviceMockupSlideHorizontal',
+  component: DefaultDeviceMockupSlideHorizontal,
+  args: {
+    title: 'Mobile Experience',
+    subtitle: 'A slide designed to showcase an app or website preview on a device frame.',
+    deviceLabel: 'Phone UI',
+    content: 'Use this space to present an app screen, a website mock, or a vertical video frame.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/device-mockup/default-device-mockup-slide-Horizontal.tsx

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

package/src/core/scene/slide/device-mockup/default-device-mockup-slide-Landscape.tsx

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

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

@@ -0,0 +1,21 @@
+import { DefaultDeviceMockupSlideLandscape } from './default-device-mockup-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/device-mockup/DefaultDeviceMockupSlideLandscape/Animated',
+  component: DefaultDeviceMockupSlideLandscape,
+  args: {
+    title: 'Mobile Experience',
+    subtitle: 'A slide designed to showcase an app or website preview on a device frame.',
+    deviceLabel: 'Phone UI',
+    content: 'Use this space to present an app screen, a website mock, or a vertical video frame.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/device-mockup/default-device-mockup-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultDeviceMockupSlideLandscape } from './default-device-mockup-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/device-mockup/DefaultDeviceMockupSlideLandscape',
+  component: DefaultDeviceMockupSlideLandscape,
+  args: {
+    title: 'Mobile Experience',
+    subtitle: 'A slide designed to showcase an app or website preview on a device frame.',
+    deviceLabel: 'Phone UI',
+    content: 'Use this space to present an app screen, a website mock, or a vertical video frame.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}