@vibecuting/video-project-core 0.1.26 → 0.1.28

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

@@ -0,0 +1,283 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+import { cloneElement, isValidElement } from 'react'
+import { spring, useCurrentFrame, useVideoConfig } from 'remotion'
+
+import { BaseRemotionScene, SceneMotionLayer, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../base'
+import { defineSceneComponent } from '../../../plugins/scene-component'
+
+export interface DefaultVideoSceneProps extends BaseRemotionSceneProps {
+  sceneId?: string
+  sceneName?: string
+  title?: string
+  subtitle?: string
+  badge?: string
+  runtimeLabel?: string
+  video: ReactNode
+  videos?: ReactNode[]
+  poster?: ReactNode
+  variant?: 'player' | 'split' | 'wall'
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultVideoScene',
+  description: 'Video-first scene with poster-led motion and editorial framing',
+  sourceFile: 'src/core/scene/video/default-video-scene.tsx',
+  pluginKey: 'core.video.preview',
+  tags: ['scene', 'video', 'preview', 'player'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultVideoSceneProps',
+})
+
+function VideoFrame({
+  node,
+  isPortrait,
+  animationProgress,
+}: {
+  node: ReactNode
+  isPortrait: boolean
+  animationProgress: number
+  }) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        border: '1px solid rgba(255,255,255,0.14)',
+        background: 'rgba(2,6,23,0.86)',
+        transform: `scale(${1 + (1 - animationProgress) * 0.012})`,
+      }}
+    >
+      {node}
+    </div>
+  )
+}
+
+function renderCoverMedia(node: ReactNode) {
+  if (isValidElement(node)) {
+    const existingStyle = (node.props as { style?: Record<string, unknown> }).style ?? {}
+    return cloneElement(node, {
+      ...(node.props as Record<string, unknown>),
+      style: {
+        ...existingStyle,
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block',
+        minWidth: 0,
+        minHeight: 0,
+      },
+    })
+  }
+
+  return <div style={{ width: '100%', height: '100%', minWidth: 0, minHeight: 0 }}>{node}</div>
+}
+
+export const DefaultVideoScene = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'custom',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().optional(),
+      subtitle: z.string().optional(),
+      badge: z.string().optional(),
+      runtimeLabel: z.string().optional(),
+      video: z.any(),
+      videos: z.array(z.any()).optional(),
+      poster: z.any().optional(),
+      variant: z.enum(['player', 'split', 'wall']).optional(),
+      accent: z.string().optional(),
+      secondaryAccent: z.string().optional(),
+      textColor: z.string().optional(),
+    }),
+    component: function DefaultVideoScene({
+      id,
+      name,
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      badge,
+      runtimeLabel,
+      video,
+      videos,
+      poster,
+      variant = 'player',
+      accent,
+      secondaryAccent,
+      textColor,
+    }: DefaultVideoSceneProps) {
+      const runtime = useRemotionSceneRuntime()
+      const sceneConfig = useSceneConfig()
+      const frame = useCurrentFrame()
+      const { fps } = useVideoConfig()
+      const isPortrait = runtime.height > runtime.width
+      const animationProgress =
+        sceneConfig.sceneType === 'animation'
+          ? spring({
+              frame,
+              fps,
+              config: {
+                damping: 18,
+                mass: 0.8,
+                stiffness: 110,
+              },
+            })
+          : 1
+      const titleSize = Math.round(runtime.height * (isPortrait ? 0.032 : 0.038))
+      const subtitleSize = Math.round(runtime.height * 0.017)
+      const frames = (videos?.length ? videos : [video]).slice(0, 4)
+
+      return (
+        <BaseRemotionScene
+          id={id ?? sceneId}
+          name={name ?? sceneName ?? title}
+          style={{
+            background: isPortrait
+              ? `linear-gradient(180deg, ${accent ?? '#020617'} 0%, #0f172a 55%, #000000 100%)`
+              : `radial-gradient(circle at 50% 24%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#020617'} 48%, #000000 100%)`,
+            color: textColor ?? '#f8fafc',
+            padding: Math.round(runtime.height * (isPortrait ? 0.02 : 0.03)),
+          }}
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateRows: 'minmax(0, 1fr) auto',
+              gap: 16,
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            {variant === 'wall' ? (
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: isPortrait ? '1fr 1fr' : 'repeat(2, minmax(0, 1fr))',
+                  gridTemplateRows: isPortrait ? 'repeat(2, minmax(0, 1fr))' : 'repeat(2, minmax(0, 1fr))',
+                  gap: 12,
+                  minWidth: 0,
+                  minHeight: 0,
+                }}
+              >
+                {frames.map((item, index) => (
+                  <SceneMotionLayer key={`video-wall-${index}`} variant="media" delayIndex={index}>
+                    <VideoFrame node={item} isPortrait={isPortrait} animationProgress={animationProgress} />
+                  </SceneMotionLayer>
+                ))}
+              </div>
+            ) : variant === 'split' ? (
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: isPortrait ? '1fr' : 'minmax(0, 1.18fr) minmax(250px, 0.82fr)',
+                  gap: 16,
+                  minWidth: 0,
+                  minHeight: 0,
+                }}
+              >
+                <SceneMotionLayer variant="panel">
+                  <VideoFrame node={video} isPortrait={isPortrait} animationProgress={animationProgress} />
+                </SceneMotionLayer>
+                <div
+                  style={{
+                    display: 'grid',
+                    gap: 12,
+                    alignContent: 'start',
+                    padding: isPortrait ? '0' : '8px 0',
+                    minWidth: 0,
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
+                    <div style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>
+                      {badge ?? 'Video'}
+                    </div>
+                    {runtimeLabel ? (
+                      <div style={{ fontSize: Math.round(runtime.height * 0.014), letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.58 }}>
+                        {runtimeLabel}
+                      </div>
+                    ) : null}
+                  </div>
+                  {title ? (
+                    <SceneMotionLayer variant="hero-title">
+                      <div style={{ fontSize: titleSize, lineHeight: 0.96, letterSpacing: '-0.06em', fontWeight: 800 }}>{title}</div>
+                    </SceneMotionLayer>
+                  ) : null}
+                  {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.84 }}>{subtitle}</div> : null}
+                  <div style={{ border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(2,6,23,0.56)', padding: 14, display: 'grid', gap: 10 }}>
+                    <div style={{ fontSize: Math.round(runtime.height * 0.013), letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.56 }}>Editorial Notes</div>
+                    <div style={{ fontSize: Math.round(runtime.height * 0.018), lineHeight: 1.45, opacity: 0.88 }}>
+                      Use this layout for review notes, chapter context, or a companion still beside the clip.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div
+                style={{
+                  position: 'relative',
+                  width: '100%',
+                  height: '100%',
+                  aspectRatio: isPortrait ? '9 / 16' : '16 / 9',
+                  minWidth: 0,
+                  minHeight: 0,
+                  overflow: 'hidden',
+                  border: '1px solid rgba(255,255,255,0.14)',
+                  background: 'rgba(2,6,23,0.84)',
+                }}
+              >
+                <SceneMotionLayer
+                  variant="media"
+                  style={{
+                    position: 'absolute',
+                    inset: '-8%',
+                    opacity: 0.26,
+                    filter: 'blur(22px) saturate(1.06)',
+                    transform: `scale(${1.12 + (1 - animationProgress) * 0.02})`,
+                  }}
+                >
+                  {renderCoverMedia(poster ?? video)}
+                </SceneMotionLayer>
+                <SceneMotionLayer variant="media" style={{ position: 'absolute', inset: 0 }}>
+                  {renderCoverMedia(poster ?? video)}
+                </SceneMotionLayer>
+                <div
+                  aria-hidden="true"
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background: 'linear-gradient(180deg, rgba(2,6,23,0.1) 0%, rgba(2,6,23,0.2) 42%, rgba(2,6,23,0.72) 100%)',
+                  }}
+                />
+                <div style={{ position: 'absolute', left: 16, top: 16, display: 'flex', gap: 10, alignItems: 'center' }}>
+                  <div style={{ width: 10, height: 10, borderRadius: 9999, background: 'rgba(239,68,68,0.95)', boxShadow: '0 0 0 4px rgba(239,68,68,0.16)' }} />
+                  <div style={{ fontSize: Math.round(runtime.height * 0.013), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.72 }}>
+                    {badge ?? 'Video Preview'}
+                  </div>
+                </div>
+                <div style={{ position: 'absolute', left: 16, right: 16, bottom: 16, display: 'grid', gap: 8 }}>
+                  {title ? <div style={{ fontSize: titleSize, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.95 }}>{title}</div> : null}
+                  {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.86, maxWidth: isPortrait ? '88%' : '60%' }}>{subtitle}</div> : null}
+                </div>
+              </div>
+            )}
+          </section>
+        </BaseRemotionScene>
+      )
+    },
+  }),
+)

package/src/core/scene/video/default-video-split-scene-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoSplitScene, componentMetadata as baseComponentMetadata } from './default-video-split-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoSplitSceneHorizontal',
+  description: 'Video split preview scene (Portrait 9:16 variant)',
+  sourceFile: 'src/core/scene/video/default-video-split-scene-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultVideoSplitSceneHorizontal = VideoComponent(componentMetadata)(function DefaultVideoSplitSceneHorizontal(
+  props: ComponentProps<typeof DefaultVideoSplitScene>,
+) {
+  return <DefaultVideoSplitScene {...props} />
+})

package/src/core/scene/video/default-video-split-scene-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoSplitScene, componentMetadata as baseComponentMetadata } from './default-video-split-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoSplitSceneLandscape',
+  description: 'Video split preview scene (Landscape 16:9 variant)',
+  sourceFile: 'src/core/scene/video/default-video-split-scene-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultVideoSplitSceneLandscape = VideoComponent(componentMetadata)(function DefaultVideoSplitSceneLandscape(
+  props: ComponentProps<typeof DefaultVideoSplitScene>,
+) {
+  return <DefaultVideoSplitScene {...props} />
+})

package/src/core/scene/video/default-video-split-scene.stories.tsx

@@ -0,0 +1,41 @@
+import { DefaultVideoSplitSceneLandscape } from './default-video-split-scene-Landscape'
+import { DefaultVideoSplitSceneHorizontal } from './default-video-split-scene-Horizontal'
+
+const frame = (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      background:
+        'linear-gradient(180deg, rgba(255,255,255,0.18), rgba(2,6,23,0.84)), linear-gradient(135deg, #0f766e 0%, #1d4ed8 52%, #020617 100%)',
+    }}
+  />
+)
+
+const args = {
+  title: 'Editorial Split',
+  subtitle: 'Use this when the clip needs a companion still, notes, or a second framing column.',
+  badge: 'Split',
+  runtimeLabel: '02:24',
+  video: frame,
+  poster: frame,
+}
+
+const meta = {
+  title: 'core/scene/video/DefaultVideoSplitSceneLandscape',
+  component: DefaultVideoSplitSceneLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultVideoSplitSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultVideoSplitSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/scene/video/default-video-split-scene.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from './default-video-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoSplitScene',
+  description: 'Video split preview scene',
+  sourceFile: 'src/core/scene/video/default-video-split-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'split'])),
+}
+
+export const DefaultVideoSplitScene = VideoComponent(componentMetadata)(function DefaultVideoSplitScene(
+  props: ComponentProps<typeof DefaultVideoScene>,
+) {
+  return <DefaultVideoScene {...props} variant="split" />
+})

package/src/core/scene/video/default-video-wall-scene-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoWallScene, componentMetadata as baseComponentMetadata } from './default-video-wall-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoWallSceneHorizontal',
+  description: 'Video wall preview scene (Portrait 9:16 variant)',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultVideoWallSceneHorizontal = VideoComponent(componentMetadata)(function DefaultVideoWallSceneHorizontal(
+  props: ComponentProps<typeof DefaultVideoWallScene>,
+) {
+  return <DefaultVideoWallScene {...props} />
+})

package/src/core/scene/video/default-video-wall-scene-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoWallScene, componentMetadata as baseComponentMetadata } from './default-video-wall-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoWallSceneLandscape',
+  description: 'Video wall preview scene (Landscape 16:9 variant)',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultVideoWallSceneLandscape = VideoComponent(componentMetadata)(function DefaultVideoWallSceneLandscape(
+  props: ComponentProps<typeof DefaultVideoWallScene>,
+) {
+  return <DefaultVideoWallScene {...props} />
+})

package/src/core/scene/video/default-video-wall-scene.stories.tsx

@@ -0,0 +1,40 @@
+import { DefaultVideoWallSceneHorizontal } from './default-video-wall-scene-Horizontal'
+import { DefaultVideoWallSceneLandscape } from './default-video-wall-scene-Landscape'
+
+const frame = (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      background:
+        'linear-gradient(180deg, rgba(255,255,255,0.16), rgba(2,6,23,0.84)), linear-gradient(135deg, #7c3aed 0%, #1d4ed8 42%, #020617 100%)',
+    }}
+  />
+)
+
+const args = {
+  title: 'Clip Wall',
+  subtitle: 'Four clips arranged like a screening board or trailer review wall.',
+  badge: 'Wall',
+  video: frame,
+  videos: [frame, frame, frame, frame],
+}
+
+const meta = {
+  title: 'core/scene/video/DefaultVideoWallSceneLandscape',
+  component: DefaultVideoWallSceneLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultVideoWallSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultVideoWallSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/scene/video/default-video-wall-scene.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from './default-video-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultVideoWallScene',
+  description: 'Video wall preview scene',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'wall', 'multi'])),
+}
+
+export const DefaultVideoWallScene = VideoComponent(componentMetadata)(function DefaultVideoWallScene(
+  props: ComponentProps<typeof DefaultVideoScene>,
+) {
+  return <DefaultVideoScene {...props} variant="wall" />
+})

package/src/core/scene/video/index.ts

@@ -0,0 +1,9 @@
+export { DefaultVideoScene, componentMetadata as DefaultVideoSceneMetadata } from './default-video-scene'
+export { DefaultVideoSceneLandscape, componentMetadata as DefaultVideoSceneLandscapeMetadata } from './default-video-scene-Landscape'
+export { DefaultVideoSceneHorizontal, componentMetadata as DefaultVideoSceneHorizontalMetadata } from './default-video-scene-Horizontal'
+export { DefaultVideoSplitScene, componentMetadata as DefaultVideoSplitSceneMetadata } from './default-video-split-scene'
+export { DefaultVideoSplitSceneLandscape, componentMetadata as DefaultVideoSplitSceneLandscapeMetadata } from './default-video-split-scene-Landscape'
+export { DefaultVideoSplitSceneHorizontal, componentMetadata as DefaultVideoSplitSceneHorizontalMetadata } from './default-video-split-scene-Horizontal'
+export { DefaultVideoWallScene, componentMetadata as DefaultVideoWallSceneMetadata } from './default-video-wall-scene'
+export { DefaultVideoWallSceneLandscape, componentMetadata as DefaultVideoWallSceneLandscapeMetadata } from './default-video-wall-scene-Landscape'
+export { DefaultVideoWallSceneHorizontal, componentMetadata as DefaultVideoWallSceneHorizontalMetadata } from './default-video-wall-scene-Horizontal'

package/src/storybook/remotion-preview.tsx

@@ -61,12 +61,8 @@ type SpringConfig = {
 }
 
 function clamp01(value: number) {
-  if (value < 0) {
-    return 0
-  }
-  if (value > 1) {
-    return 1
-  }
+  if (value < 0) return 0
+  if (value > 1) return 1
   return value
 }
 
@@ -91,6 +87,116 @@ export function spring({
   return clamp01(eased + wobble)
 }
 
+type Extrapolate = 'clamp' | 'extend' | 'identity'
+
+type EasingFunction = (value: number) => number
+
+function clamp(value: number, min: number, max: number) {
+  if (value < min) return min
+  if (value > max) return max
+  return value
+}
+
+function wrapInOut(easing: EasingFunction): EasingFunction {
+  return (value) => {
+    if (value <= 0.5) {
+      return easing(value * 2) / 2
+    }
+    return 1 - easing((1 - value) * 2) / 2
+  }
+}
+
+function wrapOut(easing: EasingFunction): EasingFunction {
+  return (value) => 1 - easing(1 - value)
+}
+
+function wrapIn(easing: EasingFunction): EasingFunction {
+  return (value) => easing(value)
+}
+
+export const Easing = {
+  linear: (value: number) => value,
+  quad: (value: number) => value * value,
+  cubic: (value: number) => value * value * value,
+  quart: (value: number) => value * value * value * value,
+  quint: (value: number) => value * value * value * value * value,
+  sin: (value: number) => 1 - Math.cos((value * Math.PI) / 2),
+  exp: (value: number) => (value === 0 ? 0 : 2 ** (10 * (value - 1))),
+  circle: (value: number) => 1 - Math.sqrt(1 - value * value),
+  back: (value: number) => {
+    const overshoot = 1.70158
+    return value * value * ((overshoot + 1) * value - overshoot)
+  },
+  in: wrapIn,
+  out: wrapOut,
+  inOut: wrapInOut,
+}
+
+export function interpolate(
+  input: number,
+  inputRange: number[],
+  outputRange: number[],
+  options?: {
+    extrapolateLeft?: Extrapolate
+    extrapolateRight?: Extrapolate
+    easing?: EasingFunction
+  },
+) {
+  if (inputRange.length !== outputRange.length || inputRange.length < 2) {
+    throw new Error('interpolate() expects inputRange and outputRange of the same length >= 2')
+  }
+
+  const leftMode = options?.extrapolateLeft ?? 'extend'
+  const rightMode = options?.extrapolateRight ?? 'extend'
+  const easing = options?.easing
+
+  const firstInput = inputRange[0]
+  const lastInput = inputRange[inputRange.length - 1]
+
+  if (input < firstInput) {
+    if (leftMode === 'identity') return input
+    if (leftMode === 'clamp') return outputRange[0]
+  }
+
+  if (input > lastInput) {
+    if (rightMode === 'identity') return input
+    if (rightMode === 'clamp') return outputRange[outputRange.length - 1]
+  }
+
+  let segmentIndex = 0
+  for (let index = 0; index < inputRange.length - 1; index += 1) {
+    if (inputRange[index + 1] >= input) {
+      segmentIndex = index
+      break
+    }
+    segmentIndex = inputRange.length - 2
+  }
+
+  const inputStart = inputRange[segmentIndex]
+  const inputEnd = inputRange[segmentIndex + 1]
+  const outputStart = outputRange[segmentIndex]
+  const outputEnd = outputRange[segmentIndex + 1]
+  const span = inputEnd - inputStart
+  const rawProgress = span === 0 ? 0 : (input - inputStart) / span
+  const progress = clamp(easing ? easing(clamp(rawProgress, 0, 1)) : rawProgress, 0, 1)
+
+  return outputStart + (outputEnd - outputStart) * progress
+}
+
+export function Img({
+  src,
+  alt,
+  style,
+  ...rest
+}: {
+  src: string
+  alt?: string
+  style?: CSSProperties
+  [key: string]: unknown
+}) {
+  return <img {...rest} src={src} alt={alt} style={style} />
+}
+
 export function AbsoluteFill({
   children,
   style,

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 = {}