@vibecuting/video-project-core 0.1.29 → 0.1.30

package/src/core/scene/slide/{default-slide-scene.tsx → default-slide-scene/default-slide-scene.tsx}

@@ -3,10 +3,10 @@ import { z } from 'zod'
 
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { defineSceneComponent } from '../../../plugins/scene-component'
-import { SceneMotionStack } from '../../../base'
-import { useRemotionSceneRuntime } from '../../../base'
-import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionStack } from '../../../../base'
+import { useRemotionSceneRuntime } from '../../../../base'
+import { useSceneRootProps } from '../../../../runtime/use-scene-root-props'
 
 export interface DefaultSlideSceneProps {
   sceneId?: string
@@ -19,7 +19,7 @@ export const componentMetadata = defineScenePluginMetadata({
   resourceKind: 'scene',
   name: 'DefaultSlideScene',
   description: 'Default remotion slide scene',
-  sourceFile: 'src/core/scene/slide/default-slide-scene.tsx',
+  sourceFile: 'src/core/scene/slide/default-slide-scene/default-slide-scene.tsx',
   pluginKey: 'core.slide',
   tags: ['scene', 'slide'],
   aspectRatio: '16:9',

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

@@ -1,5 +1,5 @@
 export * from './_shared'
-export { DefaultSlideScene } from './default-slide-scene'
+export { DefaultSlideScene } from './default-slide-scene/default-slide-scene'
 
 export { DefaultAbstractBackgroundCoverSlide } from './abstract-background-cover'
 export { DefaultAgendaCardsSlide } from './agenda-cards'
@@ -85,8 +85,8 @@ export { DefaultTimelineCardsSlide } from './timeline-cards'
 export { DefaultTimelineSlide } from './timeline'
 export { DefaultTimelineSplitSlide } from './timeline-split'
 export { DefaultTitleWithImageSlide } from './title-with-image'
-export { DefaultSlideSceneLandscape, componentMetadata as DefaultSlideSceneLandscapeMetadata } from './default-slide-scene-Landscape'
-export { DefaultSlideSceneHorizontal, componentMetadata as DefaultSlideSceneHorizontalMetadata } from './default-slide-scene-Horizontal'
+export { DefaultSlideSceneLandscape, componentMetadata as DefaultSlideSceneLandscapeMetadata } from './default-slide-scene/default-slide-scene-Landscape'
+export { DefaultSlideSceneHorizontal, componentMetadata as DefaultSlideSceneHorizontalMetadata } from './default-slide-scene/default-slide-scene-Horizontal'
 
 const slideSceneMetadata = { sceneFamily: 'slide' as const }
 

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

@@ -4,7 +4,7 @@ const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.co
 const frame = <img src={photoUrl} alt="Video preview" />
 
 const meta = {
-  title: 'core/scene/video/DefaultVideoSceneHorizontal',
+  title: 'core/scene/video/default-video-scene/DefaultVideoSceneHorizontal',
   component: DefaultVideoSceneHorizontal,
   args: {
     title: 'Launch Cut',

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

@@ -8,7 +8,7 @@ export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'DefaultVideoSceneHorizontal',
   description: 'Video preview scene (Portrait 9:16 variant)',
-  sourceFile: 'src/core/scene/video/default-video-scene-Horizontal.tsx',
+  sourceFile: 'src/core/scene/video/default-video-scene/default-video-scene-Horizontal.tsx',
   aspectRatio: '9:16',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
 }

package/src/core/scene/video/{default-video-scene-Landscape.tsx → default-video-scene/default-video-scene-Landscape.tsx}

@@ -8,7 +8,7 @@ export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'DefaultVideoSceneLandscape',
   description: 'Video preview scene (Landscape 16:9 variant)',
-  sourceFile: 'src/core/scene/video/default-video-scene-Landscape.tsx',
+  sourceFile: 'src/core/scene/video/default-video-scene/default-video-scene-Landscape.tsx',
   aspectRatio: '16:9',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
 }

package/src/core/scene/video/{default-video-scene.stories.tsx → default-video-scene/default-video-scene.stories.tsx}

@@ -4,7 +4,7 @@ const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.co
 const frame = <img src={photoUrl} alt="Video preview" />
 
 const meta = {
-  title: 'core/scene/video/DefaultVideoSceneLandscape',
+  title: 'core/scene/video/default-video-scene/DefaultVideoSceneLandscape',
   component: DefaultVideoSceneLandscape,
   args: {
     title: 'Launch Cut',

package/src/core/scene/video/{default-video-scene.tsx → default-video-scene/default-video-scene.tsx}

@@ -6,8 +6,8 @@ import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component
 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'
+import { BaseRemotionScene, SceneMotionLayer, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../../base'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
 
 export interface DefaultVideoSceneProps extends BaseRemotionSceneProps {
   sceneId?: string
@@ -29,7 +29,7 @@ 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',
+  sourceFile: 'src/core/scene/video/default-video-scene/default-video-scene.tsx',
   pluginKey: 'core.video.preview',
   tags: ['scene', 'video', 'preview', 'player'],
   aspectRatio: '16:9',

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

@@ -8,7 +8,7 @@ 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',
+  sourceFile: 'src/core/scene/video/default-video-split-scene/default-video-split-scene-Horizontal.tsx',
   aspectRatio: '9:16',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
 }

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

@@ -8,7 +8,7 @@ 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',
+  sourceFile: 'src/core/scene/video/default-video-split-scene/default-video-split-scene-Landscape.tsx',
   aspectRatio: '16:9',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
 }

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

@@ -22,7 +22,7 @@ const args = {
 }
 
 const meta = {
-  title: 'core/scene/video/DefaultVideoSplitSceneLandscape',
+  title: 'core/scene/video/default-video-split-scene/DefaultVideoSplitSceneLandscape',
   component: DefaultVideoSplitSceneLandscape,
   args,
 }

package/src/core/scene/video/{default-video-split-scene.tsx → default-video-split-scene/default-video-split-scene.tsx}

@@ -2,13 +2,13 @@ import type { ComponentProps } from 'react'
 
 import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from './default-video-scene'
+import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from '../default-video-scene/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',
+  sourceFile: 'src/core/scene/video/default-video-split-scene/default-video-split-scene.tsx',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'split'])),
 }
 

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

@@ -8,7 +8,7 @@ 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',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene/default-video-wall-scene-Horizontal.tsx',
   aspectRatio: '9:16',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
 }

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

@@ -8,7 +8,7 @@ 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',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene/default-video-wall-scene-Landscape.tsx',
   aspectRatio: '16:9',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
 }

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

@@ -21,7 +21,7 @@ const args = {
 }
 
 const meta = {
-  title: 'core/scene/video/DefaultVideoWallSceneLandscape',
+  title: 'core/scene/video/default-video-wall-scene/DefaultVideoWallSceneLandscape',
   component: DefaultVideoWallSceneLandscape,
   args,
 }

package/src/core/scene/video/{default-video-wall-scene.tsx → default-video-wall-scene/default-video-wall-scene.tsx}

@@ -2,13 +2,13 @@ import type { ComponentProps } from 'react'
 
 import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from './default-video-scene'
+import { DefaultVideoScene, componentMetadata as baseComponentMetadata } from '../default-video-scene/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',
+  sourceFile: 'src/core/scene/video/default-video-wall-scene/default-video-wall-scene.tsx',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'wall', 'multi'])),
 }
 

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

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

package/src/storybook/remotion-preview.tsx

@@ -197,6 +197,50 @@ export function Img({
   return <img {...rest} src={src} alt={alt} 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,

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>
-      )
-    },
-  }),
-)