@vibecuting/video-project-core 0.1.26 → 0.1.28

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

@@ -0,0 +1,46 @@
+import { Default3DVRPhotoSceneLandscape } from './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',
+  component: Default3DVRPhotoSceneLandscape,
+  args: {
+    title: 'Stereo Window',
+    subtitle: '3D camera controls over a still frame with subtle orbit, pitch and depth.',
+    badge: '3D VR Photo',
+    imageSrc: photoUrl,
+    yaw: 12,
+    pitch: 4,
+    roll: 0,
+    perspective: 980,
+    zoom: 1,
+    depth: 26,
+    focusX: 0.5,
+    focusY: 0.45,
+    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: '16:9',
+    scenePreviewMode: 'both',
+  },
+}

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

@@ -0,0 +1,255 @@
+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'
+
+export interface Default3DVRPhotoSceneProps extends BaseRemotionSceneProps {
+  sceneId?: string
+  sceneName?: string
+  title?: string
+  subtitle?: string
+  badge?: string
+  imageSrc: string
+  yaw?: number
+  pitch?: number
+  roll?: number
+  perspective?: number
+  zoom?: number
+  depth?: number
+  focusX?: number
+  focusY?: number
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+}
+
+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',
+  pluginKey: 'core.photo.3dvr-photo',
+  tags: ['scene', 'photo', '3d', 'vr', 'perspective'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'Default3DVRPhotoSceneProps',
+})
+
+export const Default3DVRPhotoScene = 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(),
+      yaw: z.number().optional(),
+      pitch: z.number().optional(),
+      roll: z.number().optional(),
+      perspective: z.number().optional(),
+      zoom: z.number().optional(),
+      depth: z.number().optional(),
+      focusX: z.number().min(0).max(1).optional(),
+      focusY: z.number().min(0).max(1).optional(),
+      accent: z.string().optional(),
+      secondaryAccent: z.string().optional(),
+      textColor: z.string().optional(),
+    }),
+    component: function Default3DVRPhotoScene({
+      id,
+      name,
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      badge,
+      imageSrc,
+      yaw = 12,
+      pitch = 4,
+      roll = 0,
+      perspective = 980,
+      zoom = 1,
+      depth = 24,
+      focusX = 0.5,
+      focusY = 0.5,
+      accent,
+      secondaryAccent,
+      textColor,
+    }: Default3DVRPhotoSceneProps) {
+      const runtime = useRemotionSceneRuntime()
+      const sceneConfig = useSceneConfig()
+      const frame = useCurrentFrame()
+      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 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
+      const cameraRoll = roll + Math.sin((frame / fps) * Math.PI * 0.25) * 0.45
+      const cameraZoom = zoom + entrance * 0.06 + (1 - entrance) * 0.02
+      const titleSize = Math.round(runtime.height * (portrait ? 0.034 : 0.04))
+      const subtitleSize = Math.round(runtime.height * 0.017)
+      const focusOffsetX = interpolate(focusX, [0, 1], [-12, 12])
+      const focusOffsetY = interpolate(focusY, [0, 1], [12, -12])
+      const imageFilter = animated ? 'brightness(1.08) contrast(1.04) saturate(1.08)' : 'brightness(2.05) contrast(1.22) saturate(1.3)'
+      const framePaddingX = Math.round(runtime.width * (portrait ? 0.025 : 0.02))
+      const framePaddingY = Math.round(runtime.height * (portrait ? 0.02 : 0.018))
+      const mainFrameLeft = framePaddingX
+      const mainFrameTop = framePaddingY
+      const mainFrameWidth = Math.max(1, runtime.width - framePaddingX * 2)
+      const mainFrameHeight = Math.max(1, runtime.height - framePaddingY * 2)
+      const mainFrameShadow = portrait
+        ? '0 26px 90px rgba(0,0,0,0.38)'
+        : '0 34px 110px rgba(0,0,0,0.42)'
+      const imageTransform = animated
+        ? `translate3d(${focusOffsetX}px, ${focusOffsetY}px, ${depth}px) rotateX(${cameraPitch}deg) rotateY(${cameraYaw}deg) rotateZ(${cameraRoll}deg) scale(${cameraZoom})`
+        : `translate3d(${focusOffsetX * 0.4}px, ${focusOffsetY * 0.35}px, ${depth * 0.45}px) rotateX(${pitch * 0.15}deg) rotateY(${yaw * 0.12}deg) rotateZ(${roll * 0.08}deg) scale(${1.01 + (zoom - 1) * 0.4})`
+
+      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% 20%, ${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.12)',
+              background: 'rgba(2,6,23,0.84)',
+              perspective: `${perspective}px`,
+              transformStyle: 'preserve-3d',
+              isolation: 'isolate',
+            }}
+          >
+            <div
+              aria-hidden="true"
+              style={{
+              position: 'absolute',
+                top: Math.max(0, mainFrameTop - 18),
+                left: Math.max(0, mainFrameLeft - 18),
+                width: Math.max(1, mainFrameWidth + 36),
+                height: Math.max(1, mainFrameHeight + 36),
+                opacity: animated ? 0.2 + entrance * 0.08 : 0.04,
+                filter: animated ? 'blur(18px) saturate(1.12) brightness(0.95)' : 'blur(10px) saturate(1.05) brightness(1.05)',
+                transform: `translate3d(${focusOffsetX * 0.3}px, ${focusOffsetY * 0.22}px, -20px) scale(${1.05 + entrance * 0.04})`,
+              }}
+            >
+              <Img
+                src={imageSrc}
+                alt={title ?? '3D VR photo'}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                position: 'absolute',
+                top: mainFrameTop,
+                left: mainFrameLeft,
+                width: mainFrameWidth,
+                height: mainFrameHeight,
+                transformStyle: 'preserve-3d',
+                transform: imageTransform,
+                border: animated ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(255,255,255,0.2)',
+                backgroundColor: animated ? 'rgba(2,6,23,0.2)' : 'rgba(248,250,252,0.08)',
+                backgroundImage: `url(${imageSrc})`,
+                backgroundSize: 'cover',
+                backgroundPosition: `${Math.round(focusX * 100)}% ${Math.round((1 - focusY) * 100)}%`,
+                backgroundRepeat: 'no-repeat',
+                boxShadow: animated ? '0 22px 70px rgba(0,0,0,0.32)' : '0 14px 42px rgba(0,0,0,0.2)',
+                overflow: 'hidden',
+                borderRadius: 0,
+                filter: imageFilter,
+              }}
+            >
+            </div>
+
+            <div
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background:
+                  animated
+                    ? 'radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 26%, rgba(2,6,23,0.14) 52%, rgba(2,6,23,0.46) 100%)'
+                    : 'radial-gradient(circle at center, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.00) 44%, rgba(2,6,23,0.01) 76%, rgba(2,6,23,0.04) 100%)',
+                pointerEvents: 'none',
+              }}
+            />
+
+            <div
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: mainFrameTop,
+                left: mainFrameLeft,
+                width: mainFrameWidth,
+                height: mainFrameHeight,
+                border: '1px solid rgba(255,255,255,0.18)',
+                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 ?? '3D VR 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/3dvr-photo/index.ts

@@ -0,0 +1,3 @@
+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'

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

@@ -0,0 +1,33 @@
+import { DefaultLivePhotoSceneHorizontal } from './default-live-photo-scene-Horizontal'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const photo = <img src={photoUrl} alt="Night Street" />
+
+const meta = {
+  title: 'core/scene/photo/DefaultLivePhotoSceneHorizontal',
+  component: DefaultLivePhotoSceneHorizontal,
+  args: {
+    title: 'Night Street',
+    subtitle: 'Portrait live-photo treatment with a tighter frame and the same subtle motion language.',
+    badge: 'Live Photo',
+    accent: '#020617',
+    secondaryAccent: '#7c3aed',
+  },
+}
+
+export default meta
+
+export const Default = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultLivePhotoSceneHorizontal {...storyArgs} image={photo} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Animated = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultLivePhotoSceneHorizontal {...storyArgs} image={photo} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}

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

@@ -0,0 +1,20 @@
+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: 'DefaultLivePhotoSceneHorizontal',
+  description: 'Apple-style live photo scene for 9:16 portrait previews with a tighter vertical crop',
+  sourceFile: 'src/core/scene/photo/default-live-photo-scene-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultLivePhotoSceneHorizontal = VideoComponent(componentMetadata)(function DefaultLivePhotoSceneHorizontal(
+  props: ComponentProps<typeof DefaultLivePhotoScene>,
+) {
+  return <DefaultLivePhotoScene {...props} />
+})

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

@@ -0,0 +1,20 @@
+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: 'DefaultLivePhotoSceneLandscape',
+  description: 'Apple-style live photo scene for 16:9 landscape previews with a wider cinematic crop',
+  sourceFile: 'src/core/scene/photo/default-live-photo-scene-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultLivePhotoSceneLandscape = VideoComponent(componentMetadata)(function DefaultLivePhotoSceneLandscape(
+  props: ComponentProps<typeof DefaultLivePhotoScene>,
+) {
+  return <DefaultLivePhotoScene {...props} />
+})

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

@@ -0,0 +1,33 @@
+import { DefaultLivePhotoSceneLandscape } from './default-live-photo-scene-Landscape'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const photo = <img src={photoUrl} alt="Summer Harbor" />
+
+const meta = {
+  title: 'core/scene/photo/DefaultLivePhotoSceneLandscape',
+  component: DefaultLivePhotoSceneLandscape,
+  args: {
+    title: 'Summer Harbor',
+    subtitle: 'A single image scene with an Apple-style live push-in and luminous framing.',
+    badge: 'Live Photo',
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultLivePhotoSceneLandscape {...storyArgs} image={photo} />,
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  render: (storyArgs: (typeof meta)['args']) => <DefaultLivePhotoSceneLandscape {...storyArgs} image={photo} />,
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}