@vibecuting/video-project-core 0.1.26 → 0.1.27

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

@@ -0,0 +1,256 @@
+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 DefaultIntroBumperProps 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: 'DefaultIntroBumper',
+  description: 'Editorial opening slate with a production rail and centered title block',
+  sourceFile: 'src/core/intro/default-intro-bumper/default-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'editorial'],
+  propsTypeName: 'DefaultIntroBumperProps',
+})
+
+export function DefaultIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+  const titleFontSize = Math.round(runtime.height * (portrait ? 0.074 : 0.068))
+  const subtitleFontSize = Math.round(runtime.height * 0.023)
+  const kickerFontSize = Math.round(runtime.height * 0.017)
+  const footerFontSize = Math.round(runtime.height * 0.015)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: `radial-gradient(circle at top, ${secondaryAccent ?? '#1f2937'} 0%, ${accent ?? '#050816'} 42%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (portrait ? 0.065 : 0.07)),
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, rgba(2,6,23,0.14) 48%, rgba(2,6,23,0.42) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: '12% 7%',
+          border: '1px solid rgba(248,250,252,0.08)',
+          pointerEvents: 'none',
+        }}
+      />
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(170px, 0.56fr) minmax(0, 1.42fr) minmax(220px, 0.72fr)',
+          gap: portrait ? 18 : 22,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <aside
+          style={{
+            display: 'grid',
+            alignContent: 'space-between',
+            gap: 16,
+            minWidth: 0,
+            border: '1px solid rgba(248,250,252,0.1)',
+            background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(2,6,23,0.26))',
+            padding: Math.round(runtime.height * 0.028),
+            textAlign: portrait ? 'center' : 'left',
+          }}
+        >
+          <div style={{ display: 'grid', gap: 12 }}>
+            <p
+              style={{
+                margin: 0,
+                fontSize: kickerFontSize,
+                letterSpacing: '0.34em',
+                textTransform: 'uppercase',
+                opacity: 0.64,
+              }}
+            >
+              Opening File
+            </p>
+            {kicker ? (
+              <p
+                style={{
+                  margin: 0,
+                  fontSize: kickerFontSize,
+                  letterSpacing: '0.3em',
+                  textTransform: 'uppercase',
+                  opacity: 0.82,
+                }}
+              >
+                {kicker}
+              </p>
+            ) : null}
+          </div>
+          <div
+            style={{
+              display: 'grid',
+              gap: 8,
+              fontSize: footerFontSize,
+              letterSpacing: '0.2em',
+              textTransform: 'uppercase',
+              opacity: 0.72,
+            }}
+          >
+            {creditLine ? <span>{creditLine}</span> : null}
+            {footer ? <span style={{ opacity: 0.56 }}>{footer}</span> : null}
+          </div>
+        </aside>
+
+        <main
+          style={{
+            display: 'grid',
+            alignContent: 'center',
+            gap: portrait ? 14 : 18,
+            minWidth: 0,
+            textAlign: portrait ? 'center' : 'left',
+          }}
+        >
+          <p
+            style={{
+              margin: 0,
+              fontSize: kickerFontSize,
+              letterSpacing: '0.42em',
+              textTransform: 'uppercase',
+              opacity: 0.72,
+            }}
+          >
+            Intro Sequence
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              lineHeight: 0.92,
+              letterSpacing: '-0.08em',
+              textTransform: 'uppercase',
+              textShadow: '0 18px 48px rgba(15, 23, 42, 0.55)',
+              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.58, 0.9, { min: 240, max: 760 }),
+                fontSize: subtitleFontSize,
+                lineHeight: 1.6,
+                opacity: 0.84,
+                transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 6}px, 0)` : 'none',
+                ...getIntroLineClamp(portrait ? 4 : 3),
+              }}
+            >
+              {subtitle}
+            </p>
+          ) : null}
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: portrait ? '1fr' : 'repeat(3, minmax(0, 1fr))',
+              gap: 10,
+            }}
+          >
+            {[
+              ['Scene', 'Editorial opener'],
+              ['Tone', 'Clean and formal'],
+              ['Format', 'Title rail'],
+            ].map(([label, value], index) => (
+              <div
+                key={label}
+                style={{
+                  border: '1px solid rgba(248,250,252,0.1)',
+                  background: 'rgba(15,23,42,0.16)',
+                  padding: '12px 14px',
+                  display: 'grid',
+                  gap: 6,
+                  transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * (index + 1) * 4}px, 0)` : 'none',
+                }}
+              >
+                <span style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>
+                  {label}
+                </span>
+                <span style={{ fontSize: Math.round(runtime.height * 0.018), letterSpacing: '-0.02em' }}>{value}</span>
+              </div>
+            ))}
+          </div>
+          {children ? <div style={{ marginTop: Math.round(runtime.height * 0.012) }}>{children}</div> : null}
+        </main>
+
+        <aside
+          style={{
+            display: 'grid',
+            alignContent: 'center',
+            gap: 12,
+            minWidth: 0,
+            border: '1px solid rgba(248,250,252,0.1)',
+            background: 'linear-gradient(180deg, rgba(2,6,23,0.16), rgba(255,255,255,0.03))',
+            padding: Math.round(runtime.height * 0.028),
+          }}
+        >
+          <div style={{ fontSize: kickerFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.58 }}>
+            Production Notes
+          </div>
+          <div style={{ display: 'grid', gap: 10, fontSize: footerFontSize, lineHeight: 1.55, opacity: 0.82 }}>
+            <div>Use this when the opening should feel like a chapter card.</div>
+            <div>Designed to keep metadata visible without flattening the layout.</div>
+          </div>
+        </aside>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultIntroBumper)

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

@@ -0,0 +1,11 @@
+export { DefaultIntroBumper } from './default-intro-bumper'
+export { componentMetadata } from './default-intro-bumper'
+export {
+  DefaultIntroBumperLandscape,
+  componentMetadata as DefaultIntroBumperLandscapeMetadata,
+} from './default-intro-bumper-Landscape'
+export {
+  DefaultIntroBumperHorizontal,
+  componentMetadata as DefaultIntroBumperHorizontalMetadata,
+} from './default-intro-bumper-Horizontal'
+

package/src/core/intro/default-noir-intro-bumper/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 { DefaultNoirIntroBumper, componentMetadata as baseComponentMetadata } from './default-noir-intro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.intro.noir',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultNoirIntroBumperHorizontal',
+  description: 'Noir intro bumper (Portrait 9:16 variant)',
+  sourceFile: 'src/core/intro/default-noir-intro-bumper/default-noir-intro-bumper-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultNoirIntroBumperHorizontal = VideoComponent(componentMetadata)(function DefaultNoirIntroBumperHorizontal(
+  props: ComponentProps<typeof DefaultNoirIntroBumper>,
+) {
+  return <DefaultNoirIntroBumper {...props} />
+})

package/src/core/intro/default-noir-intro-bumper/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 { DefaultNoirIntroBumper, componentMetadata as baseComponentMetadata } from './default-noir-intro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.intro.noir',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultNoirIntroBumperLandscape',
+  description: 'Noir intro bumper (Landscape 16:9 variant)',
+  sourceFile: 'src/core/intro/default-noir-intro-bumper/default-noir-intro-bumper-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultNoirIntroBumperLandscape = VideoComponent(componentMetadata)(function DefaultNoirIntroBumperLandscape(
+  props: ComponentProps<typeof DefaultNoirIntroBumper>,
+) {
+  return <DefaultNoirIntroBumper {...props} />
+})

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

@@ -0,0 +1,29 @@
+import { DefaultNoirIntroBumperHorizontal } from './default-noir-intro-bumper-Horizontal'
+import { DefaultNoirIntroBumperLandscape } from './default-noir-intro-bumper-Landscape'
+
+const meta = {
+  title: 'core/intro/default-noir-intro-bumper/DefaultNoirIntroBumperLandscape',
+  component: DefaultNoirIntroBumperLandscape,
+  args: {
+    kicker: 'Classic Noir',
+    title: 'Midnight Signal',
+    subtitle: 'A shadow-heavy title card with serif typography and strong contrast.',
+    creditLine: 'A Vibecuting Picture',
+    footer: 'Opening Sequence',
+    accent: '#050505',
+    secondaryAccent: '#1f2937',
+  },
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof meta.args) => <DefaultNoirIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof meta.args) => <DefaultNoirIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

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

@@ -0,0 +1,122 @@
+import type { ReactNode } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime } from '../../../base'
+import { useSceneMotion } from '../../../base'
+
+export interface DefaultNoirIntroBumperProps 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: 'DefaultNoirIntroBumper',
+  description: 'Noir-style intro bumper',
+  sourceFile: 'src/core/intro/default-noir-intro-bumper/default-noir-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'noir', 'classic'],
+  propsTypeName: 'DefaultNoirIntroBumperProps',
+})
+
+export function DefaultNoirIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultNoirIntroBumperProps) {
+  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%, #111111 44%, #000000 100%)'
+          : `radial-gradient(circle at 50% 22%, ${secondaryAccent ?? 'rgba(255,255,255,0.12)'} 0%, ${accent ?? '#050505'} 42%, #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.04) 0%, rgba(0,0,0,0.1) 18%, rgba(0,0,0,0.72) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          alignContent: 'center',
+          justifyItems: 'center',
+          gap: portrait ? 12 : 14,
+          textAlign: 'center',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.4em', textTransform: 'uppercase', opacity: 0.6 }}>
+          {kicker ?? 'Noir Opening'}
+        </p>
+        <h1
+          style={{
+            margin: 0,
+            fontSize: portrait ? Math.round(runtime.height * 0.078) : Math.round(runtime.height * 0.07),
+            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: Math.round(runtime.width * 0.54),
+              fontSize: Math.round(runtime.height * 0.024),
+              lineHeight: 1.6,
+              opacity: 0.8,
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 6}px, 0)` : 'none',
+            }}
+          >
+            {subtitle}
+          </p>
+        ) : null}
+        {creditLine ? <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</p> : null}
+        {footer ? <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</p> : null}
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultNoirIntroBumper)

package/src/core/intro/default-noir-intro-bumper/index.ts

@@ -0,0 +1,11 @@
+export { DefaultNoirIntroBumper } from './default-noir-intro-bumper'
+export { componentMetadata } from './default-noir-intro-bumper'
+export {
+  DefaultNoirIntroBumperLandscape,
+  componentMetadata as DefaultNoirIntroBumperLandscapeMetadata,
+} from './default-noir-intro-bumper-Landscape'
+export {
+  DefaultNoirIntroBumperHorizontal,
+  componentMetadata as DefaultNoirIntroBumperHorizontalMetadata,
+} from './default-noir-intro-bumper-Horizontal'
+

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { DefaultTrailerIntroBumperHorizontal } from './default-trailer-intro-bumper-Horizontal'
+import { DefaultTrailerIntroBumperLandscape } from './default-trailer-intro-bumper-Landscape'
+
+const meta = {
+  title: 'core/intro/default-trailer-intro-bumper/DefaultTrailerIntroBumperLandscape',
+  component: DefaultTrailerIntroBumperLandscape,
+  args: {
+    kicker: 'Summer Trailer',
+    title: 'Into the Fire',
+    subtitle: 'A trailer-style opener with storyboard strips and a stacked preview wall.',
+    creditLine: 'In Theaters 2026',
+    footer: 'Opening Sequence',
+    accent: '#1e293b',
+    secondaryAccent: '#7c2d12',
+  },
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof meta.args) => <DefaultTrailerIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof meta.args) => <DefaultTrailerIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}