@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/outro/memoir-outro-reflection/default-memoir-outro-bumper.tsx

@@ -0,0 +1,158 @@
+import type { ReactNode } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime } from '../../../base'
+import { useSceneMotion } from '../../../base'
+import { getOutroTypographyScale, resolveOutroLayout, type OutroLayout } from '../_shared/outro-layout'
+import { getOutroBodyMaxWidth, getOutroLineClamp } from '../_shared/outro-layout'
+
+export interface DefaultMemoirOutroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  layout?: OutroLayout
+  posterImageSrc?: string
+  posterImageAlt?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultMemoirOutroBumper',
+  description: 'Memoir outro with scrapbook panels and reflective chapter notes',
+  sourceFile: 'src/core/outro/memoir-outro-reflection/default-memoir-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'memoir', 'reflection'],
+  propsTypeName: 'DefaultMemoirOutroBumperProps',
+})
+
+export function DefaultMemoirOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  posterImageSrc,
+  posterImageAlt,
+  children,
+}: DefaultMemoirOutroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const resolvedLayout = resolveOutroLayout(layout, runtime.width, runtime.height)
+  const isHorizontal = resolvedLayout === 'horizontal'
+  const { titleFontSize, noteFontSize, kickerFontSize, footerFontSize } = getOutroTypographyScale(runtime.height, resolvedLayout)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: isHorizontal
+          ? `linear-gradient(180deg, ${accent ?? '#111827'} 0%, #0f172a 40%, #020617 100%)`
+          : `radial-gradient(circle at 50% 78%, ${secondaryAccent ?? 'rgba(148,163,184,0.18)'} 0%, ${accent ?? '#0f172a'} 44%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (isHorizontal ? 0.055 : 0.07)),
+      }}
+    >
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: isHorizontal ? 'minmax(220px, 0.36fr) minmax(0, 1.64fr)' : '1fr',
+          gap: isHorizontal ? 24 : 16,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <aside style={{ display: 'grid', gap: 10, alignContent: 'center', border: '1px solid rgba(248,250,252,0.1)', padding: 16, background: 'rgba(255,255,255,0.03)', textAlign: isHorizontal ? 'left' : 'center' }}>
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.58 }}>
+            {kicker ?? 'Reflection'}
+          </p>
+          <div style={{ width: '100%', height: 1, background: 'rgba(248,250,252,0.12)' }} />
+          <p style={{ margin: 0, fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5 }}>
+            {footer ?? 'End Credits'}
+          </p>
+        </aside>
+        <div style={{ display: 'grid', gap: 14, alignContent: 'center', minWidth: 0 }}>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              lineHeight: 0.92,
+              letterSpacing: '-0.07em',
+              textTransform: 'uppercase',
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 10}px, 0)` : 'none',
+            }}
+          >
+            {title}
+          </h1>
+          {note ? <p style={{ margin: 0, maxWidth: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.72, 0.58, { min: 240, max: 720 }), fontSize: noteFontSize, lineHeight: 1.55, opacity: 0.8, ...getOutroLineClamp(isHorizontal ? 3 : 4) }}>{note}</p> : null}
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: isHorizontal ? 'minmax(0, 1fr) minmax(180px, 0.68fr)' : '1fr',
+              gap: 12,
+            }}
+          >
+            <div style={{ border: '1px solid rgba(248,250,252,0.1)', background: 'rgba(0,0,0,0.14)', padding: 14, display: 'grid', gap: 8 }}>
+              <span style={{ fontSize: footerFontSize, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>Closing Notes</span>
+              <span style={{ fontSize: Math.round(runtime.height * 0.02), lineHeight: 1.5, opacity: 0.82 }}>
+                A scrapbook-style outro for memoirs, reflective stories, and slow closing beats.
+              </span>
+            </div>
+            {posterImageSrc ? (
+              <div style={{ border: '1px solid rgba(248,250,252,0.1)', overflow: 'hidden', background: 'rgba(2,6,23,0.18)', minHeight: isHorizontal ? 170 : 220 }}>
+                <img src={posterImageSrc} alt={posterImageAlt ?? title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+              </div>
+            ) : null}
+          </div>
+          <div style={{ display: 'grid', gap: 8, gridTemplateColumns: isHorizontal ? 'repeat(3, minmax(0, 1fr))' : '1fr' }}>
+            {[
+              ['Chapter One', 'Remembered'],
+              ['Chapter Two', 'Carried forward'],
+              ['Chapter Three', 'Still here'],
+            ].map(([label, value], index) => (
+              <div
+                key={label}
+                style={{
+                  border: '1px solid rgba(248,250,252,0.1)',
+                  padding: '10px 12px',
+                  background: index === 1 ? 'rgba(148,163,184,0.14)' : 'rgba(0,0,0,0.12)',
+                  display: 'grid',
+                  gap: 6,
+                }}
+              >
+                <span style={{ fontSize: footerFontSize, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.56 }}>{label}</span>
+                <span style={{ fontSize: Math.round(runtime.height * 0.019) }}>{value}</span>
+              </div>
+            ))}
+          </div>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, opacity: 0.72 }}>
+            {creditLine ? <span style={{ fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase' }}>{creditLine}</span> : null}
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultMemoirOutroBumper)

package/src/core/outro/memoir-outro-reflection/index.ts

@@ -0,0 +1,10 @@
+export { DefaultMemoirOutroBumper } from './default-memoir-outro-bumper'
+export { componentMetadata } from './default-memoir-outro-bumper'
+export {
+  DefaultMemoirOutroBumperLandscape,
+  componentMetadata as DefaultMemoirOutroBumperLandscapeMetadata,
+} from './default-memoir-outro-bumper-Landscape'
+export {
+  DefaultMemoirOutroBumperHorizontal,
+  componentMetadata as DefaultMemoirOutroBumperHorizontalMetadata,
+} from './default-memoir-outro-bumper-Horizontal'

package/src/core/outro/romance-outro/default-romance-outro-bumper-Horizontal.tsx

@@ -0,0 +1 @@
+export { DefaultRomanceOutroBumper as DefaultRomanceOutroBumperHorizontal, componentMetadata } from './default-romance-outro-bumper'

package/src/core/outro/romance-outro/default-romance-outro-bumper-Landscape.tsx

@@ -0,0 +1 @@
+export { DefaultRomanceOutroBumper as DefaultRomanceOutroBumperLandscape, componentMetadata } from './default-romance-outro-bumper'

package/src/core/outro/romance-outro/default-romance-outro-bumper.stories.tsx

@@ -0,0 +1,48 @@
+import { DefaultRomanceOutroBumperHorizontal } from './default-romance-outro-bumper-Horizontal'
+import { DefaultRomanceOutroBumperLandscape } from './default-romance-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'The Final Note',
+  title: 'Love, After the Credits',
+  note: 'A tender closing frame built around a split-heart layout, handwritten notes, and quiet memory cues.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#be123c',
+  secondaryAccent: '#fb7185',
+}
+
+const meta = {
+  title: 'core/outro/romance-outro/DefaultRomanceOutroBumper',
+  component: DefaultRomanceOutroBumperLandscape,
+  args,
+}
+
+export default meta
+
+export const Landscape = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const LandscapeAnimated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultRomanceOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultRomanceOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

package/src/core/outro/romance-outro/default-romance-outro-bumper.tsx

@@ -0,0 +1,123 @@
+import type { ReactNode } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime } from '../../../base'
+import { useSceneMotion } from '../../../base'
+import { getOutroBodyMaxWidth, getOutroLineClamp } from '../_shared/outro-layout'
+
+export interface DefaultRomanceOutroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultRomanceOutroBumper',
+  description: 'Romance outro with a split-heart frame and tender closing notes',
+  sourceFile: 'src/core/outro/romance-outro/default-romance-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'romance', 'drama', 'soft'],
+  propsTypeName: 'DefaultRomanceOutroBumperProps',
+})
+
+export function DefaultRomanceOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultRomanceOutroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, ${accent ?? '#be123c'} 0%, #3f1d38 34%, #020617 100%)`
+          : `radial-gradient(circle at 50% 26%, ${secondaryAccent ?? '#fb7185'} 0%, ${accent ?? '#4c1d95'} 42%, #020617 100%)`,
+        color: textColor ?? '#fff1f2',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.068),
+      }}
+    >
+      <section
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.9fr) minmax(300px, 1.1fr)',
+          gap: portrait ? 18 : 24,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ display: 'grid', gap: 12, alignContent: 'center', textAlign: portrait ? 'center' : 'left', minWidth: 0 }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.66 }}>
+            {kicker ?? 'The Final Note'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: portrait ? Math.round(runtime.height * 0.078) : Math.round(runtime.height * 0.072),
+              lineHeight: 0.9,
+              letterSpacing: '-0.08em',
+              textTransform: 'uppercase',
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none',
+            }}
+          >
+            {title}
+          </h1>
+          {note ? (
+            <p style={{ margin: 0, maxWidth: getOutroBodyMaxWidth(runtime.width, portrait ? 'horizontal' : 'landscape', 0.56, 0.42, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.56, opacity: 0.82, ...getOutroLineClamp(portrait ? 4 : 3) }}>
+              {note}
+            </p>
+          ) : null}
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: portrait ? 'center' : 'flex-start', gap: 10 }}>
+            {creditLine ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, alignContent: 'center', minWidth: 0 }}>
+          <div style={{ border: '1px solid rgba(255,241,242,0.14)', background: 'linear-gradient(145deg, rgba(251,113,133,0.18) 0%, rgba(76,29,149,0.22) 38%, rgba(2,6,23,0.96) 100%)', padding: 16, display: 'grid', gap: 12, overflow: 'hidden' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.82fr) minmax(0, 1.18fr)', gap: 12 }}>
+              <div style={{ border: '1px solid rgba(255,241,242,0.1)', background: 'rgba(0,0,0,0.18)', padding: 14, display: 'grid', gap: 8 }}>
+                <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Love Story Ending</div>
+                <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>Hold on to the last light</div>
+                <div style={{ fontSize: Math.round(runtime.height * 0.018), lineHeight: 1.5, opacity: 0.82 }}>A tender, split-frame outro for emotional endings and romance dramas.</div>
+              </div>
+              <div style={{ border: '1px solid rgba(255,241,242,0.12)', background: 'rgba(0,0,0,0.18)', display: 'grid', placeItems: 'center', minHeight: portrait ? 150 : 220 }}>
+                <div style={{ position: 'relative', width: '72%', aspectRatio: '1 / 1', border: '1px solid rgba(255,241,242,0.12)', borderRadius: '50%', overflow: 'hidden', background: 'radial-gradient(circle at 50% 50%, rgba(251,113,133,0.34), rgba(76,29,149,0.18) 52%, rgba(0,0,0,0.1) 100%)' }}>
+                  <div style={{ position: 'absolute', inset: '18%', border: '1px solid rgba(255,241,242,0.14)', borderRadius: '50%' }} />
+                </div>
+              </div>
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultRomanceOutroBumper)

package/src/core/outro/romance-outro/index.ts

@@ -0,0 +1,10 @@
+export { DefaultRomanceOutroBumper } from './default-romance-outro-bumper'
+export { componentMetadata } from './default-romance-outro-bumper'
+export {
+  DefaultRomanceOutroBumperLandscape,
+  componentMetadata as DefaultRomanceOutroBumperLandscapeMetadata,
+} from './default-romance-outro-bumper-Landscape'
+export {
+  DefaultRomanceOutroBumperHorizontal,
+  componentMetadata as DefaultRomanceOutroBumperHorizontalMetadata,
+} from './default-romance-outro-bumper-Horizontal'

package/src/core/outro/sunset-outro-coda/default-sunset-outro-bumper-Horizontal.tsx

@@ -0,0 +1 @@
+export { DefaultSunsetOutroBumperCoda as DefaultSunsetOutroBumperCodaHorizontal, componentMetadata } from './default-sunset-outro-bumper'

package/src/core/outro/sunset-outro-coda/default-sunset-outro-bumper-Landscape.tsx

@@ -0,0 +1 @@
+export { DefaultSunsetOutroBumperCoda as DefaultSunsetOutroBumperCodaLandscape, componentMetadata } from './default-sunset-outro-bumper'

package/src/core/outro/sunset-outro-coda/default-sunset-outro-bumper.stories.tsx

@@ -0,0 +1,30 @@
+import { DefaultSunsetOutroBumperCodaHorizontal } from './default-sunset-outro-bumper-Horizontal'
+import { DefaultSunsetOutroBumperCodaLandscape } from './default-sunset-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'Coda',
+  title: 'One Last Glow',
+  note: 'A warm sunset ending with a softer cinematic goodbye.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#fb7185',
+  secondaryAccent: '#f59e0b',
+}
+
+const meta = {
+  title: 'core/outro/sunset-outro-coda/DefaultSunsetOutroBumperCoda',
+  component: DefaultSunsetOutroBumperCodaLandscape,
+  args,
+}
+
+export default meta
+export const Landscape = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const LandscapeAnimated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultSunsetOutroBumperCodaHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultSunsetOutroBumperCodaHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/outro/sunset-outro-coda/default-sunset-outro-bumper.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime } from '../../../base'
+import { useSceneMotion } from '../../../base'
+
+export interface DefaultSunsetOutroBumperCodaProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultSunsetOutroBumperCoda',
+  description: 'Sunset coda outro bumper',
+  sourceFile: 'src/core/outro/sunset-outro-coda/default-sunset-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'sunset', 'warm', 'coda'],
+  propsTypeName: 'DefaultSunsetOutroBumperCodaProps',
+})
+
+export function DefaultSunsetOutroBumperCoda({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultSunsetOutroBumperCodaProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, ${accent ?? '#fb7185'} 0%, #3f1d38 34%, #020617 100%)`
+          : `radial-gradient(circle at 50% 24%, ${accent ?? '#fb7185'} 0%, ${secondaryAccent ?? '#f59e0b'} 38%, #020617 100%)`,
+        color: textColor ?? '#fff7ed',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section style={{ width: '100%', height: '100%', display: 'grid', alignContent: 'center', justifyItems: 'center', gap: 14, textAlign: 'center', minWidth: 0, minHeight: 0 }}>
+        <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.58 }}>
+          {kicker ?? 'Sunset Coda'}
+        </p>
+        <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.078) : Math.round(runtime.height * 0.072), lineHeight: 0.92, letterSpacing: '-0.08em', textTransform: 'uppercase', transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none' }}>
+          {title}
+        </h1>
+        {note ? <p style={{ margin: 0, maxWidth: Math.round(runtime.width * 0.54), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.56, opacity: 0.8 }}>{note}</p> : null}
+        {creditLine ? <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</p> : null}
+        {footer ? <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</p> : null}
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultSunsetOutroBumperCoda)

package/src/core/outro/sunset-outro-coda/index.ts

@@ -0,0 +1,10 @@
+export { DefaultSunsetOutroBumperCoda } from './default-sunset-outro-bumper'
+export { componentMetadata } from './default-sunset-outro-bumper'
+export {
+  DefaultSunsetOutroBumperCodaLandscape,
+  componentMetadata as DefaultSunsetOutroBumperCodaLandscapeMetadata,
+} from './default-sunset-outro-bumper-Landscape'
+export {
+  DefaultSunsetOutroBumperCodaHorizontal,
+  componentMetadata as DefaultSunsetOutroBumperCodaHorizontalMetadata,
+} from './default-sunset-outro-bumper-Horizontal'

package/src/core/scene/2dscene/default-2d-scene-Horizontal.stories.tsx

@@ -0,0 +1,18 @@
+import { Default2DSceneHorizontal } from './default-2d-scene-Horizontal'
+
+const meta = {
+  title: 'core/scene/Default2DSceneHorizontal',
+  component: Default2DSceneHorizontal,
+  args: {
+    title: '2D Scene',
+    subtitle: 'Scene preview',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/2dscene/default-2d-scene-Horizontal.tsx

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

package/src/core/scene/2dscene/default-2d-scene-Landscape.tsx

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

package/src/core/scene/2dscene/default-2d-scene.stories.tsx

@@ -0,0 +1,18 @@
+import { Default2DSceneLandscape } from './default-2d-scene-Landscape'
+
+const meta = {
+  title: 'core/scene/Default2DSceneLandscape',
+  component: Default2DSceneLandscape,
+  args: {
+    title: '2D Scene',
+    subtitle: 'Scene preview',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/2dscene/default-2d-scene.tsx

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

package/src/core/scene/2dscene/index.ts

@@ -1 +1,3 @@
 export { Default2DScene } from './default-2d-scene'
+export { Default2DSceneLandscape, componentMetadata as Default2DSceneLandscapeMetadata } from './default-2d-scene-Landscape'
+export { Default2DSceneHorizontal, componentMetadata as Default2DSceneHorizontalMetadata } from './default-2d-scene-Horizontal'

package/src/core/scene/3dscene/default-3d-scene-Horizontal.stories.tsx

@@ -0,0 +1,18 @@
+import { Default3DSceneHorizontal } from './default-3d-scene-Horizontal'
+
+const meta = {
+  title: 'core/scene/Default3DSceneHorizontal',
+  component: Default3DSceneHorizontal,
+  args: {
+    title: '3D Scene',
+    depth: 320,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/3dscene/default-3d-scene-Horizontal.tsx

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

package/src/core/scene/3dscene/default-3d-scene-Landscape.tsx

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