@vibecuting/video-project-core 0.1.26 → 0.1.27

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

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

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

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

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

@@ -0,0 +1,48 @@
+import { DefaultOutroBumperHorizontal } from './default-outro-bumper-Horizontal'
+import { DefaultOutroBumperLandscape } from './default-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'The End',
+  title: 'Thanks for Watching',
+  note: 'A formal closing slate with a centered monolith card and room for exit notes.',
+  creditLine: 'Written and produced for Vibecuting',
+  footer: 'End Credits',
+  accent: '#0f172a',
+  secondaryAccent: '#475569',
+}
+
+const meta = {
+  title: 'core/outro/default-outro-bumper/DefaultOutroBumperLandscape',
+  component: DefaultOutroBumperLandscape,
+  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) => <DefaultOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

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

@@ -0,0 +1,159 @@
+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 DefaultOutroBumperProps 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: 'DefaultOutroBumper',
+  description: 'Formal closing slate with a centered monolith card and exit notes',
+  sourceFile: 'src/core/outro/default-outro-bumper/default-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'closing'],
+  propsTypeName: 'DefaultOutroBumperProps',
+})
+
+export function DefaultOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultOutroBumperProps) {
+  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: `radial-gradient(circle at bottom, ${secondaryAccent ?? '#334155'} 0%, ${accent ?? '#0f172a'} 45%, #020617 100%)`,
+        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.12) 48%, rgba(2,6,23,0.38) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          placeItems: 'center',
+          gap: 14,
+          textAlign: 'center',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            width: '100%',
+            maxWidth: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.62, 0.74, { min: 280, max: 860 }),
+            border: '1px solid rgba(248,250,252,0.12)',
+            background: 'linear-gradient(180deg, rgba(255,255,255,0.06), rgba(15,23,42,0.18))',
+            padding: Math.round(runtime.height * 0.03),
+            display: 'grid',
+            gap: 12,
+          }}
+        >
+          <p style={{ margin: 0, fontSize: kickerFontSize, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.62 }}>
+            {kicker ?? 'Final Slate'}
+          </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.5, 0.56, { min: 240, max: 680 }),
+                justifySelf: 'center',
+                fontSize: noteFontSize,
+                lineHeight: 1.55,
+                opacity: 0.8,
+                ...getOutroLineClamp(isHorizontal ? 3 : 4),
+              }}
+            >
+              {note}
+            </p>
+          ) : null}
+        </div>
+
+        <div
+          style={{
+            width: '100%',
+            maxWidth: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.58, 0.72, { min: 240, max: 760 }),
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            gap: 14,
+            fontSize: footerFontSize,
+            letterSpacing: '0.22em',
+            textTransform: 'uppercase',
+            opacity: 0.7,
+          }}
+        >
+          {creditLine ? <span>{creditLine}</span> : null}
+          {footer ? <span style={{ opacity: 0.56 }}>{footer}</span> : null}
+        </div>
+        {children ? <div>{children}</div> : null}
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultOutroBumper)

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

@@ -0,0 +1,11 @@
+export { DefaultOutroBumper } from './default-outro-bumper'
+export { componentMetadata } from './default-outro-bumper'
+export {
+  DefaultOutroBumperLandscape,
+  componentMetadata as DefaultOutroBumperLandscapeMetadata,
+} from './default-outro-bumper-Landscape'
+export {
+  DefaultOutroBumperHorizontal,
+  componentMetadata as DefaultOutroBumperHorizontalMetadata,
+} from './default-outro-bumper-Horizontal'
+

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

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

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

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

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

@@ -0,0 +1,48 @@
+import { DefaultSunsetOutroBumperHorizontal } from './default-sunset-outro-bumper-Horizontal'
+import { DefaultSunsetOutroBumperLandscape } from './default-sunset-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'Sunset Credits',
+  title: 'Until the Next Story',
+  note: 'A horizon split and soft glow coda for warm, easy goodbyes.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#fb7185',
+  secondaryAccent: '#f59e0b',
+}
+
+const meta = {
+  title: 'core/outro/default-sunset-outro-bumper/DefaultSunsetOutroBumperLandscape',
+  component: DefaultSunsetOutroBumperLandscape,
+  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) => <DefaultSunsetOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultSunsetOutroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

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

@@ -0,0 +1,183 @@
+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 DefaultSunsetOutroBumperProps 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: 'DefaultSunsetOutroBumper',
+  description: 'Sunset outro with a horizon split and final glow coda',
+  sourceFile: 'src/core/outro/default-sunset-outro-bumper/default-sunset-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper', 'sunset', 'warm'],
+  propsTypeName: 'DefaultSunsetOutroBumperProps',
+})
+
+export function DefaultSunsetOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  layout,
+  children,
+}: DefaultSunsetOutroBumperProps) {
+  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 background = isHorizontal
+    ? `radial-gradient(circle at 50% 24%, ${accent ?? '#fb7185'} 0%, ${secondaryAccent ?? '#f59e0b'} 38%, #020617 100%)`
+    : 'linear-gradient(180deg, #111827 0%, #0f172a 44%, #020617 100%)'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background,
+        color: textColor ?? '#fff7ed',
+        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, 1.1fr) minmax(260px, 0.9fr)' : '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 ?? 'After the Story'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              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: getOutroBodyMaxWidth(runtime.width, resolvedLayout, 0.56, 0.42, { min: 240, max: 680 }),
+                fontSize: noteFontSize,
+                lineHeight: 1.55,
+                opacity: 0.82,
+                ...getOutroLineClamp(isHorizontal ? 3 : 4),
+              }}
+            >
+              {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, alignContent: 'center' }}>
+          <div
+            style={{
+              border: '1px solid rgba(255,247,237,0.14)',
+              background: 'rgba(15,23,42,0.22)',
+              display: 'grid',
+              gap: 10,
+              overflow: 'hidden',
+              padding: 18,
+            }}
+          >
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: 'minmax(0, 1fr) minmax(140px, 0.42fr)',
+                gap: 12,
+                minWidth: 0,
+              }}
+            >
+              <div style={{ display: 'grid', gap: 8 }}>
+                <div style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>
+                  Thanks
+                </div>
+                <div style={{ fontSize: Math.round(runtime.height * 0.03), fontWeight: 800, letterSpacing: '-0.06em' }}>
+                  See you next time
+                </div>
+                <div style={{ fontSize: Math.round(runtime.height * 0.022), lineHeight: 1.5, opacity: 0.8 }}>
+                  A warm closing card for presentations, reels, and recap videos.
+                </div>
+              </div>
+              <div
+                style={{
+                  border: '1px solid rgba(255,247,237,0.12)',
+                  background: 'linear-gradient(180deg, rgba(251,113,133,0.16), rgba(245,158,11,0.12))',
+                  display: 'grid',
+                  placeItems: 'center',
+                  minHeight: isHorizontal ? 120 : 140,
+                }}
+              >
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.6 }}>
+                    Horizon
+                  </div>
+                  <div style={{ marginTop: 6, fontSize: Math.round(runtime.height * 0.02) }}>Soft landing</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {children ? <div style={{ marginTop: 4 }}>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultSunsetOutroBumper)

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

@@ -0,0 +1,11 @@
+export { DefaultSunsetOutroBumper } from './default-sunset-outro-bumper'
+export { componentMetadata } from './default-sunset-outro-bumper'
+export {
+  DefaultSunsetOutroBumperLandscape,
+  componentMetadata as DefaultSunsetOutroBumperLandscapeMetadata,
+} from './default-sunset-outro-bumper-Landscape'
+export {
+  DefaultSunsetOutroBumperHorizontal,
+  componentMetadata as DefaultSunsetOutroBumperHorizontalMetadata,
+} from './default-sunset-outro-bumper-Horizontal'
+

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { DefaultFestivalOutroBumperHorizontal } from './default-festival-outro-bumper-Horizontal'
+import { DefaultFestivalOutroBumperLandscape } from './default-festival-outro-bumper-Landscape'
+
+const args = {
+  kicker: 'Final Curtain',
+  title: 'One More Round',
+  note: 'A stage-bow outro with stacked signage, encore energy, and a celebratory exit wall.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'End Credits',
+  accent: '#111827',
+  secondaryAccent: '#fde68a',
+}
+
+const meta = {
+  title: 'core/outro/festival-outro-encore/DefaultFestivalOutroBumperLandscape',
+  component: DefaultFestivalOutroBumperLandscape,
+  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) => <DefaultFestivalOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultFestivalOutroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}