@vibecuting/video-project-core 0.1.26 → 0.1.27

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

@@ -0,0 +1,124 @@
+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 type { OutroLayout } from '../_shared/outro-layout'
+import { getOutroBodyMaxWidth, getOutroLineClamp, getOutroTypographyScale, resolveOutroLayout } from '../_shared/outro-layout'
+
+export interface DefaultBlackoutOutroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  layout?: OutroLayout
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultBlackoutOutroBumper',
+  description: 'Minimal blackout ending with a single closing line and faint signal',
+  sourceFile: 'src/core/outro/default-blackout-outro-bumper/default-blackout-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'blackout', 'minimal'],
+  propsTypeName: 'DefaultBlackoutOutroBumperProps',
+})
+
+export function DefaultBlackoutOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultBlackoutOutroBumperProps) {
+  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: '#000000',
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (isHorizontal ? 0.055 : 0.07)),
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, rgba(2,6,23,0.16) 35%, rgba(0,0,0,0.94) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          alignContent: 'center',
+          justifyItems: 'center',
+          gap: 10,
+          textAlign: 'center',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.44 }}>
+          {kicker ?? 'Fade to Black'}
+        </p>
+        <h1
+          style={{
+            margin: 0,
+            fontSize: titleFontSize,
+            lineHeight: 0.92,
+            letterSpacing: '-0.07em',
+            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, resolvedLayout, 0.58, 0.48, { min: 220, max: 600 }), fontSize: noteFontSize, lineHeight: 1.56, opacity: 0.62, ...getOutroLineClamp(isHorizontal ? 3 : 4) }}>
+            {note}
+          </p>
+        ) : null}
+        <div style={{ width: Math.round(runtime.width * (isHorizontal ? 0.18 : 0.24)), height: 1, background: 'rgba(248,250,252,0.16)' }} />
+        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 14, fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.48 }}>
+          {creditLine ? <span>{creditLine}</span> : null}
+          {footer ? <span>{footer}</span> : null}
+        </div>
+        {children ? <div>{children}</div> : null}
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultBlackoutOutroBumper)

package/src/core/outro/default-blackout-outro-bumper/index.ts

@@ -0,0 +1,11 @@
+export { DefaultBlackoutOutroBumper } from './default-blackout-outro-bumper'
+export { componentMetadata } from './default-blackout-outro-bumper'
+export {
+  DefaultBlackoutOutroBumperLandscape,
+  componentMetadata as DefaultBlackoutOutroBumperLandscapeMetadata,
+} from './default-blackout-outro-bumper-Landscape'
+export {
+  DefaultBlackoutOutroBumperHorizontal,
+  componentMetadata as DefaultBlackoutOutroBumperHorizontalMetadata,
+} from './default-blackout-outro-bumper-Horizontal'
+

package/src/core/outro/default-credits-roll-outro/default-credits-roll-outro-Horizontal.tsx

@@ -0,0 +1,22 @@
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+import { DefaultCreditsRollOutro, type DefaultCreditsRollOutroProps } from './default-credits-roll-outro'
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultCreditsRollOutroHorizontal',
+  description: 'Credits-roll outro with a native 9:16 portrait layout',
+  sourceFile: 'src/core/outro/default-credits-roll-outro/default-credits-roll-outro-Horizontal.tsx',
+  aspectRatio: '9:16',
+  sceneType: 'outro',
+  tags: ['outro', 'credits', 'roll', 'portrait'],
+  propsTypeName: 'DefaultCreditsRollOutroProps',
+})
+
+export const DefaultCreditsRollOutroHorizontal = VideoComponent(componentMetadata)(
+  function DefaultCreditsRollOutroHorizontal(props: DefaultCreditsRollOutroProps) {
+    return <DefaultCreditsRollOutro {...props} layout="horizontal" />
+  },
+)

package/src/core/outro/default-credits-roll-outro/default-credits-roll-outro-Landscape.tsx

@@ -0,0 +1,22 @@
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+import { DefaultCreditsRollOutro, type DefaultCreditsRollOutroProps } from './default-credits-roll-outro'
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultCreditsRollOutroLandscape',
+  description: 'Credits-roll outro with a widescreen 16:9 layout',
+  sourceFile: 'src/core/outro/default-credits-roll-outro/default-credits-roll-outro-Landscape.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'credits', 'roll', 'landscape'],
+  propsTypeName: 'DefaultCreditsRollOutroProps',
+})
+
+export const DefaultCreditsRollOutroLandscape = VideoComponent(componentMetadata)(
+  function DefaultCreditsRollOutroLandscape(props: DefaultCreditsRollOutroProps) {
+    return <DefaultCreditsRollOutro {...props} layout="landscape" />
+  },
+)

package/src/core/outro/default-credits-roll-outro/default-credits-roll-outro.stories.tsx

@@ -0,0 +1,48 @@
+import { DefaultCreditsRollOutroHorizontal } from './default-credits-roll-outro-Horizontal'
+import { DefaultCreditsRollOutroLandscape } from './default-credits-roll-outro-Landscape'
+
+const args = {
+  kicker: 'Final Credits',
+  title: 'A Roll of Names, Roles, and Thanks',
+  note: 'A column-driven credits panel with clearer rows and a stronger roll structure.',
+  creditLine: 'Music, post, and finishing by Vibecuting',
+  footer: 'Credits Roll',
+  accent: '#0a0a0a',
+  secondaryAccent: '#1f2937',
+}
+
+const meta = {
+  title: 'core/outro/default-credits-roll-outro/DefaultCreditsRollOutroLandscape',
+  component: DefaultCreditsRollOutroLandscape,
+  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) => <DefaultCreditsRollOutroHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultCreditsRollOutroHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

package/src/core/outro/default-credits-roll-outro/default-credits-roll-outro.tsx

@@ -0,0 +1,208 @@
+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 type { OutroLayout } from '../_shared/outro-layout'
+import {
+  getOutroBodyMaxWidth,
+  getOutroLineClamp,
+  getOutroPanelMinHeight,
+  getOutroTypographyScale,
+  resolveOutroLayout,
+} from '../_shared/outro-layout'
+
+export interface DefaultCreditsRollOutroProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  layout?: OutroLayout
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultCreditsRollOutro',
+  description: 'Scrollable credits panel with a clear column-driven layout',
+  sourceFile: 'src/core/outro/default-credits-roll-outro/default-credits-roll-outro.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'credits', 'roll', 'editorial'],
+  propsTypeName: 'DefaultCreditsRollOutroProps',
+})
+
+export function DefaultCreditsRollOutro({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultCreditsRollOutroProps) {
+  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,
+  )
+
+  const rows = [
+    ['Written', 'Vibecuting Studio'],
+    ['Produced', 'Motion Team'],
+    ['Direction', 'Editorial Crew'],
+    ['Finishing', 'Post Department'],
+  ]
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: isHorizontal
+          ? 'linear-gradient(180deg, #0a0a0a 0%, #121212 40%, #000000 100%)'
+          : `radial-gradient(circle at 50% 85%, ${secondaryAccent ?? 'rgba(255,255,255,0.12)'} 0%, ${accent ?? '#0f172a'} 44%, #000 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (isHorizontal ? 0.055 : 0.07)),
+        overflow: 'hidden',
+      }}
+    >
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: isHorizontal ? 'minmax(220px, 0.56fr) minmax(0, 1.44fr)' : '1fr',
+          gap: isHorizontal ? 20 : 18,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: 12,
+            alignContent: 'center',
+            textAlign: isHorizontal ? 'left' : 'center',
+            minWidth: 0,
+          }}
+        >
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.62 }}>
+            {kicker ?? 'End Credits'}
+          </p>
+          <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.34, 0.24, { min: 220, max: 420 }),
+                fontSize: noteFontSize,
+                lineHeight: 1.55,
+                opacity: 0.8,
+                ...getOutroLineClamp(isHorizontal ? 3 : 4),
+              }}
+            >
+              {note}
+            </p>
+          ) : null}
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gap: 12,
+            alignContent: 'center',
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              minHeight: getOutroPanelMinHeight(runtime.height, resolvedLayout, 0.24, 0.28, { min: 220, max: 320 }),
+              border: '1px solid rgba(248,250,252,0.12)',
+              background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(15,23,42,0.18))',
+              padding: 18,
+              display: 'grid',
+              gap: 12,
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline' }}>
+              <span style={{ fontSize: footerFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>
+                Credits Roll
+              </span>
+              {creditLine ? (
+                <span style={{ fontSize: footerFontSize, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.72 }}>
+                  {creditLine}
+                </span>
+              ) : null}
+            </div>
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: isHorizontal ? 'repeat(2, minmax(0, 1fr))' : '1fr',
+                gap: 12,
+                minWidth: 0,
+              }}
+            >
+              {rows.map(([label, value], index) => (
+                <div
+                  key={label}
+                  style={{
+                    border: '1px solid rgba(248,250,252,0.1)',
+                    background: index % 2 === 0 ? 'rgba(2,6,23,0.14)' : 'rgba(255,255,255,0.03)',
+                    padding: '12px 14px',
+                    display: 'grid',
+                    gap: 6,
+                    minWidth: 0,
+                    transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * (index + 1) * 3}px, 0)` : 'none',
+                  }}
+                >
+                  <span style={{ fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.54 }}>
+                    {label}
+                  </span>
+                  <span style={{ fontSize: Math.round(runtime.height * (isHorizontal ? 0.02 : 0.018)), letterSpacing: '-0.02em', ...getOutroLineClamp(1) }}>{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          {footer ? (
+            <div style={{ fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52, textAlign: 'center' }}>
+              {footer}
+            </div>
+          ) : null}
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCreditsRollOutro)

package/src/core/outro/default-credits-roll-outro/index.ts

@@ -0,0 +1,11 @@
+export { DefaultCreditsRollOutro } from './default-credits-roll-outro'
+export { componentMetadata } from './default-credits-roll-outro'
+export {
+  DefaultCreditsRollOutroLandscape,
+  componentMetadata as DefaultCreditsRollOutroLandscapeMetadata,
+} from './default-credits-roll-outro-Landscape'
+export {
+  DefaultCreditsRollOutroHorizontal,
+  componentMetadata as DefaultCreditsRollOutroHorizontalMetadata,
+} from './default-credits-roll-outro-Horizontal'
+

package/src/core/outro/default-epilogue-outro/default-epilogue-outro-Horizontal.tsx

@@ -0,0 +1,22 @@
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+import { DefaultEpilogueOutro, type DefaultEpilogueOutroProps } from './default-epilogue-outro'
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultEpilogueOutroHorizontal',
+  description: 'Epilogue outro with a native 9:16 portrait layout',
+  sourceFile: 'src/core/outro/default-epilogue-outro/default-epilogue-outro-Horizontal.tsx',
+  aspectRatio: '9:16',
+  sceneType: 'outro',
+  tags: ['outro', 'epilogue', 'portrait'],
+  propsTypeName: 'DefaultEpilogueOutroProps',
+})
+
+export const DefaultEpilogueOutroHorizontal = VideoComponent(componentMetadata)(
+  function DefaultEpilogueOutroHorizontal(props: DefaultEpilogueOutroProps) {
+    return <DefaultEpilogueOutro {...props} layout="horizontal" />
+  },
+)

package/src/core/outro/default-epilogue-outro/default-epilogue-outro-Landscape.tsx

@@ -0,0 +1,22 @@
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+import { DefaultEpilogueOutro, type DefaultEpilogueOutroProps } from './default-epilogue-outro'
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultEpilogueOutroLandscape',
+  description: 'Epilogue outro with a widescreen 16:9 layout',
+  sourceFile: 'src/core/outro/default-epilogue-outro/default-epilogue-outro-Landscape.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'epilogue', 'landscape'],
+  propsTypeName: 'DefaultEpilogueOutroProps',
+})
+
+export const DefaultEpilogueOutroLandscape = VideoComponent(componentMetadata)(
+  function DefaultEpilogueOutroLandscape(props: DefaultEpilogueOutroProps) {
+    return <DefaultEpilogueOutro {...props} layout="landscape" />
+  },
+)

package/src/core/outro/default-epilogue-outro/default-epilogue-outro.stories.tsx

@@ -0,0 +1,48 @@
+import { DefaultEpilogueOutroHorizontal } from './default-epilogue-outro-Horizontal'
+import { DefaultEpilogueOutroLandscape } from './default-epilogue-outro-Landscape'
+
+const args = {
+  kicker: 'Epilogue',
+  title: 'One Last Quiet Scene',
+  note: 'A minimal coda that reads like a final page rather than a generic thank-you slide.',
+  creditLine: 'The story continues off screen',
+  footer: 'Fade Out',
+  accent: '#020617',
+  secondaryAccent: '#0f172a',
+}
+
+const meta = {
+  title: 'core/outro/default-epilogue-outro/DefaultEpilogueOutroLandscape',
+  component: DefaultEpilogueOutroLandscape,
+  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) => <DefaultEpilogueOutroHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultEpilogueOutroHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

package/src/core/outro/default-epilogue-outro/default-epilogue-outro.tsx

@@ -0,0 +1,115 @@
+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 type { OutroLayout } from '../_shared/outro-layout'
+import { getOutroBodyMaxWidth, getOutroLineClamp, getOutroTypographyScale, resolveOutroLayout } from '../_shared/outro-layout'
+
+export interface DefaultEpilogueOutroProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  layout?: OutroLayout
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultEpilogueOutro',
+  description: 'Minimal epilogue outro with a note rail and final-frame framing',
+  sourceFile: 'src/core/outro/default-epilogue-outro/default-epilogue-outro.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'epilogue', 'fade'],
+  propsTypeName: 'DefaultEpilogueOutroProps',
+})
+
+export function DefaultEpilogueOutro({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultEpilogueOutroProps) {
+  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, #0b1120 0%, #020617 42%, #000000 100%)'
+          : `radial-gradient(circle at 50% 24%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#020617'} 46%, #000 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(180px, 0.32fr) minmax(0, 1.68fr)' : '1fr',
+          gap: isHorizontal ? 24 : 14,
+          alignItems: 'center',
+          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', minWidth: 0 }}>
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.58 }}>
+            {kicker ?? 'Epilogue'}
+          </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 ?? 'Fade Out'}
+          </p>
+        </aside>
+        <div style={{ display: 'grid', gap: 14, justifyItems: isHorizontal ? 'start' : 'center', textAlign: isHorizontal ? 'left' : '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.68, 0.58, { min: 240, max: 720 }), fontSize: noteFontSize, lineHeight: 1.55, opacity: 0.8, ...getOutroLineClamp(isHorizontal ? 3 : 4) }}>{note}</p> : null}
+          {creditLine ? <p style={{ margin: 0, fontSize: footerFontSize, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</p> : null}
+          {children ? <div style={{ marginTop: 4 }}>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultEpilogueOutro)

package/src/core/outro/default-epilogue-outro/index.ts

@@ -0,0 +1,11 @@
+export { DefaultEpilogueOutro } from './default-epilogue-outro'
+export { componentMetadata } from './default-epilogue-outro'
+export {
+  DefaultEpilogueOutroLandscape,
+  componentMetadata as DefaultEpilogueOutroLandscapeMetadata,
+} from './default-epilogue-outro-Landscape'
+export {
+  DefaultEpilogueOutroHorizontal,
+  componentMetadata as DefaultEpilogueOutroHorizontalMetadata,
+} from './default-epilogue-outro-Horizontal'
+