@vibecuting/video-project-core 0.1.26 → 0.1.28

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

@@ -0,0 +1,432 @@
+import type { ReactNode } from 'react'
+import { cloneElement, isValidElement } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+import { spring, useCurrentFrame, useVideoConfig } from 'remotion'
+
+import { BaseRemotionScene, SceneMotionLayer, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../base'
+import { defineSceneComponent } from '../../../plugins/scene-component'
+
+export interface DefaultLivePhotoSceneProps extends BaseRemotionSceneProps {
+  sceneId?: string
+  sceneName?: string
+  title?: string
+  subtitle?: string
+  badge?: string
+  image: ReactNode
+  images?: ReactNode[]
+  variant?: 'live' | 'wall' | 'strip'
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultLivePhotoScene',
+  description: 'Apple-style live photo scene with a subtle push-in and luminous overlay',
+  sourceFile: 'src/core/scene/photo/default-live-photo-scene.tsx',
+  pluginKey: 'core.photo.live-photo',
+  tags: ['scene', 'photo', 'live-photo', 'image', 'apple'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultLivePhotoSceneProps',
+})
+
+function LivePhotoBadge({ label }: { label: string }) {
+  return (
+    <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,
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: 9999,
+          background: 'rgba(239,68,68,0.95)',
+          boxShadow: '0 0 0 4px rgba(239,68,68,0.14)',
+        }}
+      />
+      {label}
+    </div>
+  )
+}
+
+function renderCoverMedia(node: ReactNode) {
+  if (isValidElement(node)) {
+    const existingStyle = (node.props as { style?: Record<string, unknown> }).style ?? {}
+    return cloneElement(node, {
+      ...(node.props as Record<string, unknown>),
+      style: {
+        ...existingStyle,
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        display: 'block',
+        minWidth: 0,
+        minHeight: 0,
+      },
+    })
+  }
+
+  return <div style={{ width: '100%', height: '100%', minWidth: 0, minHeight: 0 }}>{node}</div>
+}
+
+export const DefaultLivePhotoScene = 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(),
+      image: z.any(),
+      images: z.array(z.any()).optional(),
+      variant: z.enum(['live', 'wall', 'strip']).optional(),
+      accent: z.string().optional(),
+      secondaryAccent: z.string().optional(),
+      textColor: z.string().optional(),
+    }),
+    component: function DefaultLivePhotoScene({
+      id,
+      name,
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      badge,
+      image,
+      images,
+      variant = 'live',
+      accent,
+      secondaryAccent,
+      textColor,
+    }: DefaultLivePhotoSceneProps) {
+      const runtime = useRemotionSceneRuntime()
+      const sceneConfig = useSceneConfig()
+      const frame = useCurrentFrame()
+      const { fps } = useVideoConfig()
+      const portrait = runtime.height > runtime.width
+      const animationProgress =
+        sceneConfig.sceneType === 'animation'
+          ? spring({
+              frame,
+              fps,
+              config: {
+                damping: 18,
+                mass: 0.8,
+                stiffness: 110,
+              },
+            })
+          : 1
+      const titleSize = Math.round(runtime.height * (portrait ? 0.034 : 0.04))
+      const subtitleSize = Math.round(runtime.height * 0.017)
+      const padding = Math.round(runtime.height * (portrait ? 0.012 : 0.014))
+      const liveMediaHeight = Math.max(240, Math.floor(runtime.height * (portrait ? 0.84 : 0.86)))
+      const revealFrame = 12
+      const liveBreath = sceneConfig.sceneType === 'animation' ? Math.sin((frame / fps) * Math.PI * 0.85) * 0.012 : 0
+      const liveFocus = sceneConfig.sceneType === 'animation' ? 1 - animationProgress : 0
+      const revealEase = sceneConfig.sceneType === 'animation' ? spring({ frame: Math.max(0, frame - revealFrame), fps, config: { damping: 22, mass: 0.7, stiffness: 170 } }) : 1
+      const imageScale = sceneConfig.sceneType === 'animation' ? 1.06 + revealEase * 0.24 + liveBreath : 1
+      const imageShiftY = sceneConfig.sceneType === 'animation' ? revealEase * 32 + liveBreath * 72 : 0
+      const imageShiftX = sceneConfig.sceneType === 'animation' ? (portrait ? -10 : -18) * revealEase + liveBreath * (portrait ? 18 : 28) : 0
+      const backgroundScale = sceneConfig.sceneType === 'animation' ? 1.28 + revealEase * 0.12 : 1.16
+      const spotlightOpacity = sceneConfig.sceneType === 'animation' ? 0.16 + revealEase * 0.12 : 0.08
+      const vignetteOpacity = sceneConfig.sceneType === 'animation' ? 0.42 + revealEase * 0.18 : 0.28
+      const imageSet = (images?.length ? images : [image]).slice(0, 4)
+
+      return (
+        <BaseRemotionScene
+      id={id ?? sceneId}
+      name={name ?? sceneName ?? title}
+          style={{
+            background:
+              portrait
+                ? `linear-gradient(180deg, ${accent ?? '#050505'} 0%, #020617 45%, #000000 100%)`
+                : `radial-gradient(circle at 50% 28%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#020617'} 48%, #000000 100%)`,
+            color: textColor ?? '#f8fafc',
+            padding,
+          }}
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: portrait ? 14 : 18,
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            {variant === 'wall' ? (
+              <div
+                style={{
+                  position: 'relative',
+                  width: '100%',
+                  height: '100%',
+                  aspectRatio: portrait ? '9 / 16' : '16 / 9',
+                  minWidth: 0,
+                  minHeight: 0,
+                  overflow: 'hidden',
+                  border: '1px solid rgba(255,255,255,0.1)',
+                  background: 'rgba(2,6,23,0.84)',
+                  display: 'grid',
+                  gridTemplateColumns: portrait ? '1fr 1fr' : '1.2fr 0.8fr',
+                  gridTemplateRows: portrait ? '1fr 1fr' : '1fr 1fr',
+                  gap: 6,
+                  padding,
+                }}
+              >
+                {imageSet.map((item, index) => (
+                  <SceneMotionLayer key={`wall-${index}`} variant="media" delayIndex={index}>
+                    <div
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        minHeight: 0,
+                        overflow: 'hidden',
+                        border: '1px solid rgba(255,255,255,0.06)',
+                        background: 'rgba(15,23,42,0.88)',
+                        transform: `scale(${1 + (1 - animationProgress) * 0.018})`,
+                      }}
+                    >
+                      {renderCoverMedia(item)}
+                    </div>
+                  </SceneMotionLayer>
+                ))}
+                <div style={{ position: 'absolute', inset: padding, display: 'flex', justifyContent: 'space-between', alignItems: 'start', pointerEvents: 'none' }}>
+                  <LivePhotoBadge label={badge ?? 'Photo Wall'} />
+                  <div style={{ fontSize: Math.round(runtime.height * 0.013), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>
+                    {imageSet.length} frames
+                  </div>
+                </div>
+              </div>
+            ) : variant === 'strip' ? (
+              <div
+                style={{
+                  position: 'relative',
+                  minWidth: 0,
+                  minHeight: 0,
+                  overflow: 'hidden',
+                  border: '1px solid rgba(255,255,255,0.14)',
+                  background: 'rgba(2,6,23,0.84)',
+                  display: 'grid',
+                  gridTemplateRows: 'auto 1fr auto',
+                  gap: 12,
+                  padding,
+                  flex: 1,
+                }}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+                  <LivePhotoBadge label={badge ?? 'Photo Strip'} />
+                  <div style={{ fontSize: Math.round(runtime.height * 0.013), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>
+                    Live sequence
+                  </div>
+                </div>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                    gap: 6,
+                    minWidth: 0,
+                    minHeight: 0,
+                  }}
+                >
+                  {imageSet.map((item, index) => (
+                    <SceneMotionLayer key={`strip-${index}`} variant="media" delayIndex={index}>
+                      <div
+                        style={{
+                        width: '100%',
+                        height: '100%',
+                        minHeight: 0,
+                        overflow: 'hidden',
+                        border: '1px solid rgba(255,255,255,0.06)',
+                        background: 'rgba(15,23,42,0.88)',
+                        transform: `translate3d(0, ${(1 - animationProgress) * 8}px, 0) scale(${1 + (1 - animationProgress) * 0.02})`,
+                      }}
+                      >
+                        {renderCoverMedia(item)}
+                      </div>
+                    </SceneMotionLayer>
+                  ))}
+                </div>
+                <div style={{ display: 'grid', gap: 8 }}>
+                  {title ? (
+                    <SceneMotionLayer variant="hero-title">
+                      <div style={{ fontSize: titleSize * 0.82, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.95 }}>{title}</div>
+                    </SceneMotionLayer>
+                  ) : null}
+                  {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.84 }}>{subtitle}</div> : null}
+                </div>
+              </div>
+            ) : (
+              <div
+                style={{
+                  position: 'relative',
+                  width: '100%',
+                  height: liveMediaHeight,
+                  minHeight: liveMediaHeight,
+                  minWidth: 0,
+                  overflow: 'hidden',
+                  border: '1px solid rgba(255,255,255,0.1)',
+                  background: 'rgba(2,6,23,0.84)',
+                  flex: 1,
+                }}
+              >
+                <SceneMotionLayer
+                  variant="media"
+                  style={{
+                    position: 'absolute',
+                    inset: '-10%',
+                    opacity: sceneConfig.sceneType === 'animation' ? 0.48 : 0.2,
+                    filter: 'blur(32px) saturate(1.16) brightness(0.92)',
+                    transform: `translate3d(${imageShiftX * 0.28}px, ${imageShiftY * 0.18}px, 0) scale(${backgroundScale})`,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      transform: `translate3d(${imageShiftX * 0.4}px, ${imageShiftY * 0.32}px, 0) scale(${imageScale + 0.14})`,
+                      transformOrigin: 'center center',
+                    }}
+                  >
+                    {renderCoverMedia(image)}
+                  </div>
+                </SceneMotionLayer>
+
+                <SceneMotionLayer
+                  variant="media"
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    transform: `translate3d(${imageShiftX}px, ${imageShiftY}px, 0) scale(${imageScale})`,
+                  }}
+                >
+                  {renderCoverMedia(image)}
+                </SceneMotionLayer>
+
+                <div
+                  aria-hidden="true"
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background:
+                      sceneConfig.sceneType === 'animation'
+                        ? `radial-gradient(circle at 50% 20%, rgba(255,255,255,${spotlightOpacity}) 0%, rgba(255,255,255,0.04) 18%, rgba(2,6,23,0.05) 34%, rgba(2,6,23,${vignetteOpacity}) 100%)`
+                        : 'linear-gradient(180deg, rgba(2,6,23,0.08) 0%, rgba(2,6,23,0.14) 38%, rgba(2,6,23,0.62) 100%)',
+                    pointerEvents: 'none',
+                  }}
+                />
+
+                <div
+                  aria-hidden="true"
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    border: '1px solid rgba(255,255,255,0.08)',
+                    pointerEvents: 'none',
+                  }}
+                />
+
+                <div
+                  style={{
+                    position: 'absolute',
+                    top: padding,
+                    left: padding,
+                    display: 'grid',
+                    gap: 8,
+                    zIndex: 2,
+                  }}
+                >
+                  <LivePhotoBadge label={badge ?? (sceneConfig.sceneType === 'animation' ? 'Live Photo' : 'Photo')} />
+                </div>
+
+                <div
+                  style={{
+                    position: 'absolute',
+                    left: padding,
+                    right: padding,
+                    bottom: padding,
+                    display: 'grid',
+                    gap: 8,
+                    zIndex: 2,
+                  }}
+                >
+                  {title ? (
+                    <SceneMotionLayer variant="hero-title">
+                      <div style={{ fontSize: titleSize, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.95 }}>
+                        {title}
+                      </div>
+                    </SceneMotionLayer>
+                  ) : null}
+                  {subtitle ? (
+                    <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                      <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.84, maxWidth: portrait ? '88%' : '56%' }}>
+                        {subtitle}
+                      </div>
+                    </SceneMotionLayer>
+                  ) : null}
+                </div>
+              </div>
+            )}
+
+            {variant === 'live' ? null : (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  gap: 16,
+                  minWidth: 0,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: Math.round(runtime.height * 0.014),
+                    letterSpacing: '0.24em',
+                    textTransform: 'uppercase',
+                    opacity: 0.6,
+                    minWidth: 0,
+                  }}
+                >
+                  {sceneConfig.sceneType === 'animation' ? 'Animation preview' : 'Static preview'}
+                </div>
+                <div
+                  style={{
+                    fontSize: Math.round(runtime.height * 0.014),
+                    letterSpacing: '0.18em',
+                    textTransform: 'uppercase',
+                    opacity: 0.46,
+                    minWidth: 0,
+                  }}
+                >
+                  {sceneConfig.sceneInFrames} frames
+                </div>
+              </div>
+            )}
+          </section>
+        </BaseRemotionScene>
+      )
+    },
+  }),
+)

package/src/core/scene/photo/default-photo-strip-scene-Horizontal.tsx

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

package/src/core/scene/photo/default-photo-strip-scene-Landscape.tsx

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

package/src/core/scene/photo/default-photo-strip-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultPhotoStripSceneHorizontal } from './default-photo-strip-scene-Horizontal'
+import { DefaultPhotoStripSceneLandscape } from './default-photo-strip-scene-Landscape'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const image = <img src={photoUrl} alt="Photo strip" />
+
+const args = {
+  title: 'Three Beats',
+  subtitle: 'A tight strip of stills for storytelling, chapter markers, or memory sequencing.',
+  badge: 'Strip',
+  image,
+  images: [image, image, image],
+}
+
+const meta = {
+  title: 'core/scene/photo/DefaultPhotoStripSceneLandscape',
+  component: DefaultPhotoStripSceneLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {
+  render: (storyArgs: typeof args) => <DefaultPhotoStripSceneLandscape {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '16:9' },
+}
+export const Animated = {
+  render: (storyArgs: typeof args) => <DefaultPhotoStripSceneLandscape {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' },
+}
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultPhotoStripSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultPhotoStripSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultLivePhotoScene, componentMetadata as baseComponentMetadata } from './default-live-photo-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultPhotoStripScene',
+  description: 'Apple-style photo strip scene',
+  sourceFile: 'src/core/scene/photo/default-photo-strip-scene.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'strip', 'sequence'])),
+}
+
+export const DefaultPhotoStripScene = VideoComponent(componentMetadata)(function DefaultPhotoStripScene(
+  props: ComponentProps<typeof DefaultLivePhotoScene>,
+) {
+  return <DefaultLivePhotoScene {...props} variant="strip" />
+})

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { DefaultPhotoWallSceneHorizontal } from './default-photo-wall-scene-Horizontal'
+import { DefaultPhotoWallSceneLandscape } from './default-photo-wall-scene-Landscape'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const image = <img src={photoUrl} alt="Photo wall" />
+
+const args = {
+  title: 'Four Moments',
+  subtitle: 'A photo wall that can duplicate or mix multiple stills with a soft cinematic drift.',
+  badge: 'Wall',
+  image,
+  images: [image, image, image, image],
+}
+
+const meta = {
+  title: 'core/scene/photo/DefaultPhotoWallSceneLandscape',
+  component: DefaultPhotoWallSceneLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {
+  render: (storyArgs: typeof args) => <DefaultPhotoWallSceneLandscape {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '16:9' },
+}
+export const Animated = {
+  render: (storyArgs: typeof args) => <DefaultPhotoWallSceneLandscape {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' },
+}
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultPhotoWallSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultPhotoWallSceneHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

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

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

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

@@ -0,0 +1,44 @@
+import { DefaultEffectsPhotoSceneHorizontal } from './default-effects-photo-scene-Horizontal'
+
+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',
+  component: DefaultEffectsPhotoSceneHorizontal,
+  args: {
+    title: 'Golden Echo',
+    subtitle: 'Layered photo grading with glow, grain, warmth and a cinematic vignette.',
+    badge: 'Effects Photo',
+    imageSrc: photoUrl,
+    effects: [
+      { type: 'glow', intensity: 0.55 },
+      { type: 'vignette', intensity: 0.65 },
+      { type: 'grain', intensity: 0.12 },
+      { type: 'warmth', intensity: 0.18, hue: '#f59e0b' },
+    ],
+    accent: '#020617',
+    secondaryAccent: '#7c3aed',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}