@vibecuting/video-project-core 0.1.26 → 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/slide/_shared/index.ts

@@ -4,3 +4,30 @@ export { getSlideTypographyScale } from './slide-typography'
 export type { SlideTypographyScale } from './slide-typography'
 export { getAdaptiveSlideGridLayout, getOverflowSafeSlideGridLayout } from './slide-grid'
 export type { SlideGridLayout, OverflowSafeSlideGridOptions } from './slide-grid'
+export {
+  MediaTemplateSection,
+  clampTextLines,
+  columnRailStyle,
+  createTileStyle,
+  fitMediaStyle,
+  getPhotoGridLayout,
+  getProfileHeroLayout,
+  getVideoPosterRailLayout,
+  gridStyle,
+  renderMediaBadge,
+  renderMediaPlaceholder,
+  safeFullSizeStyle,
+  stackContentStyle,
+} from './media-templates'
+export type {
+  MediaTemplateRuntime,
+  MediaTileStyle,
+  PhotoGridLayout,
+  PhotoGridTemplateItem,
+  ProfileHeroLayout,
+  ProfileHeroStat,
+  ProfileHeroTemplateItem,
+  VideoPosterRailLayout,
+  VideoPosterRailItem,
+  MediaTemplateSectionProps,
+} from './media-templates'

package/src/core/scene/slide/_shared/media-templates.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getPhotoGridLayout,
+  getProfileHeroLayout,
+  getVideoPosterRailLayout,
+} from './media-templates'
+
+describe('media template layouts', () => {
+  it('keeps photo grids compact and inside portrait bounds', () => {
+    const layout = getPhotoGridLayout(5, { width: 1080, height: 1920 })
+
+    expect(layout).toMatchObject({
+      columns: 2,
+      rows: 3,
+      visibleItems: 5,
+      mediaAspectRatio: '4 / 3',
+    })
+    expect(layout.cardMinHeight).toBeGreaterThanOrEqual(120)
+    expect(layout.gap).toBeLessThanOrEqual(18)
+  })
+
+  it('switches poster rails to a stacked column in portrait scenes', () => {
+    const layout = getVideoPosterRailLayout(4, { width: 1080, height: 1920 })
+
+    expect(layout).toMatchObject({
+      railDirection: 'column',
+      columns: 1,
+      rows: 4,
+      visibleItems: 4,
+      posterAspectRatio: '9 / 16',
+    })
+    expect(layout.posterMinHeight).toBeGreaterThanOrEqual(128)
+    expect(layout.posterMinWidth).toBeGreaterThanOrEqual(220)
+  })
+
+  it('reserves enough room for profile hero content on landscape scenes', () => {
+    const layout = getProfileHeroLayout({ width: 1920, height: 1080 }, 3)
+
+    expect(layout).toMatchObject({
+      columns: 2,
+      statColumns: 3,
+    })
+    expect(layout.avatarSize).toBeGreaterThanOrEqual(120)
+    expect(layout.bodyMaxWidth).toBeLessThan(1920)
+  })
+})