@vibecuting/video-project-core 0.1.26 → 0.1.27

package/src/core/intro/family-intro-reunion/default-family-intro-bumper.tsx

@@ -0,0 +1,165 @@
+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 DefaultFamilyIntroBumperProps 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: 'DefaultFamilyIntroBumper',
+  description: 'Family reunion intro with photo-collage panels and reunion notes',
+  sourceFile: 'src/core/intro/family-intro-reunion/default-family-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'family', 'reunion'],
+  propsTypeName: 'DefaultFamilyIntroBumperProps',
+})
+
+export function DefaultFamilyIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  posterImageSrc,
+  posterImageAlt,
+  children,
+}: DefaultFamilyIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  const text = textColor ?? '#fffaf0'
+  const bg = accent ?? '#78350f'
+  const glow = secondaryAccent ?? '#f59e0b'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, #422006 0%, ${bg} 38%, #1c1917 100%)`
+          : `radial-gradient(circle at 18% 20%, rgba(245,158,11,0.26) 0%, ${bg} 40%, #111111 100%)`,
+        color: text,
+        display: 'grid',
+        placeItems: 'center',
+        padding: portrait ? Math.round(runtime.height * 0.06) : Math.round(runtime.height * 0.065),
+      }}
+    >
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.9fr) minmax(300px, 1.1fr)',
+          gap: portrait ? 18 : 26,
+          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.34em', textTransform: 'uppercase', opacity: 0.68 }}>
+            {kicker ?? 'Family Album'}
+          </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.42, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.55, opacity: 0.84, ...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.82 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, minWidth: 0, alignContent: 'center' }}>
+          <div style={{ border: '1px solid rgba(255,250,240,0.16)', background: 'linear-gradient(180deg, rgba(255,255,255,0.06), rgba(120,53,15,0.16))', padding: portrait ? 18 : 22, display: 'grid', gap: 12, overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.24, { min: 220, max: 360 }) }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.98fr) minmax(220px, 0.82fr)', gap: 10, minWidth: 0 }}>
+              <div style={{ display: 'grid', gap: 10 }}>
+                <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'repeat(2, minmax(0, 1fr))', gap: 10 }}>
+                  {['Grandma', 'Parents', 'Children', 'Guests'].map((label, index) => (
+                    <div
+                      key={label}
+                      style={{
+                        minHeight: portrait ? 60 : 96,
+                        border: '1px solid rgba(255,250,240,0.14)',
+                        background: index % 2 === 0 ? 'rgba(0,0,0,0.16)' : 'linear-gradient(180deg, rgba(245,158,11,0.18), rgba(0,0,0,0.08))',
+                        display: 'grid',
+                        placeItems: 'center',
+                        textAlign: 'center',
+                        padding: 10,
+                      }}
+                    >
+                      <div style={{ fontSize: Math.round(runtime.height * 0.016), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.74 }}>
+                        {label}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div style={{ border: '1px solid rgba(255,250,240,0.12)', background: 'rgba(0,0,0,0.16)', padding: 14, display: 'grid', gap: 8 }}>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.56 }}>Album Notes</span>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.02) }}>A collage opener that feels like a table of printed photos.</span>
+                </div>
+              </div>
+              {posterImageSrc ? (
+                <div style={{ minHeight: portrait ? 160 : 280, border: '1px solid rgba(255,250,240,0.14)', background: 'rgba(0,0,0,0.16)', overflow: 'hidden' }}>
+                  <img src={posterImageSrc} alt={posterImageAlt ?? title} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+                </div>
+              ) : null}
+            </div>
+            <div style={{ height: 1, background: `linear-gradient(90deg, transparent, ${glow}, transparent)` }} />
+            <div style={{ display: 'grid', gap: 8, fontSize: Math.round(runtime.height * 0.02) }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+                <span>Location</span>
+                <span>Homecoming dinner</span>
+              </div>
+              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
+                <span>Album</span>
+                <span>Reunion season</span>
+              </div>
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultFamilyIntroBumper)

package/src/core/intro/family-intro-reunion/index.ts

@@ -0,0 +1,10 @@
+export { DefaultFamilyIntroBumper } from './default-family-intro-bumper'
+export { componentMetadata } from './default-family-intro-bumper'
+export {
+  DefaultFamilyIntroBumperLandscape,
+  componentMetadata as DefaultFamilyIntroBumperLandscapeMetadata,
+} from './default-family-intro-bumper-Landscape'
+export {
+  DefaultFamilyIntroBumperHorizontal,
+  componentMetadata as DefaultFamilyIntroBumperHorizontalMetadata,
+} from './default-family-intro-bumper-Horizontal'

package/src/core/intro/festival-intro-spotlight/default-festival-intro-bumper-Horizontal.tsx

@@ -0,0 +1 @@
+export { DefaultFestivalIntroBumperSpotlight as DefaultFestivalIntroBumperSpotlightHorizontal, componentMetadata } from './default-festival-intro-bumper'

package/src/core/intro/festival-intro-spotlight/default-festival-intro-bumper-Landscape.tsx

@@ -0,0 +1 @@
+export { DefaultFestivalIntroBumperSpotlight as DefaultFestivalIntroBumperSpotlightLandscape, componentMetadata } from './default-festival-intro-bumper'

package/src/core/intro/festival-intro-spotlight/default-festival-intro-bumper.stories.tsx

@@ -0,0 +1,30 @@
+import { DefaultFestivalIntroBumperSpotlightHorizontal } from './default-festival-intro-bumper-Horizontal'
+import { DefaultFestivalIntroBumperSpotlightLandscape } from './default-festival-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Festival Premiere',
+  title: 'Standing Ovation',
+  subtitle: 'A celebratory intro bumper with a brighter, award-season visual language.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#7c3aed',
+  secondaryAccent: '#f59e0b',
+}
+
+const meta = {
+  title: 'core/intro/festival-intro-spotlight/DefaultFestivalIntroBumperSpotlight',
+  component: DefaultFestivalIntroBumperSpotlightLandscape,
+  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) => <DefaultFestivalIntroBumperSpotlightHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultFestivalIntroBumperSpotlightHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/intro/festival-intro-spotlight/default-festival-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 DefaultFestivalIntroBumperSpotlightProps 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: 'DefaultFestivalIntroBumperSpotlight',
+  description: 'Festival premiere-style intro bumper with a poster wall and award-night framing',
+  sourceFile: 'src/core/intro/festival-intro-spotlight/default-festival-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'festival', 'spotlight', 'premiere'],
+  propsTypeName: 'DefaultFestivalIntroBumperSpotlightProps',
+})
+
+export function DefaultFestivalIntroBumperSpotlight({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultFestivalIntroBumperSpotlightProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, ${accent ?? '#7c3aed'} 0%, #1e1b4b 40%, #020617 100%)`
+          : `radial-gradient(circle at 50% 22%, ${secondaryAccent ?? '#f59e0b'} 0%, ${accent ?? '#7c3aed'} 44%, #020617 100%)`,
+        color: textColor ?? '#f5f3ff',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.02fr) minmax(260px, 0.98fr)',
+          gap: portrait ? 18 : 26,
+          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.68 }}>
+            {kicker ?? 'Festival Premiere'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.08) : Math.round(runtime.height * 0.072), lineHeight: 0.9, 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.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.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', justifyItems: portrait ? 'center' : 'end', minWidth: 0 }}>
+          <div style={{ width: '100%', minWidth: 0, aspectRatio: '4 / 5', border: '1px solid rgba(245,243,255,0.12)', background: 'linear-gradient(160deg, rgba(245,158,11,0.22) 0%, rgba(124,58,237,0.18) 38%, rgba(2,6,23,0.96) 100%)', position: 'relative', overflow: 'hidden', padding: getIntroPanelPadding(runtime.height, portrait, 0.008, 0.007, { min: 12, max: 18 }), minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.24, { min: 180, max: 320 }) }}>
+            <div style={{ position: 'absolute', inset: 16, border: '1px solid rgba(245,243,255,0.08)' }} />
+            <div style={{ position: 'absolute', inset: '16% 12%', border: '1px solid rgba(245,158,11,0.14)', borderRadius: 9999, transform: motion.isAnimation ? `scale(${0.97 + motion.progress * 0.03})` : 'none' }} />
+            <div style={{ position: 'absolute', left: 18, right: 18, top: 18, height: 2, background: 'linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.95) 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 }}>Premiere Night</div>
+              <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>Spotlight on the story</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultFestivalIntroBumperSpotlight)

package/src/core/intro/festival-intro-spotlight/index.ts

@@ -0,0 +1,10 @@
+export { DefaultFestivalIntroBumperSpotlight } from './default-festival-intro-bumper'
+export { componentMetadata } from './default-festival-intro-bumper'
+export {
+  DefaultFestivalIntroBumperSpotlightLandscape,
+  componentMetadata as DefaultFestivalIntroBumperSpotlightLandscapeMetadata,
+} from './default-festival-intro-bumper-Landscape'
+export {
+  DefaultFestivalIntroBumperSpotlightHorizontal,
+  componentMetadata as DefaultFestivalIntroBumperSpotlightHorizontalMetadata,
+} from './default-festival-intro-bumper-Horizontal'

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

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  DefaultCinematicIntroBumper,
+  DefaultFestivalIntroBumper,
+  DefaultFestivalIntroBumperSpotlight,
+  DefaultIntroBumper,
+  DefaultNoirIntroBumper,
+  DefaultNoirIntroBumperDeluxe,
+  DefaultNoirIntroBumperCity,
+  DefaultCyberpunkIntroBumperNeon,
+  DefaultCyberpunkIntroBumperHolo,
+  DefaultDocumentaryIntroBumper,
+  DefaultFamilyIntroBumper,
+  DefaultSciFiIntroBumper,
+  DefaultTrailerIntroBumper,
+  DefaultTrailerIntroBumperPremiere,
+  DefaultWesternIntroBumper,
+  DefaultWesternIntroBumperGangster,
+  DefaultThrillerIntroBumper,
+  DefaultTravelIntroBumper,
+} from './index'
+
+describe('core intro exports', () => {
+  it('exports all intro bumper styles', () => {
+    expect(DefaultIntroBumper).toBeTypeOf('function')
+    expect(DefaultCinematicIntroBumper).toBeTypeOf('function')
+    expect(DefaultNoirIntroBumper).toBeTypeOf('function')
+    expect(DefaultTrailerIntroBumper).toBeTypeOf('function')
+    expect(DefaultFestivalIntroBumper).toBeTypeOf('function')
+    expect(DefaultWesternIntroBumper).toBeTypeOf('function')
+    expect(DefaultWesternIntroBumperGangster).toBeTypeOf('function')
+    expect(DefaultSciFiIntroBumper).toBeTypeOf('function')
+    expect(DefaultNoirIntroBumperDeluxe).toBeTypeOf('function')
+    expect(DefaultTrailerIntroBumperPremiere).toBeTypeOf('function')
+    expect(DefaultFestivalIntroBumperSpotlight).toBeTypeOf('function')
+    expect(DefaultNoirIntroBumperCity).toBeTypeOf('function')
+    expect(DefaultCyberpunkIntroBumperNeon).toBeTypeOf('function')
+    expect(DefaultCyberpunkIntroBumperHolo).toBeTypeOf('function')
+    expect(DefaultDocumentaryIntroBumper).toBeTypeOf('function')
+    expect(DefaultFamilyIntroBumper).toBeTypeOf('function')
+    expect(DefaultThrillerIntroBumper).toBeTypeOf('function')
+    expect(DefaultTravelIntroBumper).toBeTypeOf('function')
+  })
+})

package/src/core/intro/index.ts

@@ -1 +1,18 @@
 export { DefaultIntroBumper } from './default-intro-bumper'
+export { DefaultCinematicIntroBumper } from './default-cinematic-intro-bumper'
+export { DefaultNoirIntroBumper } from './default-noir-intro-bumper'
+export { DefaultTrailerIntroBumper } from './default-trailer-intro-bumper'
+export { DefaultFestivalIntroBumper } from './default-festival-intro-bumper'
+export { DefaultWesternIntroBumper } from './western-intro'
+export { DefaultSciFiIntroBumper } from './sci-fi-intro'
+export { DefaultNoirIntroBumperDeluxe } from './noir-intro-deluxe'
+export { DefaultTrailerIntroBumperPremiere } from './trailer-intro-premiere'
+export { DefaultFestivalIntroBumperSpotlight } from './festival-intro-spotlight'
+export { DefaultNoirIntroBumperCity } from './noir-intro-city'
+export { DefaultCyberpunkIntroBumperNeon } from './cyberpunk-intro-neon'
+export { DefaultWesternIntroBumperGangster } from './western-intro-gangster'
+export { DefaultCyberpunkIntroBumperHolo } from './cyberpunk-intro-holo'
+export { DefaultDocumentaryIntroBumper } from './documentary-intro-observation'
+export { DefaultThrillerIntroBumper } from './thriller-intro-suspense'
+export { DefaultFamilyIntroBumper } from './family-intro-reunion'
+export { DefaultTravelIntroBumper } from './travel-intro-journey'

package/src/core/intro/noir-intro-city/default-noir-intro-bumper-Horizontal.tsx

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

package/src/core/intro/noir-intro-city/default-noir-intro-bumper-Landscape.tsx

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

package/src/core/intro/noir-intro-city/default-noir-intro-bumper.stories.tsx

@@ -0,0 +1,31 @@
+import { DefaultNoirIntroBumperCityHorizontal } from './default-noir-intro-bumper-Horizontal'
+import { DefaultNoirIntroBumperCityLandscape } from './default-noir-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Noir City',
+  title: 'Midnight Streets',
+  subtitle: 'A sharper noir opener with more urban tension and detective energy.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#050505',
+  secondaryAccent: '#6b7280',
+}
+
+const meta = {
+  title: 'core/intro/noir-intro-city/DefaultNoirIntroBumperCity',
+  component: DefaultNoirIntroBumperCityLandscape,
+  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) => <DefaultNoirIntroBumperCityHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultNoirIntroBumperCityHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/intro/noir-intro-city/default-noir-intro-bumper.tsx

@@ -0,0 +1,96 @@
+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 DefaultNoirIntroBumperCityProps 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: 'DefaultNoirIntroBumperCity',
+  description: 'Noir city intro bumper with smoky skyline framing and a detective dossier layout',
+  sourceFile: 'src/core/intro/noir-intro-city/default-noir-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'noir', 'city', 'detective'],
+  propsTypeName: 'DefaultNoirIntroBumperCityProps',
+})
+
+export function DefaultNoirIntroBumperCity({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultNoirIntroBumperCityProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, #050505 0%, ${accent ?? '#101010'} 40%, #000000 100%)`
+          : `radial-gradient(circle at 50% 18%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#050505'} 44%, #000 100%)`,
+        color: textColor ?? '#f5f5f5',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+        fontFamily: `Georgia, 'Times New Roman', serif`,
+      }}
+    >
+      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.12) 20%, rgba(0,0,0,0.72) 100%)', pointerEvents: 'none' }} />
+      <section style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.04fr) minmax(260px, 0.96fr)', gap: portrait ? 18 : 24, alignItems: 'center', minWidth: 0, minHeight: 0, overflow: 'hidden' }}>
+        <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.4em', textTransform: 'uppercase', opacity: 0.62 }}>
+            {kicker ?? 'City Lights'}
+          </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.44, 1, { min: 240, max: 700 }), fontSize: Math.round(runtime.height * 0.024), lineHeight: 1.6, opacity: 0.8, ...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.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', justifyItems: portrait ? 'center' : 'end', minWidth: 0 }}>
+          <div style={{ width: '100%', minWidth: 0, aspectRatio: '4 / 5', border: '1px solid rgba(255,255,255,0.12)', background: 'linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0.86) 100%)', position: 'relative', overflow: 'hidden', padding: getIntroPanelPadding(runtime.height, portrait, 0.008, 0.007, { min: 12, max: 18 }), minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.28, 0.22, { min: 160, max: 300 }) }}>
+            <div style={{ position: 'absolute', inset: 18, border: '1px solid rgba(255,255,255,0.08)' }} />
+            <div style={{ position: 'absolute', left: 20, top: 20, width: '24%', height: '2px', background: 'linear-gradient(90deg, rgba(255,255,255,0.75), transparent)' }} />
+            <div style={{ position: 'absolute', right: 20, bottom: 20, width: '28%', height: '2px', background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.7))' }} />
+            <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 }}>Smoke and Rain</div>
+              <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>Another case begins</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultNoirIntroBumperCity)

package/src/core/intro/noir-intro-city/index.ts

@@ -0,0 +1,10 @@
+export { DefaultNoirIntroBumperCity } from './default-noir-intro-bumper'
+export { componentMetadata } from './default-noir-intro-bumper'
+export {
+  DefaultNoirIntroBumperCityLandscape,
+  componentMetadata as DefaultNoirIntroBumperCityLandscapeMetadata,
+} from './default-noir-intro-bumper-Landscape'
+export {
+  DefaultNoirIntroBumperCityHorizontal,
+  componentMetadata as DefaultNoirIntroBumperCityHorizontalMetadata,
+} from './default-noir-intro-bumper-Horizontal'

package/src/core/intro/noir-intro-deluxe/default-noir-intro-bumper-Horizontal.tsx

@@ -0,0 +1 @@
+export { DefaultNoirIntroBumperDeluxe as DefaultNoirIntroBumperDeluxeHorizontal, componentMetadata } from './default-noir-intro-bumper'

package/src/core/intro/noir-intro-deluxe/default-noir-intro-bumper-Landscape.tsx

@@ -0,0 +1 @@
+export { DefaultNoirIntroBumperDeluxe as DefaultNoirIntroBumperDeluxeLandscape, componentMetadata } from './default-noir-intro-bumper'

package/src/core/intro/noir-intro-deluxe/default-noir-intro-bumper.stories.tsx

@@ -0,0 +1,31 @@
+import { DefaultNoirIntroBumperDeluxeHorizontal } from './default-noir-intro-bumper-Horizontal'
+import { DefaultNoirIntroBumperDeluxeLandscape } from './default-noir-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Noir Deluxe',
+  title: 'Midnight Evidence',
+  subtitle: 'A smoky opening card for detective stories, hard-boiled edits, and moody reveals.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#050505',
+  secondaryAccent: '#7c7c7c',
+}
+
+const meta = {
+  title: 'core/intro/noir-intro-deluxe/DefaultNoirIntroBumperDeluxe',
+  component: DefaultNoirIntroBumperDeluxeLandscape,
+  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) => <DefaultNoirIntroBumperDeluxeHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultNoirIntroBumperDeluxeHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}