@vibecuting/video-project-core 0.1.26 → 0.1.27

package/src/core/scene/slide/video-showcase/default-video-showcase-slide.tsx

@@ -0,0 +1,365 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultVideoShowcaseSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  chapter?: string
+  runtimeLabel?: string
+  posterLabel?: string
+  posterCaption?: string
+  notes?: string[]
+  poster?: ReactNode
+}
+
+function VideoPoster({
+  poster,
+  posterLabel,
+  posterCaption,
+  runtimeLabel,
+  chapter,
+  isPortrait,
+  scale,
+}: {
+  poster?: ReactNode
+  posterLabel?: string
+  posterCaption?: string
+  runtimeLabel?: string
+  chapter?: string
+  isPortrait: boolean
+  scale: ReturnType<typeof getSlideTypographyScale>
+}) {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        display: 'grid',
+        placeItems: 'center',
+        width: '100%',
+        minHeight: isPortrait ? 320 : 420,
+        aspectRatio: isPortrait ? '4 / 5' : '16 / 9',
+        overflow: 'hidden',
+        borderRadius: 0,
+        border: '1px solid rgba(148, 163, 184, 0.22)',
+        background: 'linear-gradient(135deg, rgba(15,23,42,0.96) 0%, rgba(30,41,59,0.94) 42%, rgba(37,99,235,0.7) 100%)',
+        boxShadow: '0 24px 60px rgba(15,23,42,0.22)',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'radial-gradient(circle at 28% 20%, rgba(96,165,250,0.32), transparent 28%), radial-gradient(circle at 82% 26%, rgba(56,189,248,0.18), transparent 26%), linear-gradient(180deg, rgba(2,6,23,0.12) 0%, rgba(2,6,23,0.7) 100%)',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 16,
+          border: '1px solid rgba(255,255,255,0.12)',
+          pointerEvents: 'none',
+        }}
+      />
+      <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', padding: isPortrait ? 18 : 22, display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 16 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <div
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 10,
+              padding: '8px 12px',
+              borderRadius: 0,
+              border: '1px solid rgba(255,255,255,0.16)',
+              background: 'rgba(15,23,42,0.46)',
+              color: '#f8fafc',
+              fontSize: scale.caption,
+              letterSpacing: '0.16em',
+              textTransform: 'uppercase',
+            }}
+          >
+            <span style={{ width: 8, height: 8, background: '#38bdf8', display: 'inline-block' }} />
+            {posterLabel ?? 'Poster'}
+          </div>
+          {runtimeLabel ? (
+            <div
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '8px 12px',
+                borderRadius: 0,
+                border: '1px solid rgba(255,255,255,0.16)',
+                background: 'rgba(2,6,23,0.5)',
+                color: '#e2e8f0',
+                fontSize: scale.caption,
+                fontWeight: 600,
+              }}
+            >
+              {runtimeLabel}
+            </div>
+          ) : null}
+        </div>
+
+        <div style={{ display: 'grid', placeItems: 'center', minHeight: 0 }}>
+          {poster ?? (
+            <div style={{ display: 'grid', placeItems: 'center', gap: 14, textAlign: 'center', color: '#e2e8f0' }}>
+              <div
+                style={{
+                  width: isPortrait ? 84 : 96,
+                  height: isPortrait ? 84 : 96,
+                  display: 'grid',
+                  placeItems: 'center',
+                  borderRadius: '999px',
+                  background: 'rgba(15,23,42,0.64)',
+                  border: '1px solid rgba(255,255,255,0.18)',
+                  boxShadow: '0 12px 32px rgba(15,23,42,0.28)',
+                  fontSize: isPortrait ? 28 : 30,
+                }}
+              >
+                ▶
+              </div>
+              <div>
+                <div style={{ fontSize: isPortrait ? scale.body * 0.98 : scale.body, fontWeight: 700, letterSpacing: '-0.02em' }}>{posterLabel ?? 'Video poster'}</div>
+                <div style={{ marginTop: 8, fontSize: scale.caption, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.68 }}>{posterCaption ?? 'Use a frame grab, teaser art, or cover still.'}</div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', gap: 16, color: '#e2e8f0' }}>
+          <div style={{ maxWidth: '72%' }}>
+            <div style={{ fontSize: scale.caption, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{chapter ?? 'Video showcase'}</div>
+            <div style={{ marginTop: 8, fontSize: isPortrait ? scale.body * 0.92 : scale.body, lineHeight: 1.35, opacity: 0.86 }}>{posterCaption ?? 'Poster-led composition for clips, trailers, and edit reviews.'}</div>
+          </div>
+          <div style={{ fontSize: scale.caption, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.58 }}>Video</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function VideoNotes({
+  notes,
+  isPortrait,
+  scale,
+}: {
+  notes?: string[]
+  isPortrait: boolean
+  scale: ReturnType<typeof getSlideTypographyScale>
+}) {
+  const list = (notes ?? []).filter(Boolean).slice(0, 5)
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: isPortrait ? 10 : 12,
+        gridTemplateColumns: isPortrait ? '1fr' : 'repeat(2, minmax(0, 1fr))',
+      }}
+    >
+      {list.length > 0 ? (
+        list.map((note, index) => (
+          <article
+            key={`${index}-${note}`}
+            style={{
+              padding: isPortrait ? '14px 14px 15px' : '15px 16px 16px',
+              borderRadius: 0,
+              border: '1px solid rgba(148,163,184,0.18)',
+              background: 'rgba(15,23,42,0.3)',
+              color: '#e2e8f0',
+              minHeight: isPortrait ? 0 : 96,
+            }}
+          >
+            <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>
+              Note {String(index + 1).padStart(2, '0')}
+            </div>
+            <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.88 : scale.body * 0.92, lineHeight: 1.45, opacity: 0.94 }}>{note}</p>
+          </article>
+        ))
+      ) : (
+        <article
+          style={{
+            padding: isPortrait ? '14px 14px 15px' : '15px 16px 16px',
+            borderRadius: 0,
+            border: '1px dashed rgba(148,163,184,0.22)',
+            background: 'rgba(15,23,42,0.18)',
+            color: '#cbd5e1',
+          }}
+        >
+          <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Supporting notes</div>
+          <p style={{ margin: '10px 0 0', fontSize: isPortrait ? scale.body * 0.88 : scale.body * 0.92, lineHeight: 1.45, opacity: 0.86 }}>
+            Add edit notes, chapter cues, or production reminders.
+          </p>
+        </article>
+      )}
+    </div>
+  )
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultVideoShowcaseSlide',
+  description: 'Video showcase slide',
+  sourceFile: 'src/core/scene/slide/video-showcase/default-video-showcase-slide.tsx',
+  pluginKey: 'core.slide.video-showcase',
+  tags: ['scene', 'slide', 'video', 'showcase'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultVideoShowcaseSlideProps',
+})
+
+export const DefaultVideoShowcaseSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      chapter: z.string().optional(),
+      runtimeLabel: z.string().optional(),
+      posterLabel: z.string().optional(),
+      posterCaption: z.string().optional(),
+      notes: z.array(z.string().min(1)).max(5).optional(),
+      poster: z.any().optional(),
+    }),
+    component: function DefaultVideoShowcaseSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      chapter,
+      runtimeLabel,
+      posterLabel,
+      posterCaption,
+      notes,
+      poster,
+    }: DefaultVideoShowcaseSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 58%, #1d4ed8 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateColumns: isPortrait ? '1fr' : '1.08fr 0.92fr',
+              gap: isPortrait ? 20 : 28,
+              padding: isPortrait ? '40px 28px 42px' : '64px 76px',
+              color: '#e2e8f0',
+              alignItems: 'stretch',
+            }}
+          >
+            <SceneMotionLayer variant="panel">
+              <VideoPoster
+                poster={poster}
+                posterLabel={posterLabel}
+                posterCaption={posterCaption}
+                runtimeLabel={runtimeLabel}
+                chapter={chapter}
+                isPortrait={isPortrait}
+                scale={scale}
+              />
+            </SceneMotionLayer>
+
+            <div style={{ display: 'grid', alignContent: 'start', gap: isPortrait ? 16 : 18, minWidth: 0 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <div
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    padding: '8px 12px',
+                    borderRadius: 0,
+                    border: '1px solid rgba(148,163,184,0.2)',
+                    background: 'rgba(15,23,42,0.42)',
+                    color: '#e2e8f0',
+                    fontSize: scale.caption,
+                    letterSpacing: '0.18em',
+                    textTransform: 'uppercase',
+                    width: 'fit-content',
+                  }}
+                >
+                  <span style={{ width: 8, height: 8, background: '#38bdf8', display: 'inline-block' }} />
+                  {chapter ?? 'Video showcase'}
+                </div>
+              </SceneMotionLayer>
+
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1
+                  style={{
+                    margin: 0,
+                    maxWidth: isPortrait ? 620 : 700,
+                    fontSize: isPortrait ? scale.title * 0.78 : scale.title,
+                    lineHeight: 0.94,
+                    letterSpacing: '-0.06em',
+                  }}
+                >
+                  {title}
+                </h1>
+              </SceneMotionLayer>
+
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p
+                    style={{
+                      margin: 0,
+                      maxWidth: isPortrait ? 620 : 620,
+                      fontSize: isPortrait ? scale.body * 0.92 : scale.body,
+                      lineHeight: 1.52,
+                      opacity: 0.82,
+                    }}
+                  >
+                    {subtitle}
+                  </p>
+                </SceneMotionLayer>
+              ) : null}
+
+              <SceneMotionLayer variant="panel" delayIndex={3}>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                    gap: 12,
+                    maxWidth: isPortrait ? 620 : 540,
+                  }}
+                >
+                  <article style={{ padding: '14px 16px', borderRadius: 0, border: '1px solid rgba(148,163,184,0.18)', background: 'rgba(15,23,42,0.22)' }}>
+                    <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Chapter</div>
+                    <div style={{ marginTop: 8, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.35, fontWeight: 700 }}>{chapter ?? 'Opening sequence'}</div>
+                  </article>
+                  <article style={{ padding: '14px 16px', borderRadius: 0, border: '1px solid rgba(148,163,184,0.18)', background: 'rgba(15,23,42,0.22)' }}>
+                    <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Runtime</div>
+                    <div style={{ marginTop: 8, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.35, fontWeight: 700 }}>{runtimeLabel ?? '02:34'}</div>
+                  </article>
+                </div>
+              </SceneMotionLayer>
+
+              <SceneMotionLayer variant="panel" delayIndex={4}>
+                <VideoNotes notes={notes} isPortrait={isPortrait} scale={scale} />
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/video-showcase/index.ts

@@ -0,0 +1,5 @@
+export { DefaultVideoShowcaseSlide } from './default-video-showcase-slide'
+export { componentMetadata } from './default-video-showcase-slide'
+export { DefaultVideoShowcaseSlideLandscape, componentMetadata as DefaultVideoShowcaseSlideLandscapeMetadata } from './default-video-showcase-slide-Landscape'
+export { DefaultVideoShowcaseSlideHorizontal, componentMetadata as DefaultVideoShowcaseSlideHorizontalMetadata } from './default-video-showcase-slide-Horizontal'
+export { DefaultVideoShowcaseMultiSlide, componentMetadata as DefaultVideoShowcaseMultiSlideMetadata } from './default-video-showcase-multi-slide'

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

@@ -1,19 +0,0 @@
-import { DefaultIntroBumper } from './default-intro-bumper'
-
-const meta = {
-  title: 'core/intro/DefaultIntroBumper',
-  component: DefaultIntroBumper,
-  args: {
-    kicker: 'A Vibecuting Original',
-    title: 'Video Project Core',
-    subtitle: 'A cinematic opening bumper with centered title treatment and room for production credits.',
-    creditLine: 'Directed by Vibecuting Studio',
-    footer: 'Opening Sequence',
-    accent: '#020617',
-    secondaryAccent: '#1d4ed8',
-  },
-}
-
-export default meta
-
-export const Default = {}

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

@@ -1,218 +0,0 @@
-import type { ReactNode } from 'react'
-
-import {
-  BaseRemotionScene,
-  type BaseRemotionSceneProps,
-  useRemotionSceneRuntime,
-} from '../../base'
-import { useSceneMotion } from '../../base'
-import {
-  VideoComponent,
-  defineComponentProjectComponentMetadata,
-} from '@vibecuting/component-project-helper'
-
-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: 'Default remotion intro bumper',
-  sourceFile: 'src/core/intro/default-intro-bumper.tsx',
-  aspectRatio: '16:9',
-  sceneType: 'intro',
-  tags: ['intro', 'bumper'],
-  propsTypeName: 'DefaultIntroBumperProps',
-})
-
-export function DefaultIntroBumper({
-  id,
-  name,
-  title,
-  subtitle,
-  kicker,
-  creditLine,
-  footer,
-  accent,
-  secondaryAccent,
-  textColor,
-  children,
-}: DefaultIntroBumperProps) {
-  const runtime = useRemotionSceneRuntime()
-  const motion = useSceneMotion()
-  const titleFontSize = Math.round(runtime.height * 0.068)
-  const subtitleFontSize = Math.round(runtime.height * 0.024)
-  const kickerFontSize = Math.round(runtime.height * 0.018)
-  const footerFontSize = Math.round(runtime.height * 0.016)
-  const mainColor = textColor ?? '#f8fafc'
-  const primaryBackground = accent ?? '#050816'
-  const highlightBackground = secondaryAccent ?? '#1f2937'
-
-  return (
-      <BaseRemotionScene
-      id={id}
-      name={name}
-      style={{
-        background: `radial-gradient(circle at top, ${highlightBackground} 0%, ${primaryBackground} 42%, #020617 100%)`,
-          color: mainColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: Math.round(runtime.height * 0.07),
-        }}
-      >
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          background:
-            'radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, rgba(2,6,23,0.12) 48%, rgba(2,6,23,0.38) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: Math.round(runtime.height * 0.085),
-          background: 'linear-gradient(180deg, rgba(2,6,23,0.96) 0%, rgba(2,6,23,0.22) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: Math.round(runtime.height * 0.085),
-          background: 'linear-gradient(0deg, rgba(2,6,23,0.96) 0%, rgba(2,6,23,0.22) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <section
-        style={{
-          position: 'relative',
-          zIndex: 1,
-          width: '100%',
-          maxWidth: Math.round(runtime.width * 0.78),
-          textAlign: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: Math.round(runtime.height * 0.02),
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            padding: `${Math.round(runtime.height * 0.008)}px ${Math.round(runtime.width * 0.02)}px`,
-            border: '1px solid rgba(248,250,252,0.16)',
-            borderRadius: 999,
-            fontSize: kickerFontSize,
-            letterSpacing: '0.28em',
-            textTransform: 'uppercase',
-            opacity: 0.68,
-            backdropFilter: 'blur(8px)',
-            background: 'rgba(15, 23, 42, 0.12)',
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none',
-          }}
-        >
-          Intro Sequence
-        </p>
-        {kicker ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: kickerFontSize,
-              letterSpacing: '0.32em',
-              textTransform: 'uppercase',
-              opacity: 0.74,
-            }}
-          >
-            {kicker}
-          </p>
-        ) : null}
-        <div
-          style={{
-            width: Math.round(runtime.width * 0.18),
-            height: 1,
-            background:
-              'linear-gradient(90deg, transparent 0%, rgba(248,250,252,0.9) 50%, transparent 100%)',
-          }}
-        />
-        <h1
-          style={{
-            margin: 0,
-            fontSize: titleFontSize,
-            lineHeight: 0.96,
-            letterSpacing: '-0.05em',
-            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: Math.round(runtime.width * 0.56),
-            fontSize: subtitleFontSize,
-            lineHeight: 1.6,
-            opacity: 0.84,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 6}px, 0)` : 'none',
-          }}
-        >
-            {subtitle}
-          </p>
-        ) : null}
-        {creditLine ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: footerFontSize,
-            letterSpacing: '0.22em',
-            textTransform: 'uppercase',
-            opacity: 0.72,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 4}px, 0)` : 'none',
-          }}
-        >
-            {creditLine}
-          </p>
-        ) : null}
-        {footer ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: footerFontSize,
-            letterSpacing: '0.2em',
-            textTransform: 'uppercase',
-            opacity: 0.54,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 4}px, 0)` : 'none',
-          }}
-        >
-            {footer}
-          </p>
-        ) : null}
-        {children ? <div style={{ marginTop: Math.round(runtime.height * 0.01) }}>{children}</div> : null}
-      </section>
-    </BaseRemotionScene>
-  )
-}
-
-VideoComponent(componentMetadata)(DefaultIntroBumper)

package/src/core/outro/default-outro-bumper.stories.tsx

@@ -1,19 +0,0 @@
-import { DefaultOutroBumper } from './default-outro-bumper'
-
-const meta = {
-  title: 'core/outro/DefaultOutroBumper',
-  component: DefaultOutroBumper,
-  args: {
-    kicker: 'The End',
-    title: 'Thanks for Watching',
-    note: 'A centered closing card that feels like a real film end slate instead of a plain footer.',
-    creditLine: 'Written and produced for Vibecuting',
-    footer: 'End Credits',
-    accent: '#0f172a',
-    secondaryAccent: '#475569',
-  },
-}
-
-export default meta
-
-export const Default = {}