@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/intro/western-intro-gangster/default-western-intro-bumper.stories.tsx

@@ -0,0 +1,31 @@
+import { DefaultWesternIntroBumperGangsterHorizontal } from './default-western-intro-bumper-Horizontal'
+import { DefaultWesternIntroBumperGangsterLandscape } from './default-western-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Frontier Crime',
+  title: 'The Last Outlaw',
+  subtitle: 'A wanted-poster dossier with evidence-board framing and a tougher western tone.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#1f130d',
+  secondaryAccent: '#6b3f1d',
+}
+
+const meta = {
+  title: 'core/intro/western-intro-gangster/DefaultWesternIntroBumperGangsterLandscape',
+  component: DefaultWesternIntroBumperGangsterLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultWesternIntroBumperGangsterHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultWesternIntroBumperGangsterHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

package/src/core/intro/western-intro-gangster/default-western-intro-bumper.tsx

@@ -0,0 +1,105 @@
+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 { getIntroBodyMaxWidth, getIntroLineClamp, getIntroPanelMinHeight, getIntroPanelPadding } from '../_shared/intro-layout'
+
+export interface DefaultWesternIntroBumperGangsterProps extends BaseRemotionSceneProps {
+  title: string
+  subtitle?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultWesternIntroBumperGangster',
+  description: 'Gangster western intro with a wanted poster and evidence board layout, tuned for portrait previews',
+  sourceFile: 'src/core/intro/western-intro-gangster/default-western-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'western', 'gangster', 'dust'],
+  propsTypeName: 'DefaultWesternIntroBumperGangsterProps',
+})
+
+export function DefaultWesternIntroBumperGangster({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultWesternIntroBumperGangsterProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? 'linear-gradient(180deg, #2b1d14 0%, #130d09 40%, #020617 100%)'
+          : `radial-gradient(circle at 50% 24%, ${secondaryAccent ?? '#6b3f1d'} 0%, ${accent ?? '#1f130d'} 42%, #020617 100%)`,
+        color: textColor ?? '#fff7ed',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.84fr) minmax(280px, 1.16fr)', gap: portrait ? 18 : 24, alignItems: 'stretch', minWidth: 0, minHeight: 0, overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gap: 12, textAlign: portrait ? 'center' : 'left', minWidth: 0, alignContent: 'center' }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.66 }}>
+            {kicker ?? 'Dust and Smoke'}
+          </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>
+          {subtitle ? <p style={{ margin: 0, maxWidth: getIntroBodyMaxWidth(runtime.width, portrait, 0.42, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.55, opacity: 0.82, ...getIntroLineClamp(portrait ? 4 : 3) }}>{subtitle}</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={{ width: '100%', minWidth: 0, border: '1px solid rgba(255,247,237,0.14)', background: 'linear-gradient(180deg, rgba(255,247,237,0.06) 0%, rgba(15,23,42,0.2) 38%, rgba(2,6,23,0.96) 100%)', padding: getIntroPanelPadding(runtime.height, portrait, 0.008, 0.007, { min: 12, max: 18 }), display: 'grid', gap: 12, overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.22, { min: 220, max: 340 }) }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1fr) minmax(0, 0.82fr)', gap: 12, minWidth: 0 }}>
+              <div style={{ display: 'grid', gap: 10, minWidth: 0 }}>
+                <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Wanted and Wired</div>
+                <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>No one rides alone</div>
+                <div style={{ border: '1px solid rgba(255,247,237,0.1)', padding: '12px 14px', background: 'rgba(0,0,0,0.16)', display: 'grid', gap: 8 }}>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>Case File</span>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.02), ...getIntroLineClamp(2) }}>Split-screen dossier with a wanted poster on the right and records on the left.</span>
+                </div>
+              </div>
+              <div style={{ border: '1px solid rgba(255,247,237,0.12)', background: 'rgba(0,0,0,0.18)', padding: 14, display: 'grid', gap: 10, alignContent: 'start', minHeight: portrait ? 120 : 0 }}>
+                {['Alias', 'Territory', 'Reward'].map((label, index) => (
+                  <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: Math.round(runtime.height * 0.018), opacity: 0.82, minWidth: 0 }}>
+                    <span style={{ letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>{label}</span>
+                    <span style={getIntroLineClamp(1)}>{index === 0 ? 'Unknown' : index === 1 ? 'Borderline' : 'High'}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultWesternIntroBumperGangster)

package/src/core/intro/western-intro-gangster/index.ts

@@ -0,0 +1,11 @@
+export { DefaultWesternIntroBumperGangster } from './default-western-intro-bumper'
+export { componentMetadata } from './default-western-intro-bumper'
+export {
+  DefaultWesternIntroBumperGangsterLandscape,
+  componentMetadata as DefaultWesternIntroBumperGangsterLandscapeMetadata,
+} from './default-western-intro-bumper-Landscape'
+export {
+  DefaultWesternIntroBumperGangsterHorizontal,
+  componentMetadata as DefaultWesternIntroBumperGangsterHorizontalMetadata,
+} from './default-western-intro-bumper-Horizontal'
+

package/src/core/outro/_shared/outro-layout.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getOutroBodyMaxWidth,
+  getOutroLineClamp,
+  getOutroPanelMinHeight,
+  getOutroTypographyScale,
+  resolveOutroLayout,
+} from './outro-layout'
+
+describe('outro layout helpers', () => {
+  it('keeps portrait constraints tighter than landscape ones', () => {
+    const landscape = resolveOutroLayout(undefined, 1920, 1080)
+    const portrait = resolveOutroLayout(undefined, 1080, 1920)
+
+    expect(landscape).toBe('landscape')
+    expect(portrait).toBe('horizontal')
+
+    expect(getOutroBodyMaxWidth(1080, landscape, 0.34, 0.24, { min: 240, max: 860 })).toBeGreaterThan(
+      getOutroBodyMaxWidth(1080, portrait, 0.34, 0.24, { min: 240, max: 860 }),
+    )
+
+    expect(getOutroPanelMinHeight(1920, portrait, 0.24, 0.28, { min: 220, max: 320 })).toBeLessThanOrEqual(320)
+    expect(getOutroPanelMinHeight(1920, landscape, 0.24, 0.28, { min: 220, max: 320 })).toBeLessThanOrEqual(320)
+
+    expect(getOutroTypographyScale(1080, landscape).titleFontSize).toBeGreaterThan(0)
+    expect(getOutroLineClamp(3)).toMatchObject({
+      display: '-webkit-box',
+      WebkitLineClamp: 3,
+    })
+  })
+})

package/src/core/outro/_shared/outro-layout.ts

@@ -0,0 +1,72 @@
+export type OutroLayout = 'landscape' | 'horizontal'
+
+export function resolveOutroLayout(
+  layout: OutroLayout | undefined,
+  width: number,
+  height: number,
+): OutroLayout {
+  if (layout) {
+    return layout
+  }
+
+  return height > width ? 'horizontal' : 'landscape'
+}
+
+export function getOutroTypographyScale(height: number, layout: OutroLayout) {
+  const isHorizontal = layout === 'horizontal'
+
+  return {
+    titleFontSize: Math.round(height * (isHorizontal ? 0.074 : 0.068)),
+    noteFontSize: Math.round(height * 0.023),
+    kickerFontSize: Math.round(height * 0.018),
+    footerFontSize: Math.round(height * 0.016),
+  }
+}
+
+export function getOutroBodyMaxWidth(
+  width: number,
+  layout: OutroLayout,
+  landscapeRatio: number,
+  horizontalRatio: number,
+  options?: { min?: number; max?: number },
+) {
+  const isHorizontal = layout === 'horizontal'
+  const ratio = isHorizontal ? horizontalRatio : landscapeRatio
+  const minimum = options?.min ?? 240
+  const maximum = options?.max ?? 720
+
+  return Math.min(Math.max(Math.round(width * ratio), minimum), maximum)
+}
+
+export function getOutroPanelPadding(height: number, layout: OutroLayout, landscapeRatio: number, horizontalRatio: number) {
+  const isHorizontal = layout === 'horizontal'
+  return Math.round(height * (isHorizontal ? horizontalRatio : landscapeRatio))
+}
+
+export function getOutroPanelMinHeight(
+  height: number,
+  layout: OutroLayout,
+  landscapeRatio: number,
+  horizontalRatio: number,
+  options?: { min?: number; max?: number },
+) {
+  const isHorizontal = layout === 'horizontal'
+  const ratio = isHorizontal ? horizontalRatio : landscapeRatio
+  const minimum = options?.min ?? 120
+  const maximum = options?.max ?? 360
+
+  return Math.min(Math.max(Math.round(height * ratio), minimum), maximum)
+}
+
+export function getOutroBodyGridTemplate(layout: OutroLayout, portraitTemplate: string, landscapeTemplate: string) {
+  return layout === 'horizontal' ? portraitTemplate : landscapeTemplate
+}
+
+export function getOutroLineClamp(lines: number) {
+  return {
+    display: '-webkit-box',
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: 'vertical' as const,
+    overflow: 'hidden',
+  }
+}

package/src/core/outro/award-outro-celebration/default-award-outro-bumper-Horizontal.tsx

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

package/src/core/outro/award-outro-celebration/default-award-outro-bumper-Landscape.tsx

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

package/src/core/outro/award-outro-celebration/default-award-outro-bumper.stories.tsx

@@ -0,0 +1,42 @@
+import { DefaultAwardOutroBumperHorizontal } from './default-award-outro-bumper-Horizontal'
+import { DefaultAwardOutroBumperLandscape } from './default-award-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="#111827"/>
+    <circle cx="600" cy="360" r="180" fill="#f59e0b" fill-opacity="0.45"/>
+    <rect x="470" y="180" width="260" height="360" rx="24" fill="#f8fafc" fill-opacity="0.12"/>
+    <text x="120" y="720" fill="#fef3c7" font-size="92" font-family="Arial, sans-serif" letter-spacing="8">AWARD</text>
+  </svg>
+`)}`;
+
+const args = {
+  kicker: 'Awards Season',
+  title: 'And the Winner Is',
+  note: 'A trophy-rail finale with poster framing, winner highlights, and a formal award-show finish.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#111827',
+  secondaryAccent: '#f59e0b',
+  posterImageSrc,
+  posterImageAlt: 'Award celebration image',
+}
+
+const meta = {
+  title: 'core/outro/award-outro-celebration/DefaultAwardOutroBumperLandscape',
+  component: DefaultAwardOutroBumperLandscape,
+  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) => <DefaultAwardOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultAwardOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/outro/award-outro-celebration/default-award-outro-bumper.tsx

@@ -0,0 +1,152 @@
+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 DefaultAwardOutroBumperProps 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: 'DefaultAwardOutroBumper',
+  description: 'Award-show outro with a trophy rail and celebratory poster frame',
+  sourceFile: 'src/core/outro/award-outro-celebration/default-award-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'award', 'celebration'],
+  propsTypeName: 'DefaultAwardOutroBumperProps',
+})
+
+export function DefaultAwardOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  posterImageSrc,
+  posterImageAlt,
+  children,
+}: DefaultAwardOutroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const resolvedLayout = resolveOutroLayout(layout, runtime.width, runtime.height)
+  const isHorizontal = resolvedLayout === 'horizontal'
+  const portrait = isHorizontal
+  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 ?? '#f59e0b'} 0%, ${accent ?? '#111827'} 42%, #020617 100%)`
+          : `linear-gradient(180deg, ${accent ?? '#111827'} 0%, #0f172a 44%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (portrait ? 0.06 : 0.07)),
+        overflow: 'hidden',
+      }}
+    >
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.92fr) minmax(300px, 1.08fr)',
+          gap: portrait ? 16 : 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: kickerFontSize, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.64 }}>
+            {kicker ?? 'Awards Season'}
+          </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: portrait ? '100%' : Math.round(runtime.width * 0.42), fontSize: noteFontSize, lineHeight: 1.55, opacity: 0.82 }}>{note}</p> : null}
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: portrait ? 'center' : 'flex-start', 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', minWidth: 0 }}>
+          <div style={{ border: '1px solid rgba(248,250,252,0.14)', background: 'linear-gradient(180deg, rgba(255,255,255,0.06), rgba(245,158,11,0.1) 44%, rgba(15,23,42,0.18))', padding: portrait ? 14 : 18, display: 'grid', gap: 12, overflow: 'hidden' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : posterImageSrc ? 'minmax(0, 0.74fr) minmax(0, 1.26fr)' : '1fr', gap: 12 }}>
+              {posterImageSrc ? (
+                <div style={{ minHeight: portrait ? 158 : 170, border: '1px solid rgba(248,250,252,0.12)', overflow: 'hidden', background: 'rgba(2,6,23,0.18)' }}>
+                  <img src={posterImageSrc} alt={posterImageAlt ?? title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+                </div>
+              ) : null}
+              <div style={{ display: 'grid', gap: 10, alignContent: 'center' }}>
+                <div style={{ fontSize: footerFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>
+                  Trophy Cards
+                </div>
+                {[
+                  ['Best Picture', 'Vibecuting Studio'],
+                  ['Best Edit', 'Motion Team'],
+                  ['Best Sound', 'Editorial Crew'],
+                ].map(([label, value], index) => (
+                  <div
+                    key={label}
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      gap: 12,
+                      fontSize: Math.round(runtime.height * (portrait ? 0.017 : 0.02)),
+                      border: '1px solid rgba(248,250,252,0.1)',
+                      padding: '10px 12px',
+                      background: index === 1 ? 'rgba(245,158,11,0.14)' : 'rgba(0,0,0,0.14)',
+                    }}
+                  >
+                    <span style={{ opacity: 0.56, textTransform: 'uppercase', letterSpacing: '0.18em' }}>{label}</span>
+                    <span>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultAwardOutroBumper)

package/src/core/outro/award-outro-celebration/index.ts

@@ -0,0 +1,10 @@
+export { DefaultAwardOutroBumper } from './default-award-outro-bumper'
+export { componentMetadata } from './default-award-outro-bumper'
+export {
+  DefaultAwardOutroBumperLandscape,
+  componentMetadata as DefaultAwardOutroBumperLandscapeMetadata,
+} from './default-award-outro-bumper-Landscape'
+export {
+  DefaultAwardOutroBumperHorizontal,
+  componentMetadata as DefaultAwardOutroBumperHorizontalMetadata,
+} from './default-award-outro-bumper-Horizontal'

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

@@ -0,0 +1 @@
+export { DefaultBlackoutOutroBumperFinale as DefaultBlackoutOutroBumperFinaleHorizontal, componentMetadata } from './default-blackout-outro-bumper'

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

@@ -0,0 +1 @@
+export { DefaultBlackoutOutroBumperFinale as DefaultBlackoutOutroBumperFinaleLandscape, componentMetadata } from './default-blackout-outro-bumper'

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

@@ -0,0 +1,28 @@
+import { DefaultBlackoutOutroBumperFinaleHorizontal } from './default-blackout-outro-bumper-Horizontal'
+import { DefaultBlackoutOutroBumperFinaleLandscape } from './default-blackout-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'Finale',
+  title: 'The End',
+  note: 'A hard-black outro card for thriller endings, prestige drama, and stark finales.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+}
+
+const meta = {
+  title: 'core/outro/blackout-outro-finale/DefaultBlackoutOutroBumperFinale',
+  component: DefaultBlackoutOutroBumperFinaleLandscape,
+  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) => <DefaultBlackoutOutroBumperFinaleHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultBlackoutOutroBumperFinaleHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

@@ -0,0 +1,71 @@
+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 DefaultBlackoutOutroBumperFinaleProps 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: 'DefaultBlackoutOutroBumperFinale',
+  description: 'Blackout finale outro bumper',
+  sourceFile: 'src/core/outro/blackout-outro-finale/default-blackout-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'blackout', 'minimal', 'finale'],
+  propsTypeName: 'DefaultBlackoutOutroBumperFinaleProps',
+})
+
+export function DefaultBlackoutOutroBumperFinale({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  textColor,
+}: DefaultBlackoutOutroBumperFinaleProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: '#000000',
+        color: textColor ?? '#f8fafc',
+        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.56 }}>
+          {kicker ?? 'Fade to Black'}
+        </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.52), 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)(DefaultBlackoutOutroBumperFinale)

package/src/core/outro/blackout-outro-finale/index.ts

@@ -0,0 +1,10 @@
+export { DefaultBlackoutOutroBumperFinale } from './default-blackout-outro-bumper'
+export { componentMetadata } from './default-blackout-outro-bumper'
+export {
+  DefaultBlackoutOutroBumperFinaleLandscape,
+  componentMetadata as DefaultBlackoutOutroBumperFinaleLandscapeMetadata,
+} from './default-blackout-outro-bumper-Landscape'
+export {
+  DefaultBlackoutOutroBumperFinaleHorizontal,
+  componentMetadata as DefaultBlackoutOutroBumperFinaleHorizontalMetadata,
+} from './default-blackout-outro-bumper-Horizontal'

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

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