@vibecuting/video-project-core 0.1.26 → 0.1.27

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

@@ -0,0 +1,181 @@
+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 DefaultTrailerIntroBumperProps 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: 'DefaultTrailerIntroBumper',
+  description: 'Trailer intro with storyboard strips, stacked previews, and portrait-safe spacing',
+  sourceFile: 'src/core/intro/default-trailer-intro-bumper/default-trailer-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'trailer', 'storyboard'],
+  propsTypeName: 'DefaultTrailerIntroBumperProps',
+})
+
+export function DefaultTrailerIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultTrailerIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+  const titleFontSize = Math.round(runtime.height * (portrait ? 0.078 : 0.072))
+  const labelFontSize = Math.round(runtime.height * 0.016)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+        style={{
+          background: portrait
+            ? 'linear-gradient(180deg, #111827 0%, #020617 42%, #000000 100%)'
+            : `linear-gradient(135deg, ${accent ?? '#1e293b'} 0%, ${secondaryAccent ?? '#7c2d12'} 38%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+        overflow: 'hidden',
+      }}
+    >
+      <section
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.9fr) minmax(0, 1.1fr)',
+          gap: portrait ? 16 : 24,
+          alignItems: 'center',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ display: 'grid', gap: 14, textAlign: portrait ? 'center' : 'left', minWidth: 0 }}>
+          <p
+            style={{
+              margin: 0,
+              fontSize: labelFontSize,
+              letterSpacing: '0.28em',
+              textTransform: 'uppercase',
+              opacity: 0.66,
+            }}
+          >
+            {kicker ?? 'Trailer Preview'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              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.4, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.024), lineHeight: 1.55, 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: labelFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>
+                {creditLine}
+              </span>
+            ) : null}
+            {footer ? (
+              <span style={{ fontSize: labelFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>
+                {footer}
+              </span>
+            ) : null}
+          </div>
+        </div>
+
+        <div
+          style={{
+            alignSelf: 'stretch',
+            border: '1px solid rgba(248,250,252,0.12)',
+            background: 'linear-gradient(180deg, rgba(248,250,252,0.08), rgba(15,23,42,0.18))',
+            display: 'grid',
+            gridTemplateRows: 'repeat(3, minmax(0, 1fr))',
+            gap: 12,
+            padding: getIntroPanelPadding(runtime.height, portrait, 0.008, 0.007, { min: 12, max: 18 }),
+            minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.28, 0.24, { min: 220, max: 360 }),
+            overflow: 'hidden',
+          }}
+        >
+          {['Story Beat', 'Action Beat', 'Release Beat'].map((label, index) => (
+            <div
+              key={label}
+              style={{
+                border: '1px solid rgba(248,250,252,0.1)',
+                background: `linear-gradient(180deg, rgba(255,255,255,0.05), rgba(2,6,23,0.2))`,
+                display: 'grid',
+                gridTemplateColumns: portrait ? '1fr' : '1fr 0.9fr',
+                gap: 12,
+                minHeight: 0,
+                overflow: 'hidden',
+                transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * (index + 1) * 4}px, 0)` : 'none',
+              }}
+            >
+              <div style={{ display: 'grid', alignContent: 'center', gap: 8, padding: 14, minWidth: 0 }}>
+                <span style={{ fontSize: labelFontSize, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>
+                  {label}
+                </span>
+                <strong style={{ fontSize: Math.round(runtime.height * 0.024), letterSpacing: '-0.04em' }}>
+                  {index === 0 ? 'Cold open' : index === 1 ? 'Big reveal' : 'Title card'}
+                </strong>
+              </div>
+              <div
+                style={{
+                  borderLeft: '1px solid rgba(248,250,252,0.08)',
+                  borderTop: portrait ? '1px solid rgba(248,250,252,0.08)' : 'none',
+                  background:
+                    index === 0
+                      ? 'linear-gradient(135deg, rgba(255,255,255,0.05), rgba(2,6,23,0.22))'
+                      : index === 1
+                        ? 'linear-gradient(135deg, rgba(245,158,11,0.12), rgba(2,6,23,0.22))'
+                        : 'linear-gradient(135deg, rgba(124,58,237,0.12), rgba(2,6,23,0.22))',
+                  display: 'grid',
+                  placeItems: 'center',
+                  minHeight: 0,
+                }}
+              >
+                <span style={{ fontSize: labelFontSize, letterSpacing: '0.26em', textTransform: 'uppercase', opacity: 0.68 }}>
+                  {index + 1}/3
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultTrailerIntroBumper)

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

@@ -0,0 +1,11 @@
+export { DefaultTrailerIntroBumper } from './default-trailer-intro-bumper'
+export { componentMetadata } from './default-trailer-intro-bumper'
+export {
+  DefaultTrailerIntroBumperLandscape,
+  componentMetadata as DefaultTrailerIntroBumperLandscapeMetadata,
+} from './default-trailer-intro-bumper-Landscape'
+export {
+  DefaultTrailerIntroBumperHorizontal,
+  componentMetadata as DefaultTrailerIntroBumperHorizontalMetadata,
+} from './default-trailer-intro-bumper-Horizontal'
+

package/src/core/intro/documentary-intro-observation/default-documentary-intro-bumper-Horizontal.tsx

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

package/src/core/intro/documentary-intro-observation/default-documentary-intro-bumper-Landscape.tsx

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

package/src/core/intro/documentary-intro-observation/default-documentary-intro-bumper.stories.tsx

@@ -0,0 +1,31 @@
+import { DefaultDocumentaryIntroBumperHorizontal } from './default-documentary-intro-bumper-Horizontal'
+import { DefaultDocumentaryIntroBumperLandscape } from './default-documentary-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Field Report',
+  title: 'The Long Road Home',
+  subtitle: 'An editorial sidebar opener built like a field report and observation board.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#0b1220',
+  secondaryAccent: '#38bdf8',
+}
+
+const meta = {
+  title: 'core/intro/documentary-intro-observation/DefaultDocumentaryIntroBumperLandscape',
+  component: DefaultDocumentaryIntroBumperLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultDocumentaryIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultDocumentaryIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

package/src/core/intro/documentary-intro-observation/default-documentary-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 } from '../_shared/intro-layout'
+
+export interface DefaultDocumentaryIntroBumperProps 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: 'DefaultDocumentaryIntroBumper',
+  description: 'Documentary intro with an editorial sidebar and field report cards',
+  sourceFile: 'src/core/intro/documentary-intro-observation/default-documentary-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'documentary', 'editorial'],
+  propsTypeName: 'DefaultDocumentaryIntroBumperProps',
+})
+
+export function DefaultDocumentaryIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultDocumentaryIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  const text = textColor ?? '#e5eef7'
+  const bg = accent ?? '#0b1220'
+  const line = secondaryAccent ?? '#38bdf8'
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, #050816 0%, ${bg} 34%, #111827 100%)`
+          : `linear-gradient(135deg, #020617 0%, ${bg} 46%, #0f172a 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(220px, 0.44fr) minmax(0, 1.56fr)',
+          gap: portrait ? 20 : 24,
+          alignItems: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div style={{ display: 'grid', gap: portrait ? 14 : 18, minWidth: 0, textAlign: portrait ? 'center' : 'left', alignContent: 'center', border: '1px solid rgba(229, 238, 247, 0.1)', padding: 16, background: 'rgba(255,255,255,0.03)' }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.62 }}>
+            {kicker ?? 'Documentary Feature'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: portrait ? Math.round(runtime.height * 0.075) : Math.round(runtime.height * 0.07),
+              lineHeight: 0.94,
+              letterSpacing: '-0.08em',
+              textTransform: 'uppercase',
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 12}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: 'grid', gap: 8 }}>
+            <div style={{ height: 1, width: portrait ? '100%' : Math.round(runtime.width * 0.24), background: `linear-gradient(90deg, ${line}, transparent)` }} />
+            <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>
+
+        <div style={{ display: 'grid', gap: 14, minWidth: 0, alignContent: 'center' }}>
+          <div
+            style={{
+              border: '1px solid rgba(229, 238, 247, 0.14)',
+              background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(2,6,23,0.36))',
+              padding: portrait ? 18 : 22,
+              display: 'grid',
+              gap: 12,
+              minWidth: 0,
+            }}
+          >
+            <div style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>
+              Editorial Notes
+            </div>
+            <div style={{ display: 'grid', gap: 10, gridTemplateColumns: portrait ? '1fr' : 'repeat(3, minmax(0, 1fr))' }}>
+              {[
+                ['Location', 'On the road'],
+                ['Focus', 'Observation'],
+                ['Timeline', 'Present day'],
+              ].map(([label, value]) => (
+                <div key={label} style={{ border: '1px solid rgba(229, 238, 247, 0.1)', padding: '12px 14px', display: 'grid', gap: 6, background: 'rgba(0,0,0,0.14)' }}>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>{label}</span>
+                  <span style={{ fontSize: Math.round(runtime.height * 0.02) }}>{value}</span>
+                </div>
+              ))}
+            </div>
+            <div style={{ height: 1, width: '100%', background: `linear-gradient(90deg, ${line}, transparent)` }} />
+            <div style={{ display: 'grid', gap: 8 }}>
+              <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>Field Report</span>
+              <span style={{ fontSize: Math.round(runtime.height * 0.02), lineHeight: 1.5, opacity: 0.82 }}>A left-rail documentary layout with a denser observation board on the right.</span>
+            </div>
+          </div>
+          {children ? <div>{children}</div> : null}
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultDocumentaryIntroBumper)

package/src/core/intro/documentary-intro-observation/index.ts

@@ -0,0 +1,10 @@
+export { DefaultDocumentaryIntroBumper } from './default-documentary-intro-bumper'
+export { componentMetadata } from './default-documentary-intro-bumper'
+export {
+  DefaultDocumentaryIntroBumperLandscape,
+  componentMetadata as DefaultDocumentaryIntroBumperLandscapeMetadata,
+} from './default-documentary-intro-bumper-Landscape'
+export {
+  DefaultDocumentaryIntroBumperHorizontal,
+  componentMetadata as DefaultDocumentaryIntroBumperHorizontalMetadata,
+} from './default-documentary-intro-bumper-Horizontal'

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { DefaultFamilyIntroBumperHorizontal } from './default-family-intro-bumper-Horizontal'
+import { DefaultFamilyIntroBumperLandscape } from './default-family-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="#3f2a14"/>
+    <rect x="60" y="60" width="1080" height="780" fill="#7c2d12" opacity="0.35"/>
+    <circle cx="920" cy="240" r="180" fill="#f59e0b" fill-opacity="0.34"/>
+    <text x="80" y="180" fill="#fff7ed" font-size="78" font-family="Arial, sans-serif" letter-spacing="12">FAMILY</text>
+    <text x="80" y="280" fill="#fff7ed" font-size="44" font-family="Arial, sans-serif" opacity="0.8">A reunion at the table</text>
+  </svg>
+`)}`;
+
+const args = {
+  kicker: 'Family Reunion',
+  title: 'Back to the Table',
+  subtitle: 'A collage-style family opener with photo tiles, memory cards, and reunion notes.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#78350f',
+  secondaryAccent: '#f59e0b',
+  posterImageSrc,
+  posterImageAlt: 'Family reunion image',
+}
+
+const meta = {
+  title: 'core/intro/family-intro-reunion/DefaultFamilyIntroBumperLandscape',
+  component: DefaultFamilyIntroBumperLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultFamilyIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultFamilyIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}