@vibecuting/video-project-core 0.1.26 → 0.1.27

package/src/core/outro/credits-roll-outro-epic/default-credits-roll-outro-Landscape.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: 'DefaultCreditsRollOutroEpicLandscape',
+  description: 'Epic credits-roll outro bumper (Landscape 16:9 variant)',
+  sourceFile: 'src/core/outro/credits-roll-outro-epic/default-credits-roll-outro-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultCreditsRollOutroEpicLandscape = VideoComponent(componentMetadata)(function DefaultCreditsRollOutroEpicLandscape(
+  props: ComponentProps<typeof DefaultCreditsRollOutroEpic>,
+) {
+  return <DefaultCreditsRollOutroEpic {...props} />
+})

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

@@ -0,0 +1,31 @@
+import { DefaultCreditsRollOutroEpicHorizontal } from './default-credits-roll-outro-Horizontal'
+import { DefaultCreditsRollOutroEpicLandscape } from './default-credits-roll-outro-Landscape'
+
+const args = {
+  kicker: 'Grand Finale',
+  title: 'A Bigger End',
+  note: 'A more cinematic credits roll for prestige films and large-scale endings.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#1f2937',
+  secondaryAccent: '#475569',
+}
+
+const meta = {
+  title: 'core/outro/credits-roll-outro-epic/DefaultCreditsRollOutroEpic',
+  component: DefaultCreditsRollOutroEpicLandscape,
+  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) => <DefaultCreditsRollOutroEpicHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultCreditsRollOutroEpicHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

@@ -0,0 +1,106 @@
+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, resolveOutroLayout } from '../_shared/outro-layout'
+
+export interface DefaultCreditsRollOutroEpicProps 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: 'DefaultCreditsRollOutroEpic',
+  description: 'Epic credits outro with a split score board and tiered roll card',
+  sourceFile: 'src/core/outro/credits-roll-outro-epic/default-credits-roll-outro.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'credits', 'epic', 'orchestral', 'roll'],
+  propsTypeName: 'DefaultCreditsRollOutroEpicProps',
+})
+
+export function DefaultCreditsRollOutroEpic({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultCreditsRollOutroEpicProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const resolvedLayout = resolveOutroLayout(undefined, runtime.width, runtime.height)
+  const portrait = resolvedLayout === 'horizontal'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? 'linear-gradient(180deg, #020617 0%, #111827 40%, #000000 100%)'
+          : `radial-gradient(circle at 50% 24%, ${accent ?? '#1f2937'} 0%, ${secondaryAccent ?? '#475569'} 38%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.82fr) minmax(300px, 1.18fr)', gap: portrait ? 18 : 24, alignItems: 'stretch', minWidth: 0, minHeight: 0 }}>
+        <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.34em', textTransform: 'uppercase', opacity: 0.64 }}>
+            {kicker ?? 'Epic Credits'}
+          </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) * 10}px, 0)` : 'none' }}>
+            {title}
+          </h1>
+          {note ? <p style={{ margin: 0, maxWidth: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.58, 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', alignContent: 'center', minWidth: 0 }}>
+          <div style={{ border: '1px solid rgba(248,250,252,0.1)', background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(15,23,42,0.18))', padding: 18, display: 'grid', gap: 12, minHeight: portrait ? 260 : 320, overflow: 'hidden' }}>
+            <div style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>Roll Credits</div>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.76fr) minmax(0, 1.24fr)', gap: 12, minWidth: 0 }}>
+              <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: Math.round(runtime.height * 0.014), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>Score</span>
+                <span style={{ fontSize: Math.round(runtime.height * 0.024), fontWeight: 800, letterSpacing: '-0.05em' }}>Orchestral Suite</span>
+                <span style={{ fontSize: Math.round(runtime.height * 0.018), lineHeight: 1.5, opacity: 0.8 }}>A larger, tiered ending for prestige films and orchestral finales.</span>
+              </div>
+              <div style={{ display: 'grid', gap: 8 }}>
+                {[
+                  ['Theme', 'Grand Finale'],
+                  ['Studio', 'Vibecuting'],
+                  ['Format', 'Screened credits'],
+                ].map(([label, value]) => (
+                  <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: Math.round(runtime.height * (portrait ? 0.018 : 0.02)), border: '1px solid rgba(248,250,252,0.08)', padding: '10px 12px', background: 'rgba(0,0,0,0.12)', minWidth: 0 }}>
+                    <span style={{ opacity: 0.56, textTransform: 'uppercase', letterSpacing: '0.18em' }}>{label}</span>
+                    <span style={getOutroLineClamp(1)}>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCreditsRollOutroEpic)

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

@@ -0,0 +1,10 @@
+export { DefaultCreditsRollOutroEpic } from './default-credits-roll-outro'
+export { componentMetadata } from './default-credits-roll-outro'
+export {
+  DefaultCreditsRollOutroEpicLandscape,
+  componentMetadata as DefaultCreditsRollOutroEpicLandscapeMetadata,
+} from './default-credits-roll-outro-Landscape'
+export {
+  DefaultCreditsRollOutroEpicHorizontal,
+  componentMetadata as DefaultCreditsRollOutroEpicHorizontalMetadata,
+} from './default-credits-roll-outro-Horizontal'

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

@@ -0,0 +1 @@
+export { DefaultCreditsRollOutroPremium as DefaultCreditsRollOutroPremiumHorizontal, componentMetadata } from './default-credits-roll-outro'

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

@@ -0,0 +1 @@
+export { DefaultCreditsRollOutroPremium as DefaultCreditsRollOutroPremiumLandscape, componentMetadata } from './default-credits-roll-outro'

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

@@ -0,0 +1,30 @@
+import { DefaultCreditsRollOutroPremiumHorizontal } from './default-credits-roll-outro-Horizontal'
+import { DefaultCreditsRollOutroPremiumLandscape } from './default-credits-roll-outro-Landscape'
+
+const args = {
+  kicker: 'Credits Roll',
+  title: 'A Film Worth Crediting',
+  note: 'A premium closing card with a stronger end-credit feel.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#111827',
+  secondaryAccent: '#475569',
+}
+
+const meta = {
+  title: 'core/outro/credits-roll-outro-premium/DefaultCreditsRollOutroPremium',
+  component: DefaultCreditsRollOutroPremiumLandscape,
+  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) => <DefaultCreditsRollOutroPremiumHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultCreditsRollOutroPremiumHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

@@ -0,0 +1,88 @@
+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, resolveOutroLayout } from '../_shared/outro-layout'
+
+export interface DefaultCreditsRollOutroPremiumProps 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: 'DefaultCreditsRollOutroPremium',
+  description: 'Premium credits roll outro bumper',
+  sourceFile: 'src/core/outro/credits-roll-outro-premium/default-credits-roll-outro.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'credits', 'premium', 'credits-roll', 'film'],
+  propsTypeName: 'DefaultCreditsRollOutroPremiumProps',
+})
+
+export function DefaultCreditsRollOutroPremium({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultCreditsRollOutroPremiumProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const resolvedLayout = resolveOutroLayout(undefined, runtime.width, runtime.height)
+  const portrait = resolvedLayout === 'horizontal'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? 'linear-gradient(180deg, #0f172a 0%, #020617 44%, #000000 100%)'
+          : `radial-gradient(circle at 50% 24%, ${accent ?? '#111827'} 0%, ${secondaryAccent ?? '#475569'} 38%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: portrait ? '1fr' : '1fr minmax(260px, 0.8fr)', gap: portrait ? 18 : 24, alignItems: 'center', minWidth: 0, minHeight: 0 }}>
+        <div style={{ display: 'grid', gap: 12, textAlign: portrait ? 'center' : 'left', minWidth: 0 }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.64 }}>{kicker ?? 'Final Credits'}</p>
+          <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.076) : Math.round(runtime.height * 0.07), lineHeight: 0.9, 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: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.58, 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', alignContent: 'center', minWidth: 0 }}>
+          <div style={{ border: '1px solid rgba(248,250,252,0.1)', background: 'rgba(15,23,42,0.24)', padding: 18, display: 'grid', gap: 10, position: 'relative', overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 32%, rgba(0,0,0,0.18) 100%)', pointerEvents: 'none' }} />
+            <div style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>Cast and Crew</div>
+            <div style={{ fontSize: Math.round(runtime.height * 0.03), fontWeight: 800, letterSpacing: '-0.06em' }}>Rolling the names in style</div>
+            <div style={{ fontSize: Math.round(runtime.height * 0.022), lineHeight: 1.5, opacity: 0.8 }}>A cleaner, premium end-credit block for prestige films and large-scale productions.</div>
+          </div>
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCreditsRollOutroPremium)

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

@@ -0,0 +1,10 @@
+export { DefaultCreditsRollOutroPremium } from './default-credits-roll-outro'
+export { componentMetadata } from './default-credits-roll-outro'
+export {
+  DefaultCreditsRollOutroPremiumLandscape,
+  componentMetadata as DefaultCreditsRollOutroPremiumLandscapeMetadata,
+} from './default-credits-roll-outro-Landscape'
+export {
+  DefaultCreditsRollOutroPremiumHorizontal,
+  componentMetadata as DefaultCreditsRollOutroPremiumHorizontalMetadata,
+} from './default-credits-roll-outro-Horizontal'

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { DefaultCreditsRollOutroRoyalHorizontal } from './default-credits-roll-outro-Horizontal'
+import { DefaultCreditsRollOutroRoyalLandscape } from './default-credits-roll-outro-Landscape'
+
+const args = {
+  kicker: 'Royal Credits',
+  title: 'A Noble Ending',
+  note: 'A richer gold-and-ink closing card for prestige and awards-season finales.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#111827',
+  secondaryAccent: '#b45309',
+}
+
+const meta = {
+  title: 'core/outro/credits-roll-outro-royal/DefaultCreditsRollOutroRoyalLandscape',
+  component: DefaultCreditsRollOutroRoyalLandscape,
+  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) => <DefaultCreditsRollOutroRoyalHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultCreditsRollOutroRoyalHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}
+

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

@@ -0,0 +1,110 @@
+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 DefaultCreditsRollOutroRoyalProps 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: 'DefaultCreditsRollOutroRoyal',
+  description: 'Royal credits outro with serif framing and a gilded end-title block',
+  sourceFile: 'src/core/outro/credits-roll-outro-royal/default-credits-roll-outro.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'credits', 'royal', 'gold', 'roll'],
+  propsTypeName: 'DefaultCreditsRollOutroRoyalProps',
+})
+
+export function DefaultCreditsRollOutroRoyal({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+}: DefaultCreditsRollOutroRoyalProps) {
+  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% 24%, ${secondaryAccent ?? '#b45309'} 0%, ${accent ?? '#111827'} 42%, #020617 100%)`
+          : 'linear-gradient(180deg, #020617 0%, #111827 44%, #000000 100%)',
+        color: textColor ?? '#fef3c7',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (isHorizontal ? 0.055 : 0.07)),
+        fontFamily: `Georgia, 'Times New Roman', serif`,
+      }}
+    >
+      <section style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: isHorizontal ? '1fr' : 'minmax(0, 0.82fr) minmax(300px, 1.18fr)', gap: isHorizontal ? 16 : 24, alignItems: 'stretch', minWidth: 0, minHeight: 0 }}>
+        <div style={{ display: 'grid', gap: 12, textAlign: isHorizontal ? 'center' : 'left', minWidth: 0, alignContent: 'center' }}>
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.36em', textTransform: 'uppercase', opacity: 0.66 }}>{kicker ?? 'Royal Credits'}</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: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.56, 0.42, { min: 240, max: 720 }), fontSize: noteFontSize, lineHeight: 1.55, opacity: 0.84, ...getOutroLineClamp(isHorizontal ? 3 : 4) }}>{note}</p> : null}
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: isHorizontal ? 'center' : 'flex-start', 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.18em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', alignContent: 'center', minWidth: 0 }}>
+          <div style={{ border: '1px solid rgba(254,243,199,0.18)', background: 'linear-gradient(180deg, rgba(245,158,11,0.1) 0%, rgba(17,24,39,0.22) 40%, rgba(2,6,23,0.94) 100%)', padding: 18, display: 'grid', gap: 12, minHeight: isHorizontal ? 220 : 280, position: 'relative', overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', inset: 0, borderTop: '2px solid rgba(245,158,11,0.9)' }} />
+            <div style={{ display: 'grid', gridTemplateColumns: isHorizontal ? '1fr' : 'minmax(0, 0.72fr) minmax(0, 1.28fr)', gap: 12, minWidth: 0 }}>
+              <div style={{ border: '1px solid rgba(254,243,199,0.14)', padding: 14, background: 'rgba(0,0,0,0.16)', display: 'grid', gap: 8 }}>
+                <span style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.56 }}>End Titles</span>
+                <span style={{ fontSize: Math.round(runtime.height * 0.028), fontWeight: 800, letterSpacing: '-0.05em' }}>A noble ending</span>
+                <span style={{ fontSize: Math.round(runtime.height * 0.018), lineHeight: 1.55, opacity: 0.8, ...getOutroLineClamp(3) }}>Framed like a heritage plaque, not a generic credits panel.</span>
+              </div>
+              <div style={{ display: 'grid', gap: 8 }}>
+                {[
+                  ['Produced', 'Vibecuting Royal'],
+                  ['Presented', 'Prestige Edition'],
+                  ['Crafted', 'Final Cut Guild'],
+                ].map(([label, value]) => (
+                  <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: Math.round(runtime.height * (isHorizontal ? 0.02 : 0.018)), border: '1px solid rgba(254,243,199,0.1)', padding: '10px 12px', background: 'rgba(0,0,0,0.14)', minWidth: 0 }}>
+                    <span style={{ opacity: 0.56, textTransform: 'uppercase', letterSpacing: '0.18em' }}>{label}</span>
+                    <span style={getOutroLineClamp(1)}>{value}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCreditsRollOutroRoyal)

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

@@ -0,0 +1,11 @@
+export { DefaultCreditsRollOutroRoyal } from './default-credits-roll-outro'
+export { componentMetadata } from './default-credits-roll-outro'
+export {
+  DefaultCreditsRollOutroRoyalLandscape,
+  componentMetadata as DefaultCreditsRollOutroRoyalLandscapeMetadata,
+} from './default-credits-roll-outro-Landscape'
+export {
+  DefaultCreditsRollOutroRoyalHorizontal,
+  componentMetadata as DefaultCreditsRollOutroRoyalHorizontalMetadata,
+} from './default-credits-roll-outro-Horizontal'
+

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

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

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

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

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

@@ -0,0 +1,48 @@
+import { DefaultBlackoutOutroBumperHorizontal } from './default-blackout-outro-bumper-Horizontal'
+import { DefaultBlackoutOutroBumperLandscape } from './default-blackout-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'Fade Out',
+  title: 'The End',
+  note: 'A near-empty blackout ending with a single line and faint signal.',
+  creditLine: 'Closing Sequence',
+  footer: 'End Credits',
+  accent: '#020617',
+  secondaryAccent: '#374151',
+}
+
+const meta = {
+  title: 'core/outro/default-blackout-outro-bumper/DefaultBlackoutOutroBumperLandscape',
+  component: DefaultBlackoutOutroBumperLandscape,
+  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) => <DefaultBlackoutOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultBlackoutOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}