@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/intro/trailer-intro-premiere/default-trailer-intro-bumper.tsx

@@ -0,0 +1,104 @@
+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 } from '../_shared/intro-layout'
+
+export interface DefaultTrailerIntroBumperPremiereProps 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: 'DefaultTrailerIntroBumperPremiere',
+  description: 'Trailer-style intro bumper',
+  sourceFile: 'src/core/intro/trailer-intro-premiere/default-trailer-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'trailer', 'premiere', 'action'],
+  propsTypeName: 'DefaultTrailerIntroBumperPremiereProps',
+})
+
+export function DefaultTrailerIntroBumperPremiere({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultTrailerIntroBumperPremiereProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? 'linear-gradient(180deg, #111827 0%, #020617 48%, #000000 100%)'
+          : `radial-gradient(circle at 18% 24%, ${accent ?? '#ef4444'} 0%, ${secondaryAccent ?? '#7f1d1d'} 36%, #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' : '0.96fr 1.04fr',
+          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 ?? 'Trailer Premiere'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.08) : Math.round(runtime.height * 0.072), lineHeight: 0.88, letterSpacing: '-0.09em', textTransform: 'uppercase', transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 10}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.024), lineHeight: 1.56, 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.7 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.5 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', alignContent: 'center', justifyItems: portrait ? 'center' : 'end', minWidth: 0 }}>
+          <div style={{ width: portrait ? '76%' : '100%', minWidth: 0, aspectRatio: '4 / 5', border: '1px solid rgba(248,250,252,0.12)', background: 'linear-gradient(180deg, rgba(239,68,68,0.22) 0%, rgba(15,23,42,0.2) 38%, rgba(2,6,23,0.96) 100%)', position: 'relative', overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.36, 0.22, { min: 160, max: 260 }) }}>
+            <div style={{ position: 'absolute', inset: 16, border: '1px solid rgba(248,250,252,0.08)' }} />
+            <div style={{ position: 'absolute', left: 18, right: 18, top: 18, height: 2, background: 'linear-gradient(90deg, transparent 0%, rgba(248,250,252,0.88) 50%, transparent 100%)' }} />
+            <div style={{ position: 'absolute', left: 18, right: 18, bottom: 18, display: 'grid', gap: 8 }}>
+              <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Big Screen Energy</div>
+              <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>The next cut starts now</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultTrailerIntroBumperPremiere)

package/src/core/intro/trailer-intro-premiere/index.ts

@@ -0,0 +1,10 @@
+export { DefaultTrailerIntroBumperPremiere } from './default-trailer-intro-bumper'
+export { componentMetadata } from './default-trailer-intro-bumper'
+export {
+  DefaultTrailerIntroBumperPremiereLandscape,
+  componentMetadata as DefaultTrailerIntroBumperPremiereLandscapeMetadata,
+} from './default-trailer-intro-bumper-Landscape'
+export {
+  DefaultTrailerIntroBumperPremiereHorizontal,
+  componentMetadata as DefaultTrailerIntroBumperPremiereHorizontalMetadata,
+} from './default-trailer-intro-bumper-Horizontal'

package/src/core/intro/travel-intro-journey/default-travel-intro-bumper-Horizontal.tsx

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

package/src/core/intro/travel-intro-journey/default-travel-intro-bumper-Landscape.tsx

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

package/src/core/intro/travel-intro-journey/default-travel-intro-bumper.stories.tsx

@@ -0,0 +1,43 @@
+import { DefaultTravelIntroBumperHorizontal } from './default-travel-intro-bumper-Horizontal'
+import { DefaultTravelIntroBumperLandscape } from './default-travel-intro-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"/>
+    <path d="M0 690 C240 620, 360 760, 600 690 S960 620, 1200 700 L1200 900 L0 900 Z" fill="#38bdf8" fill-opacity="0.24"/>
+    <rect x="120" y="180" width="420" height="340" rx="24" fill="#111827" fill-opacity="0.64"/>
+    <text x="160" y="250" fill="#e0f2fe" font-size="80" font-family="Arial, sans-serif" letter-spacing="10">JOURNEY</text>
+    <text x="160" y="335" fill="#e0f2fe" font-size="38" font-family="Arial, sans-serif" opacity="0.82">road map / city stop / coastline</text>
+  </svg>
+`)}`;
+
+const args = {
+  kicker: 'Travel Journal',
+  title: 'Miles to Go',
+  subtitle: 'A route-map opener with journey markers, stop cards, and road-trip momentum.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#0f172a',
+  secondaryAccent: '#38bdf8',
+  posterImageSrc,
+  posterImageAlt: 'Travel journey image',
+}
+
+const meta = {
+  title: 'core/intro/travel-intro-journey/DefaultTravelIntroBumperLandscape',
+  component: DefaultTravelIntroBumperLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultTravelIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultTravelIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

package/src/core/intro/travel-intro-journey/default-travel-intro-bumper.tsx

@@ -0,0 +1,158 @@
+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 } from '../_shared/intro-layout'
+
+export interface DefaultTravelIntroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  subtitle?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  posterImageSrc?: string
+  posterImageAlt?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultTravelIntroBumper',
+  description: 'Travel intro with a route-map layout, stops, and journey markers',
+  sourceFile: 'src/core/intro/travel-intro-journey/default-travel-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'travel', 'journey'],
+  propsTypeName: 'DefaultTravelIntroBumperProps',
+})
+
+export function DefaultTravelIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  posterImageSrc,
+  posterImageAlt,
+  children,
+}: DefaultTravelIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  const text = textColor ?? '#f8fafc'
+  const bg = accent ?? '#0f172a'
+  const path = secondaryAccent ?? '#38bdf8'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, #020617 0%, ${bg} 34%, #1e293b 100%)`
+          : `radial-gradient(circle at 82% 18%, rgba(56,189,248,0.24) 0%, ${bg} 42%, #020617 100%)`,
+        color: text,
+        display: 'grid',
+        placeItems: 'center',
+        padding: portrait ? Math.round(runtime.height * 0.06) : Math.round(runtime.height * 0.066),
+      }}
+    >
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.86fr) minmax(300px, 1.14fr)',
+          gap: portrait ? 18 : 24,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ display: 'grid', gap: portrait ? 14 : 16, minWidth: 0, textAlign: portrait ? 'center' : 'left', alignContent: 'center' }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.38em', textTransform: 'uppercase', opacity: 0.7 }}>
+            {kicker ?? 'Road Trip'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: portrait ? Math.round(runtime.height * 0.08) : 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>
+          {subtitle ? (
+            <p style={{ margin: 0, maxWidth: getIntroBodyMaxWidth(runtime.width, portrait, 0.43, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.58, 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.22em', textTransform: 'uppercase', opacity: 0.8 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.54 }}>{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.14)', background: 'linear-gradient(180deg, rgba(255,255,255,0.05), rgba(15,23,42,0.24))', padding: portrait ? 18 : 22, display: 'grid', gap: 12, overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.28, 0.22, { min: 180, max: 300 }) }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.02fr) minmax(220px, 0.78fr)', gap: 10 }}>
+              <div style={{ display: 'grid', gap: 10 }}>
+                <div style={{ minHeight: portrait ? 140 : 220, border: '1px solid rgba(248,250,252,0.14)', background: 'linear-gradient(135deg, rgba(56,189,248,0.22), rgba(15,23,42,0.12))', padding: 12, display: 'grid', alignContent: 'end', overflow: 'hidden' }}>
+                  <div style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.72 }}>
+                    Route Map
+                  </div>
+                  <div style={{ marginTop: 6, fontSize: Math.round(runtime.height * 0.02) }}>From coast to coast</div>
+                  <div style={{ marginTop: 12, height: 2, width: '100%', background: `linear-gradient(90deg, transparent, ${path}, transparent)` }} />
+                </div>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }}>
+                  {['City Stop', 'Open Road', 'Hidden Trail'].map((label, index) => (
+                    <div key={label} style={{ minHeight: portrait ? 60 : 72, border: '1px solid rgba(248,250,252,0.12)', background: index === 1 ? 'rgba(56,189,248,0.14)' : 'rgba(2,6,23,0.22)', display: 'grid', placeItems: 'center', fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.72 }}>
+                      {label}
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {posterImageSrc ? (
+                <div style={{ minHeight: portrait ? 140 : 260, border: '1px solid rgba(248,250,252,0.14)', background: 'rgba(2,6,23,0.2)', overflow: 'hidden' }}>
+                  <img
+                    src={posterImageSrc}
+                    alt={posterImageAlt ?? title}
+                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                  />
+                </div>
+              ) : null}
+            </div>
+            <div style={{ display: 'grid', gap: 8, fontSize: Math.round(runtime.height * 0.02) }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+                <span>Season</span>
+                <span>Summer trail</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+                <span>Mode</span>
+                <span>Wide open</span>
+              </div>
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultTravelIntroBumper)

package/src/core/intro/travel-intro-journey/index.ts

@@ -0,0 +1,10 @@
+export { DefaultTravelIntroBumper } from './default-travel-intro-bumper'
+export { componentMetadata } from './default-travel-intro-bumper'
+export {
+  DefaultTravelIntroBumperLandscape,
+  componentMetadata as DefaultTravelIntroBumperLandscapeMetadata,
+} from './default-travel-intro-bumper-Landscape'
+export {
+  DefaultTravelIntroBumperHorizontal,
+  componentMetadata as DefaultTravelIntroBumperHorizontalMetadata,
+} from './default-travel-intro-bumper-Horizontal'

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { DefaultWesternIntroBumperHorizontal } from './default-western-intro-bumper-Horizontal'
+import { DefaultWesternIntroBumperLandscape } from './default-western-intro-bumper-Landscape'
+
+const meta = {
+  title: 'core/intro/western-intro/DefaultWesternIntroBumperLandscape',
+  component: DefaultWesternIntroBumperLandscape,
+  args: {
+    kicker: 'Western Opening',
+    title: 'The Long Ride',
+    subtitle: 'A split wanted-board opener with a saloon placard and frontier dossier energy.',
+    creditLine: 'A Vibecuting Western',
+    footer: 'Opening Sequence',
+    accent: '#d97706',
+    secondaryAccent: '#451a03',
+  },
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof meta.args) => <DefaultWesternIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof meta.args) => <DefaultWesternIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

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

@@ -0,0 +1,146 @@
+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 } from '../_shared/intro-layout'
+
+export interface DefaultWesternIntroBumperProps 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: 'DefaultWesternIntroBumper',
+  description: 'Western intro with a split wanted-board and saloon placard layout',
+  sourceFile: 'src/core/intro/western-intro/default-western-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'western', 'dust', 'old-west'],
+  propsTypeName: 'DefaultWesternIntroBumperProps',
+})
+
+export function DefaultWesternIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultWesternIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+  const titleSize = portrait ? Math.round(runtime.height * 0.074) : Math.round(runtime.height * 0.068)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? 'linear-gradient(180deg, #3f2a1d 0%, #1f130d 42%, #020617 100%)'
+          : `radial-gradient(circle at 50% 25%, ${accent ?? '#d97706'} 0%, ${secondaryAccent ?? '#451a03'} 40%, #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.86fr) minmax(300px, 1.14fr)',
+          gap: portrait ? 18 : 26,
+          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: Math.round(runtime.height * 0.017), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.66 }}>
+            {kicker ?? 'Western Opening'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: titleSize, lineHeight: 0.9, letterSpacing: '-0.08em', textTransform: 'uppercase', transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 9}px, 0)` : 'none' }}>
+            {title}
+          </h1>
+          {subtitle ? <p style={{ margin: 0, maxWidth: getIntroBodyMaxWidth(runtime.width, portrait, 0.38, 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: 'grid', gridTemplateColumns: portrait ? '1fr' : 'repeat(2, minmax(0, 1fr))', gap: 10, marginTop: 6 }}>
+            <div style={{ border: '1px solid rgba(255,247,237,0.12)', padding: '12px 14px', background: 'rgba(0,0,0,0.14)', textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: Math.round(runtime.height * 0.014), opacity: 0.74 }}>
+              {creditLine ?? 'Marshal Office'}
+            </div>
+            <div style={{ border: '1px solid rgba(255,247,237,0.12)', padding: '12px 14px', background: 'rgba(0,0,0,0.14)', textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: Math.round(runtime.height * 0.014), opacity: 0.54 }}>
+              {footer ?? 'Opening Sequence'}
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            border: '1px solid rgba(255,247,237,0.14)',
+            background: 'linear-gradient(180deg, rgba(255,247,237,0.05), rgba(15,23,42,0.22))',
+            display: 'grid',
+            gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1fr) minmax(170px, 0.56fr)',
+            gap: 12,
+            padding: 16,
+            minWidth: 0,
+            minHeight: 0,
+            overflow: 'hidden',
+          }}
+        >
+          <div style={{ display: 'grid', alignContent: 'center', gap: 10, position: 'relative', overflow: 'hidden' }}>
+            <div style={{ position: 'absolute', inset: 0, opacity: 0.45, background: 'repeating-linear-gradient(180deg, rgba(255,247,237,0.05) 0, rgba(255,247,237,0.05) 1px, transparent 1px, transparent 18px)' }} />
+            <div style={{ position: 'relative', zIndex: 1, display: 'grid', gap: 10 }}>
+              <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>Dust Trail</div>
+              <div style={{ fontSize: Math.round(runtime.height * 0.03), fontWeight: 800, letterSpacing: '-0.06em' }}>Ride into frame</div>
+              <div style={{ display: 'grid', gap: 8, gridTemplateColumns: portrait ? '1fr' : '1fr' }}>
+                {['Wanted', 'Outlaw', 'High Noon'].map((label, index) => (
+                  <div
+                    key={label}
+                    style={{
+                      border: '1px solid rgba(255,247,237,0.1)',
+                      padding: '10px 12px',
+                      background: index === 1 ? 'rgba(217,119,6,0.14)' : 'rgba(0,0,0,0.16)',
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.2em',
+                      fontSize: Math.round(runtime.height * 0.014),
+                      opacity: 0.82,
+                      transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * (index + 1) * 3}px, 0)` : 'none',
+                    }}
+                  >
+                    {label}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div style={{ display: 'grid', gap: 10, alignContent: 'center', minWidth: 0 }}>
+            <div style={{ border: '1px solid rgba(255,247,237,0.12)', background: 'rgba(0,0,0,0.18)', padding: 14, textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: Math.round(runtime.height * 0.014), opacity: 0.72 }}>
+              Saloon Placard
+            </div>
+            <div style={{ border: '1px solid rgba(255,247,237,0.12)', background: 'rgba(0,0,0,0.18)', padding: 14, display: 'grid', gap: 8 }}>
+              <span style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.56 }}>Trail Marker</span>
+              <span style={{ fontSize: Math.round(runtime.height * 0.022), fontWeight: 700 }}>Ride into the sunset</span>
+            </div>
+          </div>
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultWesternIntroBumper)

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

@@ -0,0 +1,4 @@
+export { DefaultWesternIntroBumper } from './default-western-intro-bumper'
+export { componentMetadata } from './default-western-intro-bumper'
+export { DefaultWesternIntroBumperLandscape, componentMetadata as DefaultWesternIntroBumperLandscapeMetadata } from './default-western-intro-bumper-Landscape'
+export { DefaultWesternIntroBumperHorizontal, componentMetadata as DefaultWesternIntroBumperHorizontalMetadata } from './default-western-intro-bumper-Horizontal'

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

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

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

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