@vibecuting/video-project-core 0.1.29 → 0.1.31

package/src/core/scene/index.ts

@@ -1,5 +1,6 @@
 export * from './2dscene'
 export * from './3dscene'
+export * from './html-in-canvas'
 export * from './photo'
 export * from './video'
 export * from './slide'

package/src/core/scene/photo/3dvr-photo/{default-3dvr-photo-scene.stories.tsx → default-3dvr-photo-scene/default-3dvr-photo-scene.stories.tsx}

@@ -1,9 +1,9 @@
-import { Default3DVRPhotoSceneLandscape } from './default-3dvr-photo-scene-Landscape'
+import { Default3DVRPhotoSceneLandscape } from '../default-3dvr-photo-scene-Landscape/default-3dvr-photo-scene-Landscape'
 
 const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
 
 const meta = {
-  title: 'core/scene/photo/3dvr-photo/Default3DVRPhotoSceneLandscape',
+  title: 'core/scene/photo/3dvr-photo/default-3dvr-photo-scene/Default3DVRPhotoSceneLandscape',
   component: Default3DVRPhotoSceneLandscape,
   args: {
     title: 'Stereo Window',

package/src/core/scene/photo/3dvr-photo/{default-3dvr-photo-scene.tsx → default-3dvr-photo-scene/default-3dvr-photo-scene.tsx}

@@ -3,8 +3,8 @@ import { z } from 'zod'
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 import { Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'
 
-import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../../base'
-import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../../../base'
+import { defineSceneComponent } from '../../../../../plugins/scene-component'
 
 export interface Default3DVRPhotoSceneProps extends BaseRemotionSceneProps {
   sceneId?: string
@@ -30,7 +30,7 @@ export const componentMetadata = defineScenePluginMetadata({
   resourceKind: 'scene',
   name: 'Default3DVRPhotoScene',
   description: 'Photo scene with 3D VR camera controls and perspective motion',
-  sourceFile: 'src/core/scene/photo/3dvr-photo/default-3dvr-photo-scene.tsx',
+  sourceFile: 'src/core/scene/photo/3dvr-photo/default-3dvr-photo-scene/default-3dvr-photo-scene.tsx',
   pluginKey: 'core.photo.3dvr-photo',
   tags: ['scene', 'photo', '3d', 'vr', 'perspective'],
   aspectRatio: '16:9',
@@ -89,7 +89,7 @@ export const Default3DVRPhotoScene = VideoComponent(componentMetadata)(
       const { fps } = useVideoConfig()
       const portrait = runtime.height > runtime.width
       const animated = sceneConfig.sceneType === 'animation'
-      const entrance = sceneConfig.sceneType === 'animation' ? spring({ frame, fps, delay: 4, config: { damping: 18, mass: 0.8, stiffness: 120 } }) : 1
+      const entrance = sceneConfig.sceneType === 'animation' ? spring({ frame: Math.max(0, frame - 4), fps, config: { damping: 18, mass: 0.8, stiffness: 120 } }) : 1
       const orbit = animated ? Math.sin((frame / fps) * Math.PI * 0.55) : 0
       const cameraYaw = yaw + orbit * 4 + (1 - entrance) * (portrait ? -3 : -4)
       const cameraPitch = pitch + Math.sin((frame / fps) * Math.PI * 0.35) * 1.5 + (1 - entrance) * 1.6

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

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

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

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

package/src/core/scene/photo/3dvr-photo/{default-3dvr-photo-scene-Landscape.tsx → default-3dvr-photo-scene-Landscape/default-3dvr-photo-scene-Landscape.tsx}

@@ -1,20 +1,20 @@
-import type { ComponentProps } from 'react'
+import type { Default3DVRPhotoSceneProps } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
 
 import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { Default3DVRPhotoScene, componentMetadata as baseComponentMetadata } from './default-3dvr-photo-scene'
+import { Default3DVRPhotoScene, componentMetadata as baseComponentMetadata } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
 
 export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'Default3DVRPhotoSceneLandscape',
   description: '3D VR photo scene for 16:9 landscape previews with a wide cinematic layout',
-  sourceFile: 'src/core/scene/photo/3dvr-photo/default-3dvr-photo-scene-Landscape.tsx',
+  sourceFile: 'src/core/scene/photo/3dvr-photo/default-3dvr-photo-scene-Landscape/default-3dvr-photo-scene-Landscape.tsx',
   aspectRatio: '16:9',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
 }
 
 export const Default3DVRPhotoSceneLandscape = VideoComponent(componentMetadata)(function Default3DVRPhotoSceneLandscape(
-  props: ComponentProps<typeof Default3DVRPhotoScene>,
+  props: Default3DVRPhotoSceneProps,
 ) {
   return <Default3DVRPhotoScene {...props} />
 })

package/src/core/scene/photo/3dvr-photo/default-dolly-3dvr-photo-scene/default-dolly-3dvr-photo-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultDolly3DVRPhotoScene } from './default-dolly-3dvr-photo-scene'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+
+const meta = {
+  title: 'core/scene/photo/3dvr-photo/default-dolly-3dvr-photo-scene/DefaultDolly3DVRPhotoScene',
+  component: DefaultDolly3DVRPhotoScene,
+  args: {
+    title: 'Dolly Frame',
+    subtitle: 'A closer dolly cut with tighter focus and deeper framing.',
+    badge: 'Dolly',
+    imageSrc: photoUrl,
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/photo/3dvr-photo/default-dolly-3dvr-photo-scene/default-dolly-3dvr-photo-scene.tsx

@@ -0,0 +1,36 @@
+import type { Default3DVRPhotoSceneProps } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { Default3DVRPhotoScene, componentMetadata as baseComponentMetadata } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
+
+type BaseProps = Default3DVRPhotoSceneProps
+
+export interface DefaultDolly3DVRPhotoSceneProps extends BaseProps {
+  dollyDepth?: number
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultDolly3DVRPhotoScene',
+  description: '3D VR photo scene with a closer dolly feel and tighter framing',
+  sourceFile: 'src/core/scene/photo/3dvr-photo/default-dolly-3dvr-photo-scene/default-dolly-3dvr-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'dolly', 'single-style'])),
+}
+
+export const DefaultDolly3DVRPhotoScene = VideoComponent(componentMetadata)(function DefaultDolly3DVRPhotoScene(
+  props: DefaultDolly3DVRPhotoSceneProps,
+) {
+  const { dollyDepth = 34, depth, zoom, perspective, focusX, focusY, ...rest } = props
+
+  return (
+    <Default3DVRPhotoScene
+      {...rest}
+      depth={depth ?? dollyDepth}
+      zoom={zoom ?? 1.12}
+      perspective={perspective ?? 1120}
+      focusX={focusX ?? 0.5}
+      focusY={focusY ?? 0.48}
+    />
+  )
+})

package/src/core/scene/photo/3dvr-photo/default-orbit-3dvr-photo-scene/default-orbit-3dvr-photo-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultOrbit3DVRPhotoScene } from './default-orbit-3dvr-photo-scene'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+
+const meta = {
+  title: 'core/scene/photo/3dvr-photo/default-orbit-3dvr-photo-scene/DefaultOrbit3DVRPhotoScene',
+  component: DefaultOrbit3DVRPhotoScene,
+  args: {
+    title: 'Orbit Frame',
+    subtitle: 'A stronger orbit motion with a cinematic three-dimensional feel.',
+    badge: 'Orbit',
+    imageSrc: photoUrl,
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/photo/3dvr-photo/default-orbit-3dvr-photo-scene/default-orbit-3dvr-photo-scene.tsx

@@ -0,0 +1,34 @@
+import type { Default3DVRPhotoSceneProps } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { Default3DVRPhotoScene, componentMetadata as baseComponentMetadata } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
+
+type BaseProps = Default3DVRPhotoSceneProps
+
+export interface DefaultOrbit3DVRPhotoSceneProps extends BaseProps {
+  orbitStrength?: number
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultOrbit3DVRPhotoScene',
+  description: '3D VR photo scene with stronger orbit motion and parallax depth',
+  sourceFile: 'src/core/scene/photo/3dvr-photo/default-orbit-3dvr-photo-scene/default-orbit-3dvr-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'orbit', 'single-style'])),
+}
+
+export const DefaultOrbit3DVRPhotoScene = VideoComponent(componentMetadata)(function DefaultOrbit3DVRPhotoScene(
+  props: DefaultOrbit3DVRPhotoSceneProps,
+) {
+  const { orbitStrength = 1.25, yaw, pitch, roll, ...rest } = props
+
+  return (
+    <Default3DVRPhotoScene
+      {...rest}
+      yaw={(yaw ?? 12) * orbitStrength}
+      pitch={(pitch ?? 4) + 1}
+      roll={(roll ?? 0) + 0.3}
+    />
+  )
+})

package/src/core/scene/photo/3dvr-photo/default-poster-3dvr-photo-scene/default-poster-3dvr-photo-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultPoster3DVRPhotoScene } from './default-poster-3dvr-photo-scene'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+
+const meta = {
+  title: 'core/scene/photo/3dvr-photo/default-poster-3dvr-photo-scene/DefaultPoster3DVRPhotoScene',
+  component: DefaultPoster3DVRPhotoScene,
+  args: {
+    title: 'Poster Frame',
+    subtitle: 'Flatter framing that behaves more like a print or poster.',
+    badge: 'Poster',
+    imageSrc: photoUrl,
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/photo/3dvr-photo/default-poster-3dvr-photo-scene/default-poster-3dvr-photo-scene.tsx

@@ -0,0 +1,39 @@
+import type { Default3DVRPhotoSceneProps } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { Default3DVRPhotoScene, componentMetadata as baseComponentMetadata } from '../default-3dvr-photo-scene/default-3dvr-photo-scene'
+
+type BaseProps = Default3DVRPhotoSceneProps
+
+export interface DefaultPoster3DVRPhotoSceneProps extends BaseProps {
+  posterDepth?: number
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultPoster3DVRPhotoScene',
+  description: '3D VR photo scene tuned toward a flatter poster-like presentation',
+  sourceFile: 'src/core/scene/photo/3dvr-photo/default-poster-3dvr-photo-scene/default-poster-3dvr-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'poster', 'single-style'])),
+}
+
+export const DefaultPoster3DVRPhotoScene = VideoComponent(componentMetadata)(function DefaultPoster3DVRPhotoScene(
+  props: DefaultPoster3DVRPhotoSceneProps,
+) {
+  const { posterDepth = 14, yaw, pitch, roll, perspective, zoom, focusX, focusY, ...rest } = props
+
+  return (
+    <Default3DVRPhotoScene
+      {...rest}
+      yaw={yaw ?? 6}
+      pitch={pitch ?? 1.5}
+      roll={roll ?? 0}
+      perspective={perspective ?? 840}
+      zoom={zoom ?? 1.04}
+      depth={posterDepth}
+      focusX={focusX ?? 0.5}
+      focusY={focusY ?? 0.5}
+    />
+  )
+})

package/src/core/scene/photo/3dvr-photo/index.ts

@@ -1,3 +1,6 @@
-export { Default3DVRPhotoScene, componentMetadata as Default3DVRPhotoSceneMetadata } from './default-3dvr-photo-scene'
-export { Default3DVRPhotoSceneLandscape, componentMetadata as Default3DVRPhotoSceneLandscapeMetadata } from './default-3dvr-photo-scene-Landscape'
-export { Default3DVRPhotoSceneHorizontal, componentMetadata as Default3DVRPhotoSceneHorizontalMetadata } from './default-3dvr-photo-scene-Horizontal'
+export { Default3DVRPhotoScene, componentMetadata as Default3DVRPhotoSceneMetadata } from './default-3dvr-photo-scene/default-3dvr-photo-scene'
+export { Default3DVRPhotoSceneLandscape, componentMetadata as Default3DVRPhotoSceneLandscapeMetadata } from './default-3dvr-photo-scene-Landscape/default-3dvr-photo-scene-Landscape'
+export { Default3DVRPhotoSceneHorizontal, componentMetadata as Default3DVRPhotoSceneHorizontalMetadata } from './default-3dvr-photo-scene-Horizontal/default-3dvr-photo-scene-Horizontal'
+export { DefaultOrbit3DVRPhotoScene, componentMetadata as DefaultOrbit3DVRPhotoSceneMetadata } from './default-orbit-3dvr-photo-scene/default-orbit-3dvr-photo-scene'
+export { DefaultDolly3DVRPhotoScene, componentMetadata as DefaultDolly3DVRPhotoSceneMetadata } from './default-dolly-3dvr-photo-scene/default-dolly-3dvr-photo-scene'
+export { DefaultPoster3DVRPhotoScene, componentMetadata as DefaultPoster3DVRPhotoSceneMetadata } from './default-poster-3dvr-photo-scene/default-poster-3dvr-photo-scene'

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

@@ -0,0 +1,24 @@
+import { DefaultChromeEffectsPhotoScene } from './default-chrome-effects-photo-scene'
+
+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/default-chrome-effects-photo-scene/DefaultChromeEffectsPhotoScene',
+  component: DefaultChromeEffectsPhotoScene,
+  args: {
+    title: 'Chrome Shine',
+    subtitle: 'Metallic contrast with brighter highlights and polish.',
+    badge: 'Chrome',
+    imageSrc: photoUrl,
+    intensity: 0.56,
+    hue: '#f8fafc',
+    accent: '#020617',
+    secondaryAccent: '#94a3b8',
+  },
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Both = { parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'both' } }

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

@@ -0,0 +1,39 @@
+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/default-effects-photo-scene'
+
+type BaseProps = DefaultEffectsPhotoSceneProps
+
+export interface DefaultChromeEffectsPhotoSceneProps extends Omit<BaseProps, 'effects'> {
+  intensity?: number
+  hue?: string
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultChromeEffectsPhotoScene',
+  description: 'Photo scene focused on polished chrome-style contrast and highlights',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-chrome-effects-photo-scene/default-chrome-effects-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'chrome', 'single-effect'])),
+}
+
+export const DefaultChromeEffectsPhotoScene = VideoComponent(componentMetadata)(function DefaultChromeEffectsPhotoScene(
+  props: DefaultChromeEffectsPhotoSceneProps,
+) {
+  const { intensity = 0.56, hue = '#f8fafc', ...rest } = props
+
+  return (
+    <DefaultEffectsPhotoScene
+      {...rest}
+      effects={[
+        {
+          type: 'chrome',
+          intensity,
+          hue,
+        },
+      ]}
+    />
+  )
+})

package/src/core/scene/photo/effects-photo/default-cool-tone-effects-photo-scene/default-cool-tone-effects-photo-scene.stories.tsx

@@ -0,0 +1,24 @@
+import { DefaultCoolToneEffectsPhotoScene } from './default-cool-tone-effects-photo-scene'
+
+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/default-cool-tone-effects-photo-scene/DefaultCoolToneEffectsPhotoScene',
+  component: DefaultCoolToneEffectsPhotoScene,
+  args: {
+    title: 'Cool Tone',
+    subtitle: 'Blue-green graded still with a colder film bias.',
+    badge: 'Cool Tone',
+    imageSrc: photoUrl,
+    intensity: 0.66,
+    hue: '#0f172a',
+    accent: '#020617',
+    secondaryAccent: '#38bdf8',
+  },
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Both = { parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'both' } }

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

@@ -0,0 +1,39 @@
+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/default-effects-photo-scene'
+
+type BaseProps = DefaultEffectsPhotoSceneProps
+
+export interface DefaultCoolToneEffectsPhotoSceneProps extends Omit<BaseProps, 'effects'> {
+  intensity?: number
+  hue?: string
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCoolToneEffectsPhotoScene',
+  description: 'Photo scene focused on a cool blue-green tonal palette',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-cool-tone-effects-photo-scene/default-cool-tone-effects-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'cool-tone', 'single-effect'])),
+}
+
+export const DefaultCoolToneEffectsPhotoScene = VideoComponent(componentMetadata)(function DefaultCoolToneEffectsPhotoScene(
+  props: DefaultCoolToneEffectsPhotoSceneProps,
+) {
+  const { intensity = 0.66, hue = '#0f172a', ...rest } = props
+
+  return (
+    <DefaultEffectsPhotoScene
+      {...rest}
+      effects={[
+        {
+          type: 'cool-tone',
+          intensity,
+          hue,
+        },
+      ]}
+    />
+  )
+})

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

@@ -0,0 +1,23 @@
+import { DefaultDreamEffectsPhotoScene } from './default-dream-effects-photo-scene'
+
+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/default-dream-effects-photo-scene/DefaultDreamEffectsPhotoScene',
+  component: DefaultDreamEffectsPhotoScene,
+  args: {
+    title: 'Dream Blur',
+    subtitle: 'Soft haze and blur for a cinematic dream sequence.',
+    badge: 'Dream',
+    imageSrc: photoUrl,
+    intensity: 0.5,
+    accent: '#020617',
+    secondaryAccent: '#a855f7',
+  },
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Both = { parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'both' } }

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

@@ -0,0 +1,37 @@
+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/default-effects-photo-scene'
+
+type BaseProps = DefaultEffectsPhotoSceneProps
+
+export interface DefaultDreamEffectsPhotoSceneProps extends Omit<BaseProps, 'effects'> {
+  intensity?: number
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultDreamEffectsPhotoScene',
+  description: 'Photo scene focused on a dreamy blur and haze treatment',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-dream-effects-photo-scene/default-dream-effects-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'dream', 'single-effect'])),
+}
+
+export const DefaultDreamEffectsPhotoScene = VideoComponent(componentMetadata)(function DefaultDreamEffectsPhotoScene(
+  props: DefaultDreamEffectsPhotoSceneProps,
+) {
+  const { intensity = 0.5, ...rest } = props
+
+  return (
+    <DefaultEffectsPhotoScene
+      {...rest}
+      effects={[
+        {
+          type: 'dream',
+          intensity,
+        },
+      ]}
+    />
+  )
+})

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

@@ -0,0 +1,25 @@
+import { DefaultDuotoneEffectsPhotoScene } from './default-duotone-effects-photo-scene'
+
+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/default-duotone-effects-photo-scene/DefaultDuotoneEffectsPhotoScene',
+  component: DefaultDuotoneEffectsPhotoScene,
+  args: {
+    title: 'Duotone Contrast',
+    subtitle: 'Blue-orange split tone with strong tonal shaping.',
+    badge: 'Duotone',
+    imageSrc: photoUrl,
+    intensity: 0.76,
+    hue: '#2563eb',
+    secondaryHue: '#f97316',
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const Animated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Both = { parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'both' } }

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

@@ -0,0 +1,41 @@
+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/default-effects-photo-scene'
+
+type BaseProps = DefaultEffectsPhotoSceneProps
+
+export interface DefaultDuotoneEffectsPhotoSceneProps extends Omit<BaseProps, 'effects'> {
+  intensity?: number
+  hue?: string
+  secondaryHue?: string
+}
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultDuotoneEffectsPhotoScene',
+  description: 'Photo scene focused on duotone color grading with strong tonal separation',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-duotone-effects-photo-scene/default-duotone-effects-photo-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'duotone', 'single-effect'])),
+}
+
+export const DefaultDuotoneEffectsPhotoScene = VideoComponent(componentMetadata)(function DefaultDuotoneEffectsPhotoScene(
+  props: DefaultDuotoneEffectsPhotoSceneProps,
+) {
+  const { intensity = 0.76, hue = '#2563eb', secondaryHue = '#f97316', ...rest } = props
+
+  return (
+    <DefaultEffectsPhotoScene
+      {...rest}
+      effects={[
+        {
+          type: 'duotone',
+          intensity,
+          hue,
+          secondaryHue,
+        },
+      ]}
+    />
+  )
+})

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

@@ -1,9 +1,9 @@
-import { DefaultEffectsPhotoSceneLandscape } from './default-effects-photo-scene-Landscape'
+import { DefaultEffectsPhotoSceneLandscape } from '../default-effects-photo-scene-Landscape/default-effects-photo-scene-Landscape'
 
 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/DefaultEffectsPhotoSceneLandscape',
+  title: 'core/scene/photo/effects-photo/default-effects-photo-scene/DefaultEffectsPhotoSceneLandscape',
   component: DefaultEffectsPhotoSceneLandscape,
   args: {
     title: 'Golden Echo',