@vibecuting/video-project-core 0.1.29 → 0.1.31

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

@@ -0,0 +1,639 @@
+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'
+  | 'mono'
+  | 'sepia'
+  | 'duotone'
+  | 'cool-tone'
+  | 'vibrant'
+  | 'dream'
+  | 'light-leak'
+  | 'chrome'
+  | 'noir'
+  | 'retro'
+  | 'infrared'
+  | 'pastel'
+  | 'halation'
+
+export interface PhotoEffect {
+  type: PhotoEffectType
+  intensity?: number
+  hue?: string
+  secondaryHue?: 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/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
+}
+
+function effectHue(effects: PhotoEffect[] | undefined, type: PhotoEffectType, fallback: string) {
+  return effects?.find((effect) => effect.type === type)?.hue ?? fallback
+}
+
+function effectSecondaryHue(effects: PhotoEffect[] | undefined, type: PhotoEffectType, fallback: string) {
+  return effects?.find((effect) => effect.type === type)?.secondaryHue ?? 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',
+              'mono',
+              'sepia',
+              'duotone',
+              'cool-tone',
+              'vibrant',
+              'dream',
+              'light-leak',
+              'chrome',
+              'noir',
+              'retro',
+              'infrared',
+              'pastel',
+              'halation',
+            ]),
+            intensity: z.number().min(0).max(1).optional(),
+            hue: z.string().optional(),
+            secondaryHue: 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: Math.max(0, frame - 6), fps, 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 hasMono = matchesEffect(effects, 'mono')
+      const hasSepia = matchesEffect(effects, 'sepia')
+      const hasDuotone = matchesEffect(effects, 'duotone')
+      const hasCoolTone = matchesEffect(effects, 'cool-tone')
+      const hasVibrant = matchesEffect(effects, 'vibrant')
+      const hasDream = matchesEffect(effects, 'dream')
+      const hasLightLeak = matchesEffect(effects, 'light-leak')
+      const hasChrome = matchesEffect(effects, 'chrome')
+      const hasNoir = matchesEffect(effects, 'noir')
+      const hasRetro = matchesEffect(effects, 'retro')
+      const hasInfrared = matchesEffect(effects, 'infrared')
+      const hasPastel = matchesEffect(effects, 'pastel')
+      const hasHalation = matchesEffect(effects, 'halation')
+      const monoIntensity = effectIntensity(effects, 'mono', 1)
+      const sepiaIntensity = effectIntensity(effects, 'sepia', 0.82)
+      const duotoneIntensity = effectIntensity(effects, 'duotone', 0.72)
+      const coolToneIntensity = effectIntensity(effects, 'cool-tone', 0.65)
+      const vibrantIntensity = effectIntensity(effects, 'vibrant', 0.68)
+      const dreamIntensity = effectIntensity(effects, 'dream', 0.45)
+      const lightLeakIntensity = effectIntensity(effects, 'light-leak', 0.58)
+      const chromeIntensity = effectIntensity(effects, 'chrome', 0.56)
+      const noirIntensity = effectIntensity(effects, 'noir', 0.88)
+      const retroIntensity = effectIntensity(effects, 'retro', 0.7)
+      const infraredIntensity = effectIntensity(effects, 'infrared', 0.62)
+      const pastelIntensity = effectIntensity(effects, 'pastel', 0.68)
+      const halationIntensity = effectIntensity(effects, 'halation', 0.58)
+      const duotonePrimary = effectHue(effects, 'duotone', accent ?? '#2563eb')
+      const duotoneSecondary = effectSecondaryHue(effects, 'duotone', secondaryAccent ?? '#f97316')
+      const coolToneHue = effectHue(effects, 'cool-tone', '#0f172a')
+      const lightLeakHue = effectHue(effects, 'light-leak', accent ?? '#fde68a')
+      const chromeHue = effectHue(effects, 'chrome', '#f8fafc')
+      const noirHue = effectHue(effects, 'noir', '#020617')
+      const retroHue = effectHue(effects, 'retro', '#f59e0b')
+      const infraredHue = effectHue(effects, 'infrared', '#ef4444')
+      const pastelHue = effectHue(effects, 'pastel', '#f9a8d4')
+      const halationHue = effectHue(effects, 'halation', '#fef3c7')
+      const imageFilter = [
+        animated ? 'brightness(1.08) contrast(1.04) saturate(1.08)' : 'brightness(1.88) contrast(1.16) saturate(1.2)',
+        hasMono ? `grayscale(${monoIntensity}) contrast(${1.04 + monoIntensity * 0.18})` : '',
+        hasSepia ? `sepia(${sepiaIntensity}) saturate(${1.05 + sepiaIntensity * 0.28})` : '',
+        hasDuotone ? `grayscale(1) contrast(${1.08 + duotoneIntensity * 0.12}) brightness(${0.98 + duotoneIntensity * 0.04})` : '',
+        hasCoolTone ? `hue-rotate(-24deg) saturate(${1.02 + coolToneIntensity * 0.14})` : '',
+        hasVibrant ? `saturate(${1.34 + vibrantIntensity * 0.28}) contrast(${1.06 + vibrantIntensity * 0.08})` : '',
+        hasDream ? `blur(${1 + dreamIntensity * 1.3}px) saturate(${1.06 + dreamIntensity * 0.1}) brightness(${1.04 + dreamIntensity * 0.05})` : '',
+        hasChrome ? `grayscale(0.12) contrast(${1.18 + chromeIntensity * 0.12}) saturate(${1.06 + chromeIntensity * 0.16}) brightness(${1.02 + chromeIntensity * 0.04})` : '',
+        hasNoir ? `grayscale(1) contrast(${1.3 + noirIntensity * 0.18}) brightness(${0.88 + noirIntensity * 0.05})` : '',
+        hasRetro ? `sepia(${0.55 + retroIntensity * 0.22}) saturate(${1.14 + retroIntensity * 0.22}) contrast(${1.08 + retroIntensity * 0.06})` : '',
+        hasInfrared ? `hue-rotate(168deg) saturate(${1.42 + infraredIntensity * 0.18}) contrast(${1.12 + infraredIntensity * 0.1})` : '',
+        hasPastel ? `saturate(${0.82 + pastelIntensity * 0.15}) brightness(${1.08 + pastelIntensity * 0.04}) contrast(${0.92 + pastelIntensity * 0.06})` : '',
+        hasHalation ? `brightness(${1.05 + halationIntensity * 0.04}) contrast(${1.12 + halationIntensity * 0.08}) saturate(${1.1 + halationIntensity * 0.12})` : '',
+      ]
+        .filter(Boolean)
+        .join(' ')
+      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 dreamOpacity = dreamIntensity * (0.18 + reveal * 0.08)
+      const chromeOpacity = chromeIntensity * (0.08 + reveal * 0.12)
+      const lightLeakOpacity = lightLeakIntensity * (0.1 + reveal * 0.08)
+      const noirOpacity = noirIntensity * (0.16 + reveal * 0.1)
+      const retroOpacity = retroIntensity * (0.14 + reveal * 0.08)
+      const infraredOpacity = infraredIntensity * (0.18 + reveal * 0.06)
+      const pastelOpacity = pastelIntensity * (0.12 + reveal * 0.04)
+      const halationOpacity = halationIntensity * (0.2 + reveal * 0.08)
+      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}
+            {hasDuotone ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `linear-gradient(135deg, ${duotonePrimary} 0%, rgba(255,255,255,0.04) 36%, ${duotoneSecondary} 100%)`,
+                  mixBlendMode: 'screen',
+                  opacity: 0.24 + duotoneIntensity * 0.18,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasCoolTone ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `linear-gradient(180deg, rgba(15,23,42,0.1) 0%, ${coolToneHue} 100%)`,
+                  mixBlendMode: 'multiply',
+                  opacity: 0.28 + coolToneIntensity * 0.18,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasLightLeak ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `radial-gradient(circle at 18% 16%, ${lightLeakHue} 0%, rgba(255,255,255,0.14) 18%, rgba(255,255,255,0.02) 40%, transparent 62%)`,
+                  mixBlendMode: 'screen',
+                  opacity: lightLeakOpacity,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasChrome ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `linear-gradient(140deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 28%, ${chromeHue} 48%, rgba(255,255,255,0.02) 78%, rgba(0,0,0,0.18) 100%)`,
+                  mixBlendMode: 'overlay',
+                  opacity: chromeOpacity,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasNoir ? (
+              <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%, ${noirHue} 58%, rgba(2,6,23,0.82) 100%)`,
+                  mixBlendMode: 'multiply',
+                  opacity: noirOpacity,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasRetro ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `linear-gradient(135deg, ${retroHue} 0%, rgba(255,255,255,0.03) 34%, #7c3aed 100%)`,
+                  mixBlendMode: 'screen',
+                  opacity: retroOpacity,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasInfrared ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `radial-gradient(circle at 48% 42%, rgba(255,0,96,0.18) 0%, ${infraredHue} 34%, rgba(0,255,170,0.1) 68%, rgba(2,6,23,0.32) 100%)`,
+                  mixBlendMode: 'screen',
+                  opacity: infraredOpacity,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasPastel ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `linear-gradient(180deg, ${pastelHue} 0%, rgba(255,255,255,0.16) 42%, rgba(255,255,255,0.02) 100%)`,
+                  mixBlendMode: 'soft-light',
+                  opacity: pastelOpacity,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasHalation ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: '1%',
+                  background:
+                    `radial-gradient(circle at 50% 36%, ${halationHue} 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.02) 42%, transparent 70%)`,
+                  mixBlendMode: 'screen',
+                  opacity: halationOpacity,
+                  filter: 'blur(18px)',
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {hasDream ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background:
+                    'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0.02) 58%, rgba(15,23,42,0.12) 100%)',
+                  mixBlendMode: 'soft-light',
+                  opacity: dreamOpacity,
+                  filter: 'blur(8px)',
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+          </>
+        ),
+        [
+          animationProgress,
+          chromeHue,
+          chromeOpacity,
+          coolToneHue,
+          coolToneIntensity,
+          focusOverlay,
+          dreamIntensity,
+          dreamOpacity,
+          infraredHue,
+          infraredIntensity,
+          infraredOpacity,
+          duotoneIntensity,
+          duotonePrimary,
+          duotoneSecondary,
+          halationHue,
+          halationIntensity,
+          halationOpacity,
+          grain,
+          grainOpacity,
+          glow,
+          glowOpacity,
+          hasChrome,
+          hasCoolTone,
+          hasDream,
+          hasDuotone,
+          hasHalation,
+          hasLightLeak,
+          hasInfrared,
+          hasMono,
+          hasNoir,
+          hasPastel,
+          hasRetro,
+          hasSepia,
+          imageSrc,
+          lightLeakHue,
+          lightLeakOpacity,
+          monoIntensity,
+          noirHue,
+          noirOpacity,
+          secondaryAccent,
+          softFocus,
+          sepiaIntensity,
+          title,
+          vignette,
+          vignetteOpacity,
+          warmth,
+          warmthHue,
+          vibrantIntensity,
+          pastelHue,
+          pastelOpacity,
+          retroHue,
+          retroOpacity,
+        ],
+      )
+
+      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)',
+                overflow: 'hidden',
+                filter: imageFilter,
+              }}
+            >
+              <Img
+                src={imageSrc}
+                alt={title ?? 'Effects photo'}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                  objectPosition: `${50 + translateX * 0.08}% ${portrait ? 44 : 52}%`,
+                  transform: `scale(${scale}) translate3d(${translateX}px, ${translateY}px, 0)`,
+                  transformOrigin: 'center center',
+                }}
+              />
+            </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>
+      )
+    },
+  }),
+)

package/src/core/scene/photo/effects-photo/{default-effects-photo-scene-Horizontal.stories.tsx → default-effects-photo-scene-Horizontal/default-effects-photo-scene-Horizontal.stories.tsx}

@@ -3,7 +3,7 @@ import { DefaultEffectsPhotoSceneHorizontal } from './default-effects-photo-scen
 const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
 
 const meta = {
-  title: 'core/scene/photo/effects-photo/DefaultEffectsPhotoSceneHorizontal',
+  title: 'core/scene/photo/effects-photo/default-effects-photo-scene-Horizontal/DefaultEffectsPhotoSceneHorizontal',
   component: DefaultEffectsPhotoSceneHorizontal,
   args: {
     title: 'Golden Echo',

package/src/core/scene/photo/effects-photo/{default-effects-photo-scene-Horizontal.tsx → default-effects-photo-scene-Horizontal/default-effects-photo-scene-Horizontal.tsx}

@@ -1,20 +1,20 @@
-import type { ComponentProps } from 'react'
+import type { DefaultEffectsPhotoSceneProps } from '../default-effects-photo-scene/default-effects-photo-scene'
 
 import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { DefaultEffectsPhotoScene, componentMetadata as baseComponentMetadata } from './default-effects-photo-scene'
+import { DefaultEffectsPhotoScene, componentMetadata as baseComponentMetadata } from '../default-effects-photo-scene/default-effects-photo-scene'
 
 export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'DefaultEffectsPhotoSceneHorizontal',
   description: 'Photo effects scene for 9:16 portrait previews with a vertical layout',
-  sourceFile: 'src/core/scene/photo/effects-photo/default-effects-photo-scene-Horizontal.tsx',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-effects-photo-scene-Horizontal/default-effects-photo-scene-Horizontal.tsx',
   aspectRatio: '9:16',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
 }
 
 export const DefaultEffectsPhotoSceneHorizontal = VideoComponent(componentMetadata)(function DefaultEffectsPhotoSceneHorizontal(
-  props: ComponentProps<typeof DefaultEffectsPhotoScene>,
+  props: DefaultEffectsPhotoSceneProps,
 ) {
   return <DefaultEffectsPhotoScene {...props} />
 })