@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/scene/slide/photo-album/default-photo-album-slide.stories.tsx

@@ -0,0 +1,87 @@
+import { DefaultPhotoAlbumSlideLandscape } from './default-photo-album-slide-Landscape'
+import { DefaultPhotoAlbumMultiSlide } from './default-photo-album-multi-slide'
+import { DefaultPhotoAlbumPairSlide } from './default-photo-album-pair-slide'
+import { DefaultPhotoAlbumSingleSlide } from './default-photo-album-single-slide'
+
+const meta = {
+  title: 'core/scene/slide/photo-album/DefaultPhotoAlbumSlideLandscape',
+  component: DefaultPhotoAlbumSlideLandscape,
+  args: {
+    title: 'Weekend in Kyoto',
+    subtitle: 'A quiet album layout for travel recaps, family memories, and event highlights.',
+    photos: [
+      { title: 'Arrival', caption: 'Old streets, early light', meta: 'Day 1' },
+      { title: 'Market stop', caption: 'Local snacks and handmade ceramics', meta: 'Nishiki' },
+      { title: 'Temple walk', caption: 'Soft weather, slower pace', meta: 'Afternoon' },
+      { title: 'Dinner table', caption: 'Shared plates and warm conversation', meta: 'Evening' },
+      { title: 'Night city', caption: 'Neon reflections after sunset', meta: 'Day 2' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Single = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumSingleSlide {...storyArgs} />,
+  args: {
+    title: 'One Frame, One Memory',
+    subtitle: 'Single-image hero composition for a highlight shot.',
+    photos: [{ title: 'Cover shot', caption: 'A single strong image', meta: 'Hero photo' }],
+  },
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Pair = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumPairSlide {...storyArgs} />,
+  args: {
+    title: 'Before and After',
+    subtitle: 'Two-up image composition for side-by-side comparison.',
+    photos: [
+      { title: 'Before', caption: 'Original capture', meta: 'Shot 1' },
+      { title: 'After', caption: 'Edited result', meta: 'Shot 2' },
+    ],
+  },
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Multi = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumMultiSlide {...storyArgs} />,
+  args: meta.args,
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const SinglePortrait = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumSingleSlide {...storyArgs} />,
+  args: Single.args,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const PairPortrait = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumPairSlide {...storyArgs} />,
+  args: Pair.args,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const MultiPortrait = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumMultiSlide {...storyArgs} />,
+  args: Multi.args,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/photo-album/default-photo-album-slide.tsx

@@ -0,0 +1,414 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultPhotoAlbumSlidePhoto {
+  title: string
+  caption?: string
+  meta?: string
+  accent?: string
+  image?: ReactNode
+}
+
+export interface DefaultPhotoAlbumSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  photos: DefaultPhotoAlbumSlidePhoto[]
+}
+
+const photoPalette = [
+  ['rgba(96,165,250,0.42)', 'rgba(15,23,42,0.82)'],
+  ['rgba(244,114,182,0.42)', 'rgba(15,23,42,0.82)'],
+  ['rgba(52,211,153,0.40)', 'rgba(15,23,42,0.82)'],
+  ['rgba(251,191,36,0.38)', 'rgba(15,23,42,0.82)'],
+  ['rgba(167,139,250,0.40)', 'rgba(15,23,42,0.82)'],
+] as const
+
+type PhotoPlacement = {
+  gridColumn: string
+  gridRow: string
+}
+
+function getPhotoAlbumPlacement(index: number, isPortrait: boolean, photoCount: number): PhotoPlacement {
+  if (photoCount <= 1) {
+    return { gridColumn: '1 / -1', gridRow: '1 / -1' }
+  }
+
+  if (isPortrait) {
+    if (photoCount === 2) {
+      return [
+        { gridColumn: '1 / span 2', gridRow: '1 / span 2' },
+        { gridColumn: '1 / span 2', gridRow: '3 / span 2' },
+      ][index] ?? { gridColumn: '1 / span 2', gridRow: '3 / span 2' }
+    }
+
+    if (photoCount === 3) {
+      return [
+        { gridColumn: '1 / span 2', gridRow: '1 / span 2' },
+        { gridColumn: '1 / span 1', gridRow: '3 / span 1' },
+        { gridColumn: '2 / span 1', gridRow: '3 / span 1' },
+      ][index] ?? { gridColumn: '2 / span 1', gridRow: '3 / span 1' }
+    }
+
+    return [
+      { gridColumn: '1 / span 2', gridRow: '1 / span 2' },
+      { gridColumn: '1 / span 1', gridRow: '3 / span 1' },
+      { gridColumn: '2 / span 1', gridRow: '3 / span 1' },
+      { gridColumn: '1 / span 1', gridRow: '4 / span 1' },
+      { gridColumn: '2 / span 1', gridRow: '4 / span 1' },
+    ][index] ?? { gridColumn: '2 / span 1', gridRow: '4 / span 1' }
+  }
+
+  if (photoCount === 2) {
+    return [
+      { gridColumn: '1 / span 2', gridRow: '1 / span 2' },
+      { gridColumn: '3 / span 2', gridRow: '1 / span 2' },
+    ][index] ?? { gridColumn: '3 / span 2', gridRow: '1 / span 2' }
+  }
+
+  if (photoCount === 3) {
+    return [
+      { gridColumn: '1 / span 2', gridRow: '1 / span 3' },
+      { gridColumn: '3 / span 2', gridRow: '1 / span 1' },
+      { gridColumn: '3 / span 2', gridRow: '2 / span 2' },
+    ][index] ?? { gridColumn: '3 / span 2', gridRow: '2 / span 2' }
+  }
+
+  return [
+    { gridColumn: '1 / span 2', gridRow: '1 / span 3' },
+    { gridColumn: '3 / span 1', gridRow: '1 / span 1' },
+    { gridColumn: '4 / span 1', gridRow: '1 / span 2' },
+    { gridColumn: '3 / span 2', gridRow: '2 / span 2' },
+    { gridColumn: '3 / span 1', gridRow: '3 / span 1' },
+  ][index] ?? { gridColumn: '3 / span 1', gridRow: '3 / span 1' }
+}
+
+function getTileGradient(accent?: string, index = 0) {
+  if (accent) {
+    return `linear-gradient(180deg, color-mix(in srgb, ${accent} 56%, transparent) 0%, rgba(15,23,42,0.92) 100%)`
+  }
+
+  const [top, bottom] = photoPalette[index % photoPalette.length]
+  return `linear-gradient(180deg, ${top} 0%, ${bottom} 100%)`
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultPhotoAlbumSlide',
+  description: 'Photo album and memory collage slide',
+  sourceFile: 'src/core/scene/slide/photo-album/default-photo-album-slide.tsx',
+  pluginKey: 'core.slide.photo-album',
+  tags: ['scene', 'slide', 'photo-album', 'album', 'photo'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultPhotoAlbumSlideProps',
+})
+
+export const DefaultPhotoAlbumSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      photos: z
+        .array(
+          z.object({
+            title: z.string().min(1),
+            caption: z.string().optional(),
+            meta: z.string().optional(),
+            accent: z.string().optional(),
+            image: z.any().optional(),
+          }),
+        )
+        .min(1),
+    }),
+    component: function DefaultPhotoAlbumSlide({ sceneId, sceneName, title, subtitle, photos }: DefaultPhotoAlbumSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const visiblePhotos = photos.slice(0, 5)
+      const photoCountLabel = `${String(visiblePhotos.length).padStart(2, '0')} photos`
+      const gridRows = isPortrait ? (visiblePhotos.length === 2 ? 4 : visiblePhotos.length <= 3 ? 3 : 4) : visiblePhotos.length <= 2 ? 2 : 3
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(160deg, #020617 0%, #0f172a 55%, #1e293b 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              padding: isPortrait ? '36px 24px 28px' : '56px 64px',
+              color: '#e2e8f0',
+              display: 'grid',
+              gridTemplateRows: isPortrait ? 'auto minmax(0, 1fr)' : '1fr',
+              gap: isPortrait ? 18 : 28,
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: isPortrait ? '1fr' : 'minmax(220px, 0.9fr) minmax(0, 1.35fr)',
+                gap: isPortrait ? 16 : 28,
+                minWidth: 0,
+                minHeight: 0,
+                alignItems: 'stretch',
+              }}
+            >
+              <SceneMotionLayer variant="hero-title">
+                <header
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    minWidth: 0,
+                    minHeight: 0,
+                    padding: isPortrait ? '0 2px' : '8px 0',
+                  }}
+                >
+                  <div>
+                    <p
+                      style={{
+                        margin: 0,
+                        fontSize: scale.caption,
+                        lineHeight: 1.2,
+                        letterSpacing: '0.28em',
+                        textTransform: 'uppercase',
+                        opacity: 0.62,
+                      }}
+                    >
+                      Photo Album
+                    </p>
+                    <h1
+                      style={{
+                        margin: '12px 0 0',
+                        fontSize: isPortrait ? scale.title * 0.76 : scale.title,
+                        lineHeight: 0.92,
+                        letterSpacing: '-0.06em',
+                        maxWidth: isPortrait ? Math.min(520, Math.round(runtime.width * 0.92)) : 620,
+                      }}
+                    >
+                      {title}
+                    </h1>
+                    {subtitle ? (
+                      <p
+                        style={{
+                          margin: '14px 0 0',
+                          maxWidth: isPortrait ? Math.min(560, Math.round(runtime.width * 0.9)) : 520,
+                          fontSize: isPortrait ? scale.body * 0.88 : scale.body,
+                          lineHeight: 1.5,
+                          opacity: 0.8,
+                          display: '-webkit-box',
+                          WebkitBoxOrient: 'vertical',
+                          WebkitLineClamp: isPortrait ? 4 : 5,
+                          overflow: 'hidden',
+                        }}
+                      >
+                        {subtitle}
+                      </p>
+                    ) : null}
+                  </div>
+
+                  <div
+                    style={{
+                      display: 'flex',
+                      flexWrap: 'wrap',
+                      gap: 10,
+                      marginTop: isPortrait ? 18 : 24,
+                    }}
+                  >
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        padding: '7px 12px',
+                        border: '1px solid rgba(148,163,184,0.24)',
+                        background: 'rgba(15,23,42,0.52)',
+                        fontSize: scale.caption,
+                        letterSpacing: '0.18em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      {photoCountLabel}
+                    </span>
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        padding: '7px 12px',
+                        border: '1px solid rgba(148,163,184,0.24)',
+                        background: 'rgba(15,23,42,0.32)',
+                        fontSize: scale.caption,
+                        letterSpacing: '0.16em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      Memory Notes
+                    </span>
+                  </div>
+                </header>
+              </SceneMotionLayer>
+
+              <SceneMotionLayer variant="panel" delayIndex={1}>
+                <div
+                  style={{
+                    height: '100%',
+                    minHeight: 0,
+                    padding: isPortrait ? 0 : '8px 0 8px 8px',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      minHeight: 0,
+                      display: 'grid',
+                      gridTemplateColumns: isPortrait ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))',
+                      gridTemplateRows: `repeat(${gridRows}, minmax(0, 1fr))`,
+                      gap: isPortrait ? 12 : 14,
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {visiblePhotos.map((photo, index) => {
+                      const placement = getPhotoAlbumPlacement(index, isPortrait, visiblePhotos.length)
+                      const overlayLines = [photo.title, photo.caption, photo.meta].filter(Boolean) as string[]
+                      const gradient = getTileGradient(photo.accent, index)
+
+                      return (
+                        <SceneMotionLayer key={`${photo.title}-${index}`} variant="card" delayIndex={index + 1}>
+                          <article
+                            style={{
+                              ...placement,
+                              position: 'relative',
+                              minWidth: 0,
+                              minHeight: 0,
+                              overflow: 'hidden',
+                              border: '1px solid rgba(148,163,184,0.18)',
+                              background: gradient,
+                            }}
+                          >
+                            {photo.image ? (
+                              <div
+                                style={{
+                                  position: 'absolute',
+                                  inset: 0,
+                                  overflow: 'hidden',
+                                }}
+                              >
+                                {photo.image}
+                              </div>
+                            ) : (
+                              <div
+                                style={{
+                                  position: 'absolute',
+                                  inset: 0,
+                                  background: gradient,
+                                }}
+                              />
+                            )}
+                            <div
+                              style={{
+                                position: 'absolute',
+                                inset: 0,
+                                background:
+                                  'linear-gradient(180deg, rgba(2,6,23,0.12) 0%, rgba(2,6,23,0.18) 42%, rgba(2,6,23,0.76) 100%)',
+                              }}
+                            />
+                            <div
+                              style={{
+                                position: 'relative',
+                                zIndex: 1,
+                                width: '100%',
+                                height: '100%',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                justifyContent: 'space-between',
+                                minWidth: 0,
+                                minHeight: 0,
+                                padding: isPortrait ? 14 : 16,
+                              }}
+                            >
+                              <span
+                                style={{
+                                  alignSelf: 'flex-start',
+                                  display: 'inline-flex',
+                                  alignItems: 'center',
+                                  gap: 8,
+                                  padding: '5px 10px',
+                                  border: '1px solid rgba(255,255,255,0.18)',
+                                  background: 'rgba(2,6,23,0.32)',
+                                  fontSize: scale.caption,
+                                  letterSpacing: '0.18em',
+                                  textTransform: 'uppercase',
+                                  whiteSpace: 'nowrap',
+                                }}
+                              >
+                                {String(index + 1).padStart(2, '0')}
+                              </span>
+
+                              <div style={{ minWidth: 0 }}>
+                                <p
+                                  style={{
+                                    margin: 0,
+                                    maxWidth: '100%',
+                                    fontSize: isPortrait ? scale.body * 0.9 : scale.body,
+                                    fontWeight: 700,
+                                    lineHeight: 1.12,
+                                    letterSpacing: '-0.02em',
+                                    display: '-webkit-box',
+                                    WebkitBoxOrient: 'vertical',
+                                    WebkitLineClamp: 2,
+                                    overflow: 'hidden',
+                                  }}
+                                >
+                                  {photo.title}
+                                </p>
+                                {overlayLines.length > 1 ? (
+                                  <p
+                                    style={{
+                                      margin: '8px 0 0',
+                                      maxWidth: '100%',
+                                      fontSize: isPortrait ? scale.body * 0.76 : scale.body * 0.8,
+                                      lineHeight: 1.35,
+                                      opacity: 0.82,
+                                      display: '-webkit-box',
+                                      WebkitBoxOrient: 'vertical',
+                                      WebkitLineClamp: 2,
+                                      overflow: 'hidden',
+                                    }}
+                                  >
+                                    {overlayLines.slice(1).join(' · ')}
+                                  </p>
+                                ) : null}
+                              </div>
+                            </div>
+                          </article>
+                        </SceneMotionLayer>
+                      )
+                    })}
+                  </div>
+                </div>
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/photo-album/index.ts

@@ -0,0 +1,7 @@
+export { DefaultPhotoAlbumSlide } from './default-photo-album-slide'
+export { componentMetadata } from './default-photo-album-slide'
+export { DefaultPhotoAlbumSlideLandscape, componentMetadata as DefaultPhotoAlbumSlideLandscapeMetadata } from './default-photo-album-slide-Landscape'
+export { DefaultPhotoAlbumSlideHorizontal, componentMetadata as DefaultPhotoAlbumSlideHorizontalMetadata } from './default-photo-album-slide-Horizontal'
+export { DefaultPhotoAlbumSingleSlide, componentMetadata as DefaultPhotoAlbumSingleSlideMetadata } from './default-photo-album-single-slide'
+export { DefaultPhotoAlbumPairSlide, componentMetadata as DefaultPhotoAlbumPairSlideMetadata } from './default-photo-album-pair-slide'
+export { DefaultPhotoAlbumMultiSlide, componentMetadata as DefaultPhotoAlbumMultiSlideMetadata } from './default-photo-album-multi-slide'