@vibecuting/video-project-core 0.1.26 → 0.1.27

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

@@ -0,0 +1,117 @@
+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 DefaultNoirIntroBumperDeluxeProps 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: 'DefaultNoirIntroBumperDeluxe',
+  description: 'Noir deluxe film-style intro bumper',
+  sourceFile: 'src/core/intro/noir-intro-deluxe/default-noir-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'noir', 'deluxe', 'thriller'],
+  propsTypeName: 'DefaultNoirIntroBumperDeluxeProps',
+})
+
+export function DefaultNoirIntroBumperDeluxe({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultNoirIntroBumperDeluxeProps) {
+  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 ?? '#111111'} 44%, #000000 100%)`
+          : `radial-gradient(circle at 50% 20%, ${secondaryAccent ?? 'rgba(255,255,255,0.14)'} 0%, ${accent ?? '#050505'} 42%, #000000 100%)`,
+        color: textColor ?? '#f5f5f5',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+        fontFamily: `Georgia, 'Times New Roman', serif`,
+      }}
+    >
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.08fr) minmax(260px, 0.92fr)',
+          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.4em', textTransform: 'uppercase', opacity: 0.6 }}>
+            {kicker ?? 'Noir Deluxe'}
+          </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.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: portrait ? '76%' : '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) 40%, rgba(0,0,0,0.86) 100%)', position: 'relative', overflow: 'hidden', minHeight: portrait ? 200 : 0 }}>
+            <div style={{ position: 'absolute', inset: 18, border: '1px solid rgba(255,255,255,0.08)' }} />
+            <div style={{ position: 'absolute', inset: '18% 12%', border: '1px solid rgba(255,255,255,0.08)', transform: motion.isAnimation ? `scale(${0.98 + motion.progress * 0.02})` : 'none' }} />
+            <div style={{ position: 'absolute', left: 18, right: 18, top: 18, height: 2, background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.84) 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 }}>Smoke and Shadows</div>
+              <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>A case worth remembering</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultNoirIntroBumperDeluxe)

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

@@ -0,0 +1,10 @@
+export { DefaultNoirIntroBumperDeluxe } from './default-noir-intro-bumper'
+export { componentMetadata } from './default-noir-intro-bumper'
+export {
+  DefaultNoirIntroBumperDeluxeLandscape,
+  componentMetadata as DefaultNoirIntroBumperDeluxeLandscapeMetadata,
+} from './default-noir-intro-bumper-Landscape'
+export {
+  DefaultNoirIntroBumperDeluxeHorizontal,
+  componentMetadata as DefaultNoirIntroBumperDeluxeHorizontalMetadata,
+} from './default-noir-intro-bumper-Horizontal'

package/src/core/intro/sci-fi-intro/default-sci-fi-intro-bumper-Horizontal.tsx

@@ -0,0 +1 @@
+export { DefaultSciFiIntroBumper as DefaultSciFiIntroBumperHorizontal, componentMetadata } from './default-sci-fi-intro-bumper'

package/src/core/intro/sci-fi-intro/default-sci-fi-intro-bumper-Landscape.tsx

@@ -0,0 +1 @@
+export { DefaultSciFiIntroBumper as DefaultSciFiIntroBumperLandscape, componentMetadata } from './default-sci-fi-intro-bumper'

package/src/core/intro/sci-fi-intro/default-sci-fi-intro-bumper.stories.tsx

@@ -0,0 +1,48 @@
+import { DefaultSciFiIntroBumperHorizontal } from './default-sci-fi-intro-bumper-Horizontal'
+import { DefaultSciFiIntroBumperLandscape } from './default-sci-fi-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Quantum Opening',
+  title: 'Starlight Protocol',
+  subtitle: 'A futuristic title bumper built for launch reels, tech narratives, and space-opera openings.',
+  creditLine: 'Prepared by Vibecuting',
+  footer: 'Opening Sequence',
+  accent: '#020617',
+  secondaryAccent: '#22d3ee',
+}
+
+const meta = {
+  title: 'core/intro/sci-fi-intro/DefaultSciFiIntroBumper',
+  component: DefaultSciFiIntroBumperLandscape,
+  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) => <DefaultSciFiIntroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultSciFiIntroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

package/src/core/intro/sci-fi-intro/default-sci-fi-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 } from '../_shared/intro-layout'
+
+export interface DefaultSciFiIntroBumperProps 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: 'DefaultSciFiIntroBumper',
+  description: 'Sci-fi film-style intro bumper',
+  sourceFile: 'src/core/intro/sci-fi-intro/default-sci-fi-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'sci-fi', 'space', 'futuristic'],
+  propsTypeName: 'DefaultSciFiIntroBumperProps',
+})
+
+export function DefaultSciFiIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultSciFiIntroBumperProps) {
+  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 ?? '#0f172a'} 0%, #020617 34%, #000000 100%)`
+          : `radial-gradient(circle at 16% 18%, ${secondaryAccent ?? '#22d3ee'} 0%, ${accent ?? '#020617'} 42%, #000000 100%)`,
+        color: textColor ?? '#ecfeff',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.068),
+      }}
+    >
+      <section
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.08fr) minmax(260px, 0.92fr)',
+          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.66 }}>
+            {kicker ?? 'Signal Lock'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.078) : Math.round(runtime.height * 0.072), lineHeight: 0.9, letterSpacing: '-0.08em', textTransform: 'uppercase', transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none' }}>
+            {title}
+          </h1>
+          {subtitle ? <p style={{ margin: 0, maxWidth: getIntroBodyMaxWidth(runtime.width, portrait, 0.42, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.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: portrait ? '78%' : '100%', minWidth: 0, aspectRatio: '4 / 5', border: '1px solid rgba(236,254,255,0.14)', background: 'linear-gradient(145deg, rgba(34,211,238,0.2) 0%, rgba(15,23,42,0.3) 36%, rgba(2,6,23,0.96) 100%)', position: 'relative', overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.24, { min: 180, max: 320 }) }}>
+            <div style={{ position: 'absolute', inset: 16, border: '1px solid rgba(236,254,255,0.1)' }} />
+            <div style={{ position: 'absolute', inset: '18% 12%', border: '1px solid rgba(34,211,238,0.18)', borderRadius: 9999, transform: motion.isAnimation ? `scale(${0.96 + motion.progress * 0.04})` : 'none' }} />
+            <div style={{ position: 'absolute', left: 18, right: 18, top: 18, height: 2, background: 'linear-gradient(90deg, transparent 0%, rgba(34,211,238,0.95) 50%, transparent 100%)' }} />
+            <div style={{ position: 'absolute', left: 18, right: 18, bottom: 18, display: 'grid', gap: 8, color: '#ecfeff' }}>
+              <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Deep Space Title Card</div>
+              <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>Launch sequence engaged</div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultSciFiIntroBumper)

package/src/core/intro/sci-fi-intro/index.ts

@@ -0,0 +1,10 @@
+export { DefaultSciFiIntroBumper } from './default-sci-fi-intro-bumper'
+export { componentMetadata } from './default-sci-fi-intro-bumper'
+export {
+  DefaultSciFiIntroBumperLandscape,
+  componentMetadata as DefaultSciFiIntroBumperLandscapeMetadata,
+} from './default-sci-fi-intro-bumper-Landscape'
+export {
+  DefaultSciFiIntroBumperHorizontal,
+  componentMetadata as DefaultSciFiIntroBumperHorizontalMetadata,
+} from './default-sci-fi-intro-bumper-Horizontal'

package/src/core/intro/thriller-intro-suspense/default-thriller-intro-bumper-Horizontal.tsx

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

package/src/core/intro/thriller-intro-suspense/default-thriller-intro-bumper-Landscape.tsx

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

package/src/core/intro/thriller-intro-suspense/default-thriller-intro-bumper.stories.tsx

@@ -0,0 +1,31 @@
+import { DefaultThrillerIntroBumperHorizontal } from './default-thriller-intro-bumper-Horizontal'
+import { DefaultThrillerIntroBumperLandscape } from './default-thriller-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Critical Night',
+  title: 'Last Transmission',
+  subtitle: 'A suspense dossier with alert cards, threat rails, and a colder editorial tone.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#020617',
+  secondaryAccent: '#dc2626',
+}
+
+const meta = {
+  title: 'core/intro/thriller-intro-suspense/DefaultThrillerIntroBumperLandscape',
+  component: DefaultThrillerIntroBumperLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultThrillerIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultThrillerIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

package/src/core/intro/thriller-intro-suspense/default-thriller-intro-bumper.tsx

@@ -0,0 +1,155 @@
+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 DefaultThrillerIntroBumperProps 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: 'DefaultThrillerIntroBumper',
+  description: 'Thriller intro with an alert dossier and tension board layout',
+  sourceFile: 'src/core/intro/thriller-intro-suspense/default-thriller-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'thriller', 'suspense'],
+  propsTypeName: 'DefaultThrillerIntroBumperProps',
+})
+
+export function DefaultThrillerIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultThrillerIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  const text = textColor ?? '#f8fafc'
+  const bg = accent ?? '#030712'
+  const glow = secondaryAccent ?? '#dc2626'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, #020617 0%, ${bg} 45%, #111827 100%)`
+          : `radial-gradient(circle at 78% 18%, rgba(220,38,38,0.42) 0%, ${bg} 42%, #020617 100%)`,
+        color: text,
+        display: 'grid',
+        placeItems: 'center',
+        padding: portrait ? Math.round(runtime.height * 0.058) : Math.round(runtime.height * 0.064),
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'linear-gradient(90deg, rgba(255,255,255,0.03) 0%, transparent 14%, transparent 86%, rgba(255,255,255,0.03) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <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: portrait ? 14 : 16, minWidth: 0, textAlign: portrait ? 'center' : 'left', alignContent: 'center' }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.018), letterSpacing: '0.42em', textTransform: 'uppercase', opacity: 0.72 }}>
+            {kicker ?? 'Suspense File'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: portrait ? Math.round(runtime.height * 0.08) : Math.round(runtime.height * 0.072),
+              lineHeight: 0.9,
+              letterSpacing: '-0.09em',
+              textTransform: 'uppercase',
+              textShadow: `0 0 20px ${glow}33`,
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 14}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.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.8 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, minWidth: 0, alignContent: 'center' }}>
+          <div
+            style={{
+              border: '1px solid rgba(248,250,252,0.12)',
+              background: 'linear-gradient(180deg, rgba(255,255,255,0.05), rgba(15,23,42,0.28))',
+              padding: portrait ? 18 : 22,
+              display: 'grid',
+              gap: 10,
+              overflow: 'hidden',
+              minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.24, { min: 220, max: 360 }),
+            }}
+          >
+            <div style={{ height: 2, width: '100%', background: `linear-gradient(90deg, transparent, ${glow}, transparent)` }} />
+            <div style={{ display: 'grid', gap: 10, gridTemplateColumns: portrait ? '1fr' : 'repeat(3, minmax(0, 1fr))' }}>
+              {[
+                ['Signal', 'Unstable'],
+                ['Threat', 'Unknown'],
+                ['Pulse', 'Low light'],
+              ].map(([label, value], index) => (
+                <div key={label} style={{ border: '1px solid rgba(248,250,252,0.1)', padding: '12px 14px', background: index === 1 ? 'rgba(220,38,38,0.12)' : 'rgba(0,0,0,0.16)', display: 'grid', gap: 6 }}>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.56 }}>{label}</span>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.02) }}>{value}</span>
+                </div>
+              ))}
+            </div>
+            <div style={{ border: '1px solid rgba(248,250,252,0.1)', padding: 14, background: 'rgba(0,0,0,0.18)', display: 'grid', gap: 8 }}>
+              <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>Alert Dossier</span>
+              <span style={{ fontSize: Math.round(runtime.height * 0.02), lineHeight: 1.5, opacity: 0.82 }}>A tension board built to feel like a case file instead of a generic title card.</span>
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultThrillerIntroBumper)

package/src/core/intro/thriller-intro-suspense/index.ts

@@ -0,0 +1,10 @@
+export { DefaultThrillerIntroBumper } from './default-thriller-intro-bumper'
+export { componentMetadata } from './default-thriller-intro-bumper'
+export {
+  DefaultThrillerIntroBumperLandscape,
+  componentMetadata as DefaultThrillerIntroBumperLandscapeMetadata,
+} from './default-thriller-intro-bumper-Landscape'
+export {
+  DefaultThrillerIntroBumperHorizontal,
+  componentMetadata as DefaultThrillerIntroBumperHorizontalMetadata,
+} from './default-thriller-intro-bumper-Horizontal'

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

@@ -0,0 +1 @@
+export { DefaultTrailerIntroBumperPremiere as DefaultTrailerIntroBumperPremiereHorizontal, componentMetadata } from './default-trailer-intro-bumper'

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

@@ -0,0 +1 @@
+export { DefaultTrailerIntroBumperPremiere as DefaultTrailerIntroBumperPremiereLandscape, componentMetadata } from './default-trailer-intro-bumper'

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

@@ -0,0 +1,30 @@
+import { DefaultTrailerIntroBumperPremiereHorizontal } from './default-trailer-intro-bumper-Horizontal'
+import { DefaultTrailerIntroBumperPremiereLandscape } from './default-trailer-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Official Trailer',
+  title: 'Run to the Edge',
+  subtitle: 'A punchy intro bumper for trailers, teasers, and fast-paced launches.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#ef4444',
+  secondaryAccent: '#7f1d1d',
+}
+
+const meta = {
+  title: 'core/intro/trailer-intro-premiere/DefaultTrailerIntroBumperPremiere',
+  component: DefaultTrailerIntroBumperPremiereLandscape,
+  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) => <DefaultTrailerIntroBumperPremiereHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultTrailerIntroBumperPremiereHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}