@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/outro/festival-outro-encore/default-festival-outro-bumper.tsx

@@ -0,0 +1,130 @@
+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'
+
+export interface DefaultFestivalOutroBumperProps 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: 'DefaultFestivalOutroBumper',
+  description: 'Festival encore outro with a stage-note wall and bow-out energy',
+  sourceFile: 'src/core/outro/festival-outro-encore/default-festival-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'festival', 'encore'],
+  propsTypeName: 'DefaultFestivalOutroBumperProps',
+})
+
+export function DefaultFestivalOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultFestivalOutroBumperProps) {
+  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
+          ? `radial-gradient(circle at 50% 18%, ${secondaryAccent ?? '#fde68a'} 0%, ${accent ?? '#111827'} 42%, #020617 100%)`
+          : `linear-gradient(180deg, ${accent ?? '#111827'} 0%, #0f172a 45%, #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(0, 1fr) minmax(280px, 0.9fr)' : '1fr',
+          gap: isHorizontal ? 24 : 16,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ display: 'grid', gap: 12, alignContent: 'center', textAlign: isHorizontal ? 'left' : 'center' }}>
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.64 }}>
+            {kicker ?? 'Festival Finale'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 0.92, letterSpacing: '-0.08em', textTransform: 'uppercase', transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 10}px, 0)` : 'none' }}>
+            {title}
+          </h1>
+          {note ? <p style={{ margin: 0, maxWidth: isHorizontal ? Math.round(runtime.width * 0.42) : '100%', fontSize: noteFontSize, lineHeight: 1.55, opacity: 0.8 }}>{note}</p> : null}
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: isHorizontal ? 'flex-start' : 'center', gap: 10 }}>
+            {creditLine ? <span style={{ fontSize: footerFontSize, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.8 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.54 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, alignContent: 'center' }}>
+          <div style={{ border: '1px solid rgba(248,250,252,0.14)', background: 'linear-gradient(180deg, rgba(255,255,255,0.06), rgba(251,191,36,0.08) 42%, rgba(15,23,42,0.18))', padding: 18, display: 'grid', gap: 12, overflow: 'hidden' }}>
+            <div style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.58 }}>
+              Encore Notes
+            </div>
+            <div style={{ display: 'grid', gap: 10 }}>
+              {[
+                ['Stage', 'Closing lights'],
+                ['Energy', 'High'],
+                ['Audience', 'Standing ovation'],
+              ].map(([label, value], index) => (
+                <div
+                  key={label}
+                  style={{
+                    border: '1px solid rgba(248,250,252,0.1)',
+                    background: index === 1 ? 'rgba(251,191,36,0.14)' : 'rgba(0,0,0,0.14)',
+                    padding: '12px 14px',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                    fontSize: Math.round(runtime.height * 0.018),
+                  }}
+                >
+                  <span style={{ opacity: 0.56, textTransform: 'uppercase', letterSpacing: '0.18em' }}>{label}</span>
+                  <span>{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultFestivalOutroBumper)

package/src/core/outro/festival-outro-encore/index.ts

@@ -0,0 +1,10 @@
+export { DefaultFestivalOutroBumper } from './default-festival-outro-bumper'
+export { componentMetadata } from './default-festival-outro-bumper'
+export {
+  DefaultFestivalOutroBumperLandscape,
+  componentMetadata as DefaultFestivalOutroBumperLandscapeMetadata,
+} from './default-festival-outro-bumper-Landscape'
+export {
+  DefaultFestivalOutroBumperHorizontal,
+  componentMetadata as DefaultFestivalOutroBumperHorizontalMetadata,
+} from './default-festival-outro-bumper-Horizontal'

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

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultHeistOutroBumper, componentMetadata as baseComponentMetadata } from './default-heist-outro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.outro.heist',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultHeistOutroBumperHorizontal',
+  description: 'Heist film-style outro bumper (Portrait 9:16 variant)',
+  sourceFile: 'src/core/outro/heist-outro/default-heist-outro-bumper-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultHeistOutroBumperHorizontal = VideoComponent(componentMetadata)(function DefaultHeistOutroBumperHorizontal(
+  props: ComponentProps<typeof DefaultHeistOutroBumper>,
+) {
+  return <DefaultHeistOutroBumper {...props} layout="horizontal" />
+})

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

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultHeistOutroBumper, componentMetadata as baseComponentMetadata } from './default-heist-outro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.outro.heist',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultHeistOutroBumperLandscape',
+  description: 'Heist film-style outro bumper (Landscape 16:9 variant)',
+  sourceFile: 'src/core/outro/heist-outro/default-heist-outro-bumper-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultHeistOutroBumperLandscape = VideoComponent(componentMetadata)(function DefaultHeistOutroBumperLandscape(
+  props: ComponentProps<typeof DefaultHeistOutroBumper>,
+) {
+  return <DefaultHeistOutroBumper {...props} layout="landscape" />
+})

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

@@ -0,0 +1,29 @@
+import { DefaultHeistOutroBumperHorizontal } from './default-heist-outro-bumper-Horizontal'
+import { DefaultHeistOutroBumperLandscape } from './default-heist-outro-bumper-Landscape'
+
+const meta = {
+  title: 'core/outro/heist-outro/DefaultHeistOutroBumperLandscape',
+  component: DefaultHeistOutroBumperLandscape,
+  args: {
+  kicker: 'Heist Finale',
+  title: 'The Getaway',
+  note: 'A dossier-led closing card with route notes, proof tags, and a clean escape-board cadence.',
+    creditLine: 'A Vibecuting Thriller',
+    footer: 'End Credits',
+    accent: '#f97316',
+    secondaryAccent: '#7f1d1d',
+  },
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '16:9' } }
+export const Horizontal = {
+  render: (storyArgs: typeof meta.args) => <DefaultHeistOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof meta.args) => <DefaultHeistOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

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

@@ -0,0 +1,160 @@
+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 { getOutroTypographyScale, resolveOutroLayout } from '../_shared/outro-layout'
+
+export interface DefaultHeistOutroBumperProps 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: 'DefaultHeistOutroBumper',
+  description: 'Heist outro with an escape-route board and caper dossier layout',
+  sourceFile: 'src/core/outro/heist-outro/default-heist-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'heist', 'thriller'],
+  propsTypeName: 'DefaultHeistOutroBumperProps',
+})
+
+export function DefaultHeistOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultHeistOutroBumperProps) {
+  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
+          ? `radial-gradient(circle at 20% 24%, ${accent ?? '#f97316'} 0%, ${secondaryAccent ?? '#7f1d1d'} 38%, #020617 100%)`
+          : 'linear-gradient(180deg, #111827 0%, #020617 42%, #000000 100%)',
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (isHorizontal ? 0.055 : 0.07)),
+      }}
+    >
+      <section
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: isHorizontal ? 'minmax(0, 0.88fr) minmax(300px, 1.12fr)' : '1fr',
+          gap: isHorizontal ? 24 : 16,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ display: 'grid', gap: 14, textAlign: isHorizontal ? 'left' : 'center', alignContent: 'center', minWidth: 0 }}>
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.66 }}>
+            {kicker ?? 'Heist Finale'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              lineHeight: 0.9,
+              letterSpacing: '-0.08em',
+              textTransform: 'uppercase',
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 9}px, 0)` : 'none',
+            }}
+          >
+            {title}
+          </h1>
+          {note ? (
+            <p
+              style={{
+                margin: 0,
+                maxWidth: isHorizontal ? Math.round(runtime.width * 0.4) : '100%',
+                fontSize: noteFontSize,
+                lineHeight: 1.55,
+                opacity: 0.82,
+              }}
+            >
+              {note}
+            </p>
+          ) : null}
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: isHorizontal ? 'flex-start' : 'center', gap: 10 }}>
+            {creditLine ? <span style={{ fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: footerFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, minWidth: 0, alignContent: 'center' }}>
+          <div style={{ border: '1px solid rgba(248,250,252,0.12)', background: 'rgba(15,23,42,0.28)', display: 'grid', gap: 10, overflow: 'hidden', padding: 18 }}>
+            <div style={{ display: 'grid', gridTemplateColumns: isHorizontal ? 'minmax(0, 0.82fr) minmax(200px, 1.18fr)' : '1fr', gap: 12 }}>
+              <div style={{ border: '1px solid rgba(248,250,252,0.1)', background: 'rgba(0,0,0,0.16)', padding: 14, display: 'grid', gap: 8 }}>
+                <span style={{ fontSize: footerFontSize, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.56 }}>Escape Route</span>
+                <strong style={{ fontSize: Math.round(runtime.height * 0.028), letterSpacing: '-0.05em' }}>Locked. Loaded. Gone.</strong>
+                <span style={{ fontSize: Math.round(runtime.height * 0.018), lineHeight: 1.5, opacity: 0.8 }}>
+                  A dossier-style ending for thrillers, capers, and final reveal moments.
+                </span>
+              </div>
+              <div style={{ display: 'grid', gap: 10 }}>
+                {[
+                  ['Target', 'Vault exit'],
+                  ['Status', 'Silent mode'],
+                  ['Route', 'Undercover'],
+                ].map(([label, value], index) => (
+                  <div
+                    key={label}
+                    style={{
+                      border: '1px solid rgba(248,250,252,0.1)',
+                      padding: '12px 14px',
+                      background: index === 1 ? 'rgba(249,115,22,0.14)' : 'rgba(0,0,0,0.14)',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      gap: 12,
+                      fontSize: Math.round(runtime.height * 0.018),
+                    }}
+                  >
+                    <span style={{ opacity: 0.56, textTransform: 'uppercase', letterSpacing: '0.18em' }}>{label}</span>
+                    <span>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div style={{ height: 1, background: `linear-gradient(90deg, transparent, ${accent ?? '#f97316'}, transparent)` }} />
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultHeistOutroBumper)

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

@@ -0,0 +1,4 @@
+export { DefaultHeistOutroBumper } from './default-heist-outro-bumper'
+export { componentMetadata } from './default-heist-outro-bumper'
+export { DefaultHeistOutroBumperLandscape, componentMetadata as DefaultHeistOutroBumperLandscapeMetadata } from './default-heist-outro-bumper-Landscape'
+export { DefaultHeistOutroBumperHorizontal, componentMetadata as DefaultHeistOutroBumperHorizontalMetadata } from './default-heist-outro-bumper-Horizontal'

package/src/core/outro/index.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  DefaultBlackoutOutroBumper,
+  DefaultBlackoutOutroBumperHorizontal,
+  DefaultBlackoutOutroBumperHorizontalMetadata,
+  DefaultBlackoutOutroBumperLandscape,
+  DefaultBlackoutOutroBumperLandscapeMetadata,
+  DefaultCreditsRollOutro,
+  DefaultCreditsRollOutroHorizontal,
+  DefaultCreditsRollOutroHorizontalMetadata,
+  DefaultCreditsRollOutroLandscape,
+  DefaultCreditsRollOutroLandscapeMetadata,
+  DefaultEpilogueOutro,
+  DefaultEpilogueOutroHorizontal,
+  DefaultEpilogueOutroHorizontalMetadata,
+  DefaultEpilogueOutroLandscape,
+  DefaultEpilogueOutroLandscapeMetadata,
+  DefaultHeistOutroBumper,
+  DefaultHeistOutroBumperHorizontal,
+  DefaultHeistOutroBumperHorizontalMetadata,
+  DefaultHeistOutroBumperLandscape,
+  DefaultHeistOutroBumperLandscapeMetadata,
+  DefaultBlackoutOutroBumperFinale,
+  DefaultCreditsRollOutroPremium,
+  DefaultCreditsRollOutroEpic,
+  DefaultCreditsRollOutroRoyal,
+  DefaultAwardOutroBumper,
+  DefaultFestivalOutroBumper,
+  DefaultMemoirOutroBumper,
+  DefaultOutroBumper,
+  DefaultOutroBumperHorizontal,
+  DefaultOutroBumperHorizontalMetadata,
+  DefaultOutroBumperLandscape,
+  DefaultOutroBumperLandscapeMetadata,
+  DefaultRomanceOutroBumper,
+  DefaultSunsetOutroBumper,
+  DefaultSunsetOutroBumperCoda,
+  DefaultSunsetOutroBumperHorizontal,
+  DefaultSunsetOutroBumperHorizontalMetadata,
+  DefaultSunsetOutroBumperLandscape,
+  DefaultSunsetOutroBumperLandscapeMetadata,
+} from './index'
+
+describe('video-project-core outro exports', () => {
+  it('exports cinematic outro families for both layouts', () => {
+    expect(DefaultOutroBumper).toBeTypeOf('function')
+    expect(DefaultOutroBumperLandscape).toBeTypeOf('function')
+    expect(DefaultOutroBumperHorizontal).toBeTypeOf('function')
+    expect(DefaultCreditsRollOutro).toBeTypeOf('function')
+    expect(DefaultCreditsRollOutroLandscape).toBeTypeOf('function')
+    expect(DefaultCreditsRollOutroHorizontal).toBeTypeOf('function')
+    expect(DefaultEpilogueOutro).toBeTypeOf('function')
+    expect(DefaultEpilogueOutroLandscape).toBeTypeOf('function')
+    expect(DefaultEpilogueOutroHorizontal).toBeTypeOf('function')
+    expect(DefaultBlackoutOutroBumper).toBeTypeOf('function')
+    expect(DefaultBlackoutOutroBumperLandscape).toBeTypeOf('function')
+    expect(DefaultBlackoutOutroBumperHorizontal).toBeTypeOf('function')
+    expect(DefaultSunsetOutroBumper).toBeTypeOf('function')
+    expect(DefaultSunsetOutroBumperLandscape).toBeTypeOf('function')
+    expect(DefaultSunsetOutroBumperHorizontal).toBeTypeOf('function')
+    expect(DefaultHeistOutroBumper).toBeTypeOf('function')
+    expect(DefaultHeistOutroBumperLandscape).toBeTypeOf('function')
+    expect(DefaultHeistOutroBumperHorizontal).toBeTypeOf('function')
+    expect(DefaultRomanceOutroBumper).toBeTypeOf('function')
+    expect(DefaultBlackoutOutroBumperFinale).toBeTypeOf('function')
+    expect(DefaultSunsetOutroBumperCoda).toBeTypeOf('function')
+    expect(DefaultCreditsRollOutroPremium).toBeTypeOf('function')
+    expect(DefaultCreditsRollOutroEpic).toBeTypeOf('function')
+    expect(DefaultCreditsRollOutroRoyal).toBeTypeOf('function')
+    expect(DefaultAwardOutroBumper).toBeTypeOf('function')
+    expect(DefaultFestivalOutroBumper).toBeTypeOf('function')
+    expect(DefaultMemoirOutroBumper).toBeTypeOf('function')
+
+    expect(DefaultOutroBumperLandscapeMetadata.aspectRatio).toBe('16:9')
+    expect(DefaultOutroBumperHorizontalMetadata.aspectRatio).toBe('9:16')
+    expect(DefaultCreditsRollOutroLandscapeMetadata.aspectRatio).toBe('16:9')
+    expect(DefaultCreditsRollOutroHorizontalMetadata.aspectRatio).toBe('9:16')
+    expect(DefaultEpilogueOutroLandscapeMetadata.aspectRatio).toBe('16:9')
+    expect(DefaultEpilogueOutroHorizontalMetadata.aspectRatio).toBe('9:16')
+    expect(DefaultBlackoutOutroBumperLandscapeMetadata.aspectRatio).toBe('16:9')
+    expect(DefaultBlackoutOutroBumperHorizontalMetadata.aspectRatio).toBe('9:16')
+    expect(DefaultSunsetOutroBumperLandscapeMetadata.aspectRatio).toBe('16:9')
+    expect(DefaultSunsetOutroBumperHorizontalMetadata.aspectRatio).toBe('9:16')
+    expect(DefaultHeistOutroBumperLandscapeMetadata.aspectRatio).toBe('16:9')
+    expect(DefaultHeistOutroBumperHorizontalMetadata.aspectRatio).toBe('9:16')
+  })
+})

package/src/core/outro/index.ts

@@ -1 +1,74 @@
 export { DefaultOutroBumper } from './default-outro-bumper'
+export { DefaultOutroBumperLandscape, DefaultOutroBumperLandscapeMetadata } from './default-outro-bumper'
+export { DefaultOutroBumperHorizontal, DefaultOutroBumperHorizontalMetadata } from './default-outro-bumper'
+
+export { DefaultCreditsRollOutro } from './default-credits-roll-outro'
+export { DefaultCreditsRollOutroLandscape, DefaultCreditsRollOutroLandscapeMetadata } from './default-credits-roll-outro'
+export { DefaultCreditsRollOutroHorizontal, DefaultCreditsRollOutroHorizontalMetadata } from './default-credits-roll-outro'
+
+export { DefaultEpilogueOutro } from './default-epilogue-outro'
+export { DefaultEpilogueOutroLandscape, DefaultEpilogueOutroLandscapeMetadata } from './default-epilogue-outro'
+export { DefaultEpilogueOutroHorizontal, DefaultEpilogueOutroHorizontalMetadata } from './default-epilogue-outro'
+
+export { DefaultBlackoutOutroBumper } from './default-blackout-outro-bumper'
+export {
+  DefaultBlackoutOutroBumperLandscape,
+  DefaultBlackoutOutroBumperLandscapeMetadata,
+} from './default-blackout-outro-bumper'
+export {
+  DefaultBlackoutOutroBumperHorizontal,
+  DefaultBlackoutOutroBumperHorizontalMetadata,
+} from './default-blackout-outro-bumper'
+
+export { DefaultSunsetOutroBumper } from './default-sunset-outro-bumper'
+export { DefaultSunsetOutroBumperLandscape, DefaultSunsetOutroBumperLandscapeMetadata } from './default-sunset-outro-bumper'
+export { DefaultSunsetOutroBumperHorizontal, DefaultSunsetOutroBumperHorizontalMetadata } from './default-sunset-outro-bumper'
+export { DefaultCreditsRollOutroRoyal } from './credits-roll-outro-royal'
+export {
+  DefaultCreditsRollOutroRoyalLandscape,
+  DefaultCreditsRollOutroRoyalLandscapeMetadata,
+} from './credits-roll-outro-royal'
+export {
+  DefaultCreditsRollOutroRoyalHorizontal,
+  DefaultCreditsRollOutroRoyalHorizontalMetadata,
+} from './credits-roll-outro-royal'
+export { DefaultFestivalOutroBumper } from './festival-outro-encore'
+export {
+  DefaultFestivalOutroBumperLandscape,
+  DefaultFestivalOutroBumperLandscapeMetadata,
+} from './festival-outro-encore'
+export {
+  DefaultFestivalOutroBumperHorizontal,
+  DefaultFestivalOutroBumperHorizontalMetadata,
+} from './festival-outro-encore'
+export { DefaultAwardOutroBumper } from './award-outro-celebration'
+export {
+  DefaultAwardOutroBumperLandscape,
+  DefaultAwardOutroBumperLandscapeMetadata,
+} from './award-outro-celebration'
+export {
+  DefaultAwardOutroBumperHorizontal,
+  DefaultAwardOutroBumperHorizontalMetadata,
+} from './award-outro-celebration'
+export { DefaultMemoirOutroBumper } from './memoir-outro-reflection'
+export {
+  DefaultMemoirOutroBumperLandscape,
+  DefaultMemoirOutroBumperLandscapeMetadata,
+} from './memoir-outro-reflection'
+export {
+  DefaultMemoirOutroBumperHorizontal,
+  DefaultMemoirOutroBumperHorizontalMetadata,
+} from './memoir-outro-reflection'
+
+export {
+  DefaultHeistOutroBumper,
+  DefaultHeistOutroBumperLandscape,
+  DefaultHeistOutroBumperLandscapeMetadata,
+  DefaultHeistOutroBumperHorizontal,
+  DefaultHeistOutroBumperHorizontalMetadata,
+} from './heist-outro'
+export { DefaultRomanceOutroBumper } from './romance-outro'
+export { DefaultBlackoutOutroBumperFinale } from './blackout-outro-finale'
+export { DefaultSunsetOutroBumperCoda } from './sunset-outro-coda'
+export { DefaultCreditsRollOutroPremium } from './credits-roll-outro-premium'
+export { DefaultCreditsRollOutroEpic } from './credits-roll-outro-epic'

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultMemoirOutroBumper, componentMetadata as baseComponentMetadata } from './default-memoir-outro-bumper'
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  ...baseComponentMetadata,
+  name: 'DefaultMemoirOutroBumperHorizontal',
+  aspectRatio: '9:16',
+  sourceFile: 'src/core/outro/memoir-outro-reflection/default-memoir-outro-bumper-Horizontal.tsx',
+})
+
+export const DefaultMemoirOutroBumperHorizontal = VideoComponent(componentMetadata)(
+  function DefaultMemoirOutroBumperHorizontal(props: ComponentProps<typeof DefaultMemoirOutroBumper>) {
+    return <DefaultMemoirOutroBumper {...props} />
+  },
+)

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultMemoirOutroBumper, componentMetadata as baseComponentMetadata } from './default-memoir-outro-bumper'
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  ...baseComponentMetadata,
+  name: 'DefaultMemoirOutroBumperLandscape',
+  aspectRatio: '16:9',
+  sourceFile: 'src/core/outro/memoir-outro-reflection/default-memoir-outro-bumper-Landscape.tsx',
+})
+
+export const DefaultMemoirOutroBumperLandscape = VideoComponent(componentMetadata)(
+  function DefaultMemoirOutroBumperLandscape(props: ComponentProps<typeof DefaultMemoirOutroBumper>) {
+    return <DefaultMemoirOutroBumper {...props} />
+  },
+)

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

@@ -0,0 +1,42 @@
+import { DefaultMemoirOutroBumperHorizontal } from './default-memoir-outro-bumper-Horizontal'
+import { DefaultMemoirOutroBumperLandscape } from './default-memoir-outro-bumper-Landscape'
+
+const posterImageSrc = `data:image/svg+xml;utf8,${encodeURIComponent(`
+  <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900">
+    <rect width="1200" height="900" fill="#0f172a"/>
+    <rect x="80" y="120" width="1040" height="660" fill="#94a3b8" fill-opacity="0.12"/>
+    <text x="120" y="270" fill="#e2e8f0" font-size="76" font-family="Arial, sans-serif" letter-spacing="8">MEMOIR</text>
+    <text x="120" y="360" fill="#cbd5e1" font-size="38" font-family="Arial, sans-serif" opacity="0.82">chapters remembered</text>
+  </svg>
+`)}`;
+
+const args = {
+  kicker: 'Reflection',
+  title: 'What Remains',
+  note: 'A scrapbook closing page with layered keepsakes, chapter notes, and reflective breathing room.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#0f172a',
+  secondaryAccent: '#94a3b8',
+  posterImageSrc,
+  posterImageAlt: 'Memoir reflection image',
+}
+
+const meta = {
+  title: 'core/outro/memoir-outro-reflection/DefaultMemoirOutroBumperLandscape',
+  component: DefaultMemoirOutroBumperLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultMemoirOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultMemoirOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}