@vibecuting/video-project-core 0.1.29 → 0.1.31

package/src/storybook/remotion-preview.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react'
 import { createContext, useContext } from 'react'
 
-type RemotionPreviewValue = {
+export type RemotionPreviewValue = {
   frame: number
   fps: number
   width: number
@@ -60,9 +60,9 @@ type SpringConfig = {
   delay?: number
 }
 
-function clamp01(value: number) {
-  if (value < 0) return 0
-  if (value > 1) return 1
+function clamp(value: number, min: number, max: number) {
+  if (value < min) return min
+  if (value > max) return max
   return value
 }
 
@@ -84,19 +84,13 @@ export function spring({
   const eased = 1 - Math.exp(-progress * (damping / Math.max(0.001, mass)))
   const wobble = Math.sin(progress * Math.PI * (stiffness / 55)) * 0.015
 
-  return clamp01(eased + wobble)
+  return clamp(eased + wobble, 0, 1)
 }
 
 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) {
@@ -197,6 +191,63 @@ export function Img({
   return <img {...rest} src={src} alt={alt} style={style} />
 }
 
+export function Audio({
+  src,
+  volume,
+  style,
+  ...rest
+}: {
+  src: string
+  volume?: number | ((frame: number) => number)
+  style?: CSSProperties
+  [key: string]: unknown
+}) {
+  void volume
+
+  return <audio {...rest} src={src} style={style} />
+}
+
+export const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE =
+  'HtmlInCanvas is not available in Storybook preview, falling back to the DOM renderer.'
+
+export function isHtmlInCanvasSupported() {
+  return false
+}
+
+type HtmlInCanvasProps = {
+  width: number
+  height: number
+  durationInFrames?: number
+  pixelDensity?: number
+  effects?: unknown
+  children?: ReactNode
+  onPaint?: unknown
+  onInit?: unknown
+  style?: CSSProperties
+}
+
+function HtmlInCanvasFallback({ children, style }: HtmlInCanvasProps) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+HtmlInCanvasFallback.isSupported = isHtmlInCanvasSupported
+
+export const HtmlInCanvas = HtmlInCanvasFallback as typeof HtmlInCanvasFallback & {
+  isSupported: typeof isHtmlInCanvasSupported
+}
+
 export function AbsoluteFill({
   children,
   style,
@@ -220,3 +271,26 @@ export function AbsoluteFill({
     </div>
   )
 }
+
+export function Sequence({
+  children,
+}: {
+  from?: number
+  durationInFrames?: number
+  children?: ReactNode
+}) {
+  return <>{children}</>
+}
+
+export function random(seed?: string | number) {
+  const value = String(seed ?? 0)
+  let hash = 0
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) >>> 0
+  }
+  return (hash % 10000) / 10000
+}
+
+export function staticFile(path: string) {
+  return path
+}

package/src/core/scene/photo/effects-photo/default-effects-photo-scene.tsx

@@ -1,352 +0,0 @@
-import { useMemo } from 'react'
-
-import { z } from 'zod'
-
-import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
-import { Easing, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'
-
-import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../../base'
-import { defineSceneComponent } from '../../../../plugins/scene-component'
-
-export type PhotoEffectType = 'vignette' | 'grain' | 'glow' | 'warmth' | 'soft-focus'
-
-export interface PhotoEffect {
-  type: PhotoEffectType
-  intensity?: number
-  hue?: string
-}
-
-export interface DefaultEffectsPhotoSceneProps extends BaseRemotionSceneProps {
-  sceneId?: string
-  sceneName?: string
-  title?: string
-  subtitle?: string
-  badge?: string
-  imageSrc: string
-  effects?: PhotoEffect[]
-  accent?: string
-  secondaryAccent?: string
-  textColor?: string
-}
-
-export const componentMetadata = defineScenePluginMetadata({
-  resourceKind: 'scene',
-  name: 'DefaultEffectsPhotoScene',
-  description: 'Photo scene with layered Remotion effects and cinematic grading',
-  sourceFile: 'src/core/scene/photo/effects-photo/default-effects-photo-scene.tsx',
-  pluginKey: 'core.photo.effects-photo',
-  tags: ['scene', 'photo', 'effects', 'image', 'cinematic'],
-  aspectRatio: '16:9',
-  sceneType: 'scene',
-  sceneFamily: 'custom',
-  rootLayout: 'absolute-fill',
-  propsTypeName: 'DefaultEffectsPhotoSceneProps',
-})
-
-function matchesEffect(effects: PhotoEffect[] | undefined, type: PhotoEffectType) {
-  return effects?.some((effect) => effect.type === type) ?? false
-}
-
-function effectIntensity(effects: PhotoEffect[] | undefined, type: PhotoEffectType, fallback: number) {
-  return effects?.find((effect) => effect.type === type)?.intensity ?? fallback
-}
-
-export const DefaultEffectsPhotoScene = 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(),
-      imageSrc: z.string(),
-      effects: z
-        .array(
-          z.object({
-            type: z.enum(['vignette', 'grain', 'glow', 'warmth', 'soft-focus']),
-            intensity: z.number().min(0).max(1).optional(),
-            hue: z.string().optional(),
-          }),
-        )
-        .optional(),
-      accent: z.string().optional(),
-      secondaryAccent: z.string().optional(),
-      textColor: z.string().optional(),
-    }),
-    component: function DefaultEffectsPhotoScene({
-      id,
-      name,
-      sceneId,
-      sceneName,
-      title,
-      subtitle,
-      badge,
-      imageSrc,
-      effects,
-      accent,
-      secondaryAccent,
-      textColor,
-    }: DefaultEffectsPhotoSceneProps) {
-      const runtime = useRemotionSceneRuntime()
-      const sceneConfig = useSceneConfig()
-      const frame = useCurrentFrame()
-      const { fps } = useVideoConfig()
-      const portrait = runtime.height > runtime.width
-      const animated = sceneConfig.sceneType === 'animation'
-      const animationProgress =
-        sceneConfig.sceneType === 'animation'
-          ? spring({
-              frame,
-              fps,
-              config: { damping: 22, mass: 0.8, stiffness: 130 },
-            })
-          : 1
-      const reveal = sceneConfig.sceneType === 'animation' ? spring({ frame, fps, delay: 6, config: { damping: 20, mass: 0.7, stiffness: 150 } }) : 1
-      const focusDrift = sceneConfig.sceneType === 'animation' ? Math.sin((frame / fps) * Math.PI * 0.75) : 0
-      const scale = 1.01 + (1 - animationProgress) * 0.06 + focusDrift * 0.008
-      const translateX = (1 - animationProgress) * (portrait ? -8 : -12) + focusDrift * (portrait ? 8 : 12)
-      const translateY = (1 - animationProgress) * 10 + focusDrift * 16
-      const titleSize = Math.round(runtime.height * (portrait ? 0.034 : 0.04))
-      const subtitleSize = Math.round(runtime.height * 0.017)
-      const framePaddingX = Math.round(runtime.width * (portrait ? 0.015 : 0.014))
-      const framePaddingY = Math.round(runtime.height * (portrait ? 0.014 : 0.012))
-      const frameLeft = framePaddingX
-      const frameTop = framePaddingY
-      const frameWidth = Math.max(1, runtime.width - framePaddingX * 2)
-      const frameHeight = Math.max(1, runtime.height - framePaddingY * 2)
-      const imageFilter = animated ? 'brightness(1.08) contrast(1.04) saturate(1.08)' : 'brightness(1.9) contrast(1.18) saturate(1.22)'
-      const vignette = matchesEffect(effects, 'vignette')
-      const grain = matchesEffect(effects, 'grain')
-      const glow = matchesEffect(effects, 'glow')
-      const warmth = matchesEffect(effects, 'warmth')
-      const softFocus = matchesEffect(effects, 'soft-focus')
-      const vignetteOpacity = effectIntensity(effects, 'vignette', 0.52) * (0.65 + reveal * 0.35)
-      const glowOpacity = effectIntensity(effects, 'glow', 0.45) * (0.7 + reveal * 0.3)
-      const grainOpacity = effectIntensity(effects, 'grain', 0.12)
-      const warmthHue = effects?.find((effect) => effect.type === 'warmth')?.hue ?? accent ?? '#f97316'
-      const focusOverlay = interpolate(reveal, [0, 1], [0, 1], {
-        easing: Easing.inOut(Easing.quad),
-        extrapolateLeft: 'clamp',
-        extrapolateRight: 'clamp',
-      })
-
-      const effectLayers = useMemo(
-        () => (
-          <>
-            {glow ? (
-              <div
-                aria-hidden="true"
-                style={{
-                  position: 'absolute',
-                  inset: '4%',
-                  opacity: glowOpacity * 0.55,
-                  filter: 'blur(20px) saturate(1.18) brightness(0.98)',
-                  transform: `scale(${1.03 + (1 - animationProgress) * 0.02})`,
-                  pointerEvents: 'none',
-                }}
-              >
-                <Img
-                  src={imageSrc}
-                  alt={title ?? 'Effects photo'}
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                  }}
-                />
-              </div>
-            ) : null}
-            {softFocus ? (
-              <div
-                aria-hidden="true"
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  opacity: 0.18 + focusOverlay * 0.08,
-                  filter: 'blur(10px) saturate(1.04)',
-                  transform: `scale(${1.02 + focusOverlay * 0.01})`,
-                  pointerEvents: 'none',
-                }}
-              >
-                <Img
-                  src={imageSrc}
-                  alt={title ?? 'Effects photo'}
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    objectFit: 'cover',
-                  }}
-                />
-              </div>
-            ) : null}
-            {vignette ? (
-              <div
-                aria-hidden="true"
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  background:
-                    'radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 28%, rgba(2,6,23,0.14) 56%, rgba(2,6,23,0.46) 100%)',
-                  opacity: vignetteOpacity * 0.72,
-                  pointerEvents: 'none',
-                }}
-              />
-            ) : null}
-            {warmth ? (
-              <div
-                aria-hidden="true"
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  background: `linear-gradient(135deg, ${warmthHue} 0%, rgba(255,255,255,0.02) 36%, ${secondaryAccent ?? 'rgba(59,130,246,0.14)'} 100%)`,
-                  mixBlendMode: 'screen',
-                  opacity: 0.08 + focusOverlay * 0.08,
-                  pointerEvents: 'none',
-                }}
-              />
-            ) : null}
-            {grain ? (
-              <div
-                aria-hidden="true"
-                style={{
-                  position: 'absolute',
-                  inset: 0,
-                  opacity: grainOpacity,
-                  backgroundImage:
-                    'radial-gradient(rgba(255,255,255,0.35) 0.7px, transparent 0.7px), radial-gradient(rgba(0,0,0,0.3) 0.7px, transparent 0.7px)',
-                  backgroundSize: '4px 4px, 4px 4px',
-                  backgroundPosition: '0 0, 2px 2px',
-                  mixBlendMode: 'soft-light',
-                  pointerEvents: 'none',
-                }}
-              />
-            ) : null}
-          </>
-        ),
-        [
-          animationProgress,
-          focusOverlay,
-          grain,
-          grainOpacity,
-          glow,
-          glowOpacity,
-          imageSrc,
-          secondaryAccent,
-          softFocus,
-          title,
-          vignette,
-          vignetteOpacity,
-          warmth,
-          warmthHue,
-        ],
-      )
-
-      return (
-        <BaseRemotionScene
-          id={id ?? sceneId}
-          name={name ?? sceneName ?? title}
-          style={{
-            background:
-              portrait
-                ? `linear-gradient(180deg, ${accent ?? '#020617'} 0%, #000000 100%)`
-                : `radial-gradient(circle at 50% 18%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#020617'} 52%, #000000 100%)`,
-            color: textColor ?? '#f8fafc',
-            padding: Math.round(runtime.height * (portrait ? 0.02 : 0.03)),
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              overflow: 'hidden',
-              border: '1px solid rgba(255,255,255,0.1)',
-              background: 'rgba(2,6,23,0.82)',
-              isolation: 'isolate',
-            }}
-          >
-            <div
-              style={{
-                position: 'absolute',
-                top: frameTop,
-                left: frameLeft,
-                width: frameWidth,
-                height: frameHeight,
-                border: animated ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(255,255,255,0.16)',
-                boxShadow: animated ? '0 18px 56px rgba(0,0,0,0.24)' : '0 12px 32px rgba(0,0,0,0.14)',
-                backgroundColor: animated ? 'rgba(2,6,23,0.14)' : 'rgba(248,250,252,0.06)',
-                backgroundImage: `url(${imageSrc})`,
-                backgroundSize: 'cover',
-                backgroundPosition: `${50}% ${portrait ? 44 : 52}%`,
-                backgroundRepeat: 'no-repeat',
-                overflow: 'hidden',
-                filter: imageFilter,
-              }}
-            >
-            </div>
-
-            <div
-              style={{
-                position: 'absolute',
-                top: frameTop,
-                left: frameLeft,
-                width: frameWidth,
-                height: frameHeight,
-              }}
-            >
-              {effectLayers}
-            </div>
-
-            <div
-              aria-hidden="true"
-              style={{
-                position: 'absolute',
-                inset: 0,
-                background:
-                  'linear-gradient(180deg, rgba(2,6,23,0.04) 0%, rgba(2,6,23,0.12) 38%, rgba(2,6,23,0.52) 100%)',
-                pointerEvents: 'none',
-              }}
-            />
-
-            <div
-              style={{
-                position: 'absolute',
-                inset: 0,
-                display: 'grid',
-                alignContent: 'space-between',
-                padding: Math.round(runtime.height * (portrait ? 0.02 : 0.03)),
-                zIndex: 2,
-                pointerEvents: 'none',
-              }}
-            >
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: 12 }}>
-                <div
-                  style={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    border: '1px solid rgba(255,255,255,0.18)',
-                    background: 'rgba(2,6,23,0.6)',
-                    color: '#f8fafc',
-                    padding: '8px 12px',
-                    letterSpacing: '0.22em',
-                    textTransform: 'uppercase',
-                    fontSize: 11,
-                    lineHeight: 1,
-                  }}
-                >
-                  {badge ?? 'Effects Photo'}
-                </div>
-              </div>
-
-              <div style={{ display: 'grid', gap: 8, maxWidth: portrait ? '86%' : '58%' }}>
-                {title ? <div style={{ fontSize: titleSize, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.94 }}>{title}</div> : null}
-                {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.84 }}>{subtitle}</div> : null}
-              </div>
-            </div>
-          </div>
-        </BaseRemotionScene>
-      )
-    },
-  }),
-)