@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/scene/slide/person-intro/default-person-intro-slide.tsx

@@ -0,0 +1,363 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getOverflowSafeSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export type PersonIntroLink = {
+  label: string
+  href?: string
+  meta?: string
+}
+
+export type PersonIntroHighlight = {
+  label: string
+  value?: string
+  detail?: string
+}
+
+export interface DefaultPersonIntroSlideProps extends DefaultSceneProps {
+  name: string
+  role?: string
+  bio?: string
+  avatar?: ReactNode
+  links?: PersonIntroLink[]
+  highlights?: PersonIntroHighlight[]
+}
+
+export const personIntroPropsSchema = z.object({
+  sceneId: z.string().optional(),
+  sceneName: z.string().optional(),
+  name: z.string().min(1),
+  role: z.string().optional(),
+  bio: z.string().optional(),
+  avatar: z.any().optional(),
+  links: z
+    .array(
+      z.object({
+        label: z.string().min(1),
+        href: z.string().optional(),
+        meta: z.string().optional(),
+      }),
+    )
+    .optional(),
+  highlights: z
+    .array(
+      z.object({
+        label: z.string().min(1),
+        value: z.string().optional(),
+        detail: z.string().optional(),
+      }),
+    )
+    .optional(),
+})
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultPersonIntroSlide',
+  description: 'Profile-first person introduction slide',
+  sourceFile: 'src/core/scene/slide/person-intro/default-person-intro-slide.tsx',
+  pluginKey: 'core.slide.person-intro',
+  tags: ['scene', 'slide', 'person', 'profile', 'intro'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultPersonIntroSlideProps',
+})
+
+function buildInitials(name: string) {
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0] ?? '')
+    .join('')
+    .toUpperCase()
+
+  return initials || 'P'
+}
+
+function PersonIntroAvatarFallback({ name }: { name: string }) {
+  const initials = buildInitials(name)
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        placeItems: 'center',
+        background: 'linear-gradient(135deg, rgba(59,130,246,0.32), rgba(14,165,233,0.12))',
+        color: '#f8fafc',
+        fontSize: 'clamp(32px, 3.4vw, 58px)',
+        fontWeight: 800,
+        letterSpacing: '-0.06em',
+      }}
+    >
+      {initials}
+    </div>
+  )
+}
+
+function PersonIntroLinkChip({ link }: { link: PersonIntroLink }) {
+  const content = (
+    <div
+      style={{
+        width: '100%',
+        minWidth: 0,
+        padding: '12px 14px',
+        display: 'grid',
+        gap: 4,
+        border: '1px solid rgba(148,163,184,0.18)',
+        background: 'rgba(15,23,42,0.6)',
+        color: '#e2e8f0',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{link.label}</div>
+      {link.meta ? (
+        <div style={{ fontSize: 11, lineHeight: 1.2, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.92)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {link.meta}
+        </div>
+      ) : null}
+    </div>
+  )
+
+  if (!link.href) {
+    return content
+  }
+
+  return (
+    <a href={link.href} target="_blank" rel="noreferrer noopener" style={{ display: 'block', textDecoration: 'none', minWidth: 0 }}>
+      {content}
+    </a>
+  )
+}
+
+function PersonIntroHighlightCard({ highlight }: { highlight: PersonIntroHighlight }) {
+  return (
+    <article
+      style={{
+        minHeight: 0,
+        padding: '16px',
+        display: 'grid',
+        gap: 8,
+        background: 'rgba(15,23,42,0.68)',
+        border: '1px solid rgba(148,163,184,0.16)',
+        color: '#e2e8f0',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.9)' }}>{highlight.label}</div>
+      {highlight.value ? <div style={{ fontSize: 'clamp(20px, 2.2vw, 34px)', fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.05em' }}>{highlight.value}</div> : null}
+      {highlight.detail ? (
+        <div
+          style={{
+            fontSize: 14,
+            lineHeight: 1.45,
+            color: 'rgba(226,232,240,0.78)',
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: 3,
+            overflow: 'hidden',
+          }}
+        >
+          {highlight.detail}
+        </div>
+      ) : null}
+    </article>
+  )
+}
+
+export const DefaultPersonIntroSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: personIntroPropsSchema,
+    component: function DefaultPersonIntroSlide({
+      sceneId,
+      sceneName,
+      name,
+      role,
+      bio,
+      avatar,
+      links = [],
+      highlights = [],
+    }: DefaultPersonIntroSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const linkGrid = getOverflowSafeSlideGridLayout(links.length || 1, isPortrait ? 2 : 3, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 48 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 460 : 240,
+        minCardWidth: isPortrait ? 132 : 148,
+        minCardHeight: 48,
+      })
+      const highlightGrid = getOverflowSafeSlideGridLayout(highlights.length || 1, isPortrait ? 2 : 3, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 48 : 160,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 420 : 260,
+        minCardWidth: isPortrait ? 180 : 220,
+        minCardHeight: isPortrait ? 104 : 128,
+      })
+      const avatarSize = isPortrait ? Math.max(120, Math.round(runtime.width * 0.26)) : Math.max(180, Math.round(runtime.height * 0.24))
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? name}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 48%, #1e293b 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateColumns: isPortrait ? '1fr' : 'minmax(330px, 0.95fr) minmax(0, 1.05fr)',
+              gap: isPortrait ? 18 : 28,
+              padding: isPortrait ? '40px 24px' : '64px 80px',
+              color: '#e2e8f0',
+            }}
+          >
+            <SceneMotionLayer variant="panel">
+              <article
+                style={{
+                  minWidth: 0,
+                  height: '100%',
+                  padding: isPortrait ? '18px' : '24px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: isPortrait ? 18 : 22,
+                  background: 'rgba(15,23,42,0.58)',
+                  border: '1px solid rgba(148,163,184,0.18)',
+                  overflow: 'hidden',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: isPortrait ? 'auto 1fr' : 'auto 1fr',
+                    gap: isPortrait ? 16 : 20,
+                    alignItems: 'center',
+                    minWidth: 0,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: avatarSize,
+                      height: avatarSize,
+                      overflow: 'hidden',
+                      borderRadius: 0,
+                      background: 'rgba(15,23,42,0.92)',
+                      border: '1px solid rgba(148,163,184,0.24)',
+                    }}
+                  >
+                    {avatar ?? <PersonIntroAvatarFallback name={name} />}
+                  </div>
+
+                  <div style={{ minWidth: 0, display: 'grid', gap: 8 }}>
+                    <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.9)' }}>Profile</div>
+                    <h1 style={{ margin: 0, fontSize: isPortrait ? Math.max(scale.title * 0.82, 36) : scale.title, lineHeight: 0.94, letterSpacing: '-0.06em' }}>
+                      {name}
+                    </h1>
+                    {role ? (
+                      <div
+                        style={{
+                          fontSize: isPortrait ? scale.body * 0.92 : scale.body,
+                          lineHeight: 1.35,
+                          color: 'rgba(226,232,240,0.86)',
+                          display: '-webkit-box',
+                          WebkitBoxOrient: 'vertical',
+                          WebkitLineClamp: 2,
+                          overflow: 'hidden',
+                        }}
+                      >
+                        {role}
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+
+                {bio ? (
+                  <div
+                    style={{
+                      fontSize: isPortrait ? scale.body * 0.88 : scale.body,
+                      lineHeight: 1.52,
+                      color: 'rgba(226,232,240,0.78)',
+                      display: '-webkit-box',
+                      WebkitBoxOrient: 'vertical',
+                      WebkitLineClamp: isPortrait ? 4 : 5,
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {bio}
+                  </div>
+                ) : null}
+
+                {links.length ? (
+                  <div style={{ display: 'grid', gap: 10 }}>
+                    <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.84)' }}>Links</div>
+                    <div
+                      style={{
+                        display: 'grid',
+                        gridTemplateColumns: `repeat(${Math.max(1, linkGrid.columns)}, minmax(0, 1fr))`,
+                        gap: linkGrid.gap,
+                      }}
+                    >
+                      {links.slice(0, 5).map((link) => (
+                        <PersonIntroLinkChip key={`${link.label}-${link.href ?? link.meta ?? ''}`} link={link} />
+                      ))}
+                    </div>
+                  </div>
+                ) : null}
+              </article>
+            </SceneMotionLayer>
+
+            <div style={{ display: 'grid', alignContent: 'start', gap: isPortrait ? 16 : 20, minWidth: 0 }}>
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <article
+                  style={{
+                    minWidth: 0,
+                    padding: isPortrait ? '18px' : '24px',
+                    display: 'grid',
+                    gap: 14,
+                    background: 'rgba(2,6,23,0.52)',
+                    border: '1px solid rgba(148,163,184,0.16)',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+                    <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.9)' }}>Highlights</div>
+                    <div style={{ fontSize: scale.caption, color: 'rgba(148,163,184,0.72)' }}>{Math.min(highlights.length, 5)} items</div>
+                  </div>
+
+                  <div
+                    style={{
+                      display: 'grid',
+                      gridTemplateColumns: `repeat(${Math.max(1, highlightGrid.columns)}, minmax(0, 1fr))`,
+                      gap: highlightGrid.gap,
+                    }}
+                  >
+                    {(highlights.length ? highlights : [{ label: 'Focus', value: 'Profile-first', detail: 'Introduce the person with clear identity, context, and proof points.' }]).slice(0, 5).map((highlight, index) => (
+                      <SceneMotionLayer key={`${highlight.label}-${index}`} variant="card" delayIndex={index + 2}>
+                        <PersonIntroHighlightCard highlight={highlight} />
+                      </SceneMotionLayer>
+                    ))}
+                  </div>
+                </article>
+              </SceneMotionLayer>
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/person-intro/default-person-intro-trio-slide.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultPersonIntroGroupSlide, componentMetadata as baseComponentMetadata } from './default-person-intro-group-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultPersonIntroTrioSlide',
+  description: 'Three person intro slide',
+  sourceFile: 'src/core/scene/slide/person-intro/default-person-intro-trio-slide.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'trio', 'three-person'])),
+}
+
+export const DefaultPersonIntroTrioSlide = VideoComponent(componentMetadata)(function DefaultPersonIntroTrioSlide(
+  props: ComponentProps<typeof DefaultPersonIntroGroupSlide>,
+) {
+  return <DefaultPersonIntroGroupSlide {...props} />
+})

package/src/core/scene/slide/person-intro/index.ts

@@ -0,0 +1,8 @@
+export { DefaultPersonIntroSlide } from './default-person-intro-slide'
+export { componentMetadata } from './default-person-intro-slide'
+export { DefaultPersonIntroSlideLandscape, componentMetadata as DefaultPersonIntroSlideLandscapeMetadata } from './default-person-intro-slide-Landscape'
+export { DefaultPersonIntroSlideHorizontal, componentMetadata as DefaultPersonIntroSlideHorizontalMetadata } from './default-person-intro-slide-Horizontal'
+export { DefaultPersonIntroGroupSlide, componentMetadata as DefaultPersonIntroGroupSlideMetadata } from './default-person-intro-group-slide'
+export { DefaultPersonIntroDuoSlide, componentMetadata as DefaultPersonIntroDuoSlideMetadata } from './default-person-intro-duo-slide'
+export { DefaultPersonIntroTrioSlide, componentMetadata as DefaultPersonIntroTrioSlideMetadata } from './default-person-intro-trio-slide'
+export { DefaultPersonIntroQuadSlide, componentMetadata as DefaultPersonIntroQuadSlideMetadata } from './default-person-intro-quad-slide'

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultPhotoAlbumSlide, componentMetadata as baseComponentMetadata } from './default-photo-album-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultPhotoAlbumMultiSlide',
+  description: 'Multi photo collage slide',
+  sourceFile: 'src/core/scene/slide/photo-album/default-photo-album-multi-slide.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'multi', 'collage'])),
+}
+
+export const DefaultPhotoAlbumMultiSlide = VideoComponent(componentMetadata)(function DefaultPhotoAlbumMultiSlide(
+  props: ComponentProps<typeof DefaultPhotoAlbumSlide>,
+) {
+  return <DefaultPhotoAlbumSlide {...props} />
+})

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultPhotoAlbumSlide, componentMetadata as baseComponentMetadata } from './default-photo-album-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultPhotoAlbumPairSlide',
+  description: 'Two photo side-by-side slide',
+  sourceFile: 'src/core/scene/slide/photo-album/default-photo-album-pair-slide.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'pair', 'two-up'])),
+}
+
+export const DefaultPhotoAlbumPairSlide = VideoComponent(componentMetadata)(function DefaultPhotoAlbumPairSlide(
+  props: ComponentProps<typeof DefaultPhotoAlbumSlide>,
+) {
+  return <DefaultPhotoAlbumSlide {...props} />
+})

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultPhotoAlbumSlide, componentMetadata as baseComponentMetadata } from './default-photo-album-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultPhotoAlbumSingleSlide',
+  description: 'Single photo hero slide',
+  sourceFile: 'src/core/scene/slide/photo-album/default-photo-album-single-slide.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'single', 'hero-photo'])),
+}
+
+export const DefaultPhotoAlbumSingleSlide = VideoComponent(componentMetadata)(function DefaultPhotoAlbumSingleSlide(
+  props: ComponentProps<typeof DefaultPhotoAlbumSlide>,
+) {
+  return <DefaultPhotoAlbumSlide {...props} />
+})

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

@@ -0,0 +1,26 @@
+import { DefaultPhotoAlbumSlideHorizontal } from './default-photo-album-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/photo-album/DefaultPhotoAlbumSlideHorizontal/Animated',
+  component: DefaultPhotoAlbumSlideHorizontal,
+  args: {
+    title: 'Weekend in Kyoto',
+    subtitle: 'A compact vertical collage for social recap videos and portrait-first previews.',
+    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 Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,25 @@
+import { DefaultPhotoAlbumSlideHorizontal } from './default-photo-album-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/photo-album/DefaultPhotoAlbumSlideHorizontal',
+  component: DefaultPhotoAlbumSlideHorizontal,
+  args: {
+    title: 'Weekend in Kyoto',
+    subtitle: 'A compact vertical collage for social recap videos and portrait-first previews.',
+    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: '9:16',
+  },
+}

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

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

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

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

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

@@ -0,0 +1,94 @@
+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/Animated',
+  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 Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Single = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumSingleSlide {...storyArgs} />,
+  args: {
+    title: 'One Frame, One Memory',
+    subtitle: 'Animated single-photo composition.',
+    photos: [{ title: 'Cover shot', caption: 'A single strong image', meta: 'Hero photo' }],
+  },
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Pair = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumPairSlide {...storyArgs} />,
+  args: {
+    title: 'Before and After',
+    subtitle: 'Animated pair composition.',
+    photos: [
+      { title: 'Before', caption: 'Original capture', meta: 'Shot 1' },
+      { title: 'After', caption: 'Edited result', meta: 'Shot 2' },
+    ],
+  },
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Multi = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumMultiSlide {...storyArgs} />,
+  args: meta.args,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const SinglePortrait = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumSingleSlide {...storyArgs} />,
+  args: Single.args,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const PairPortrait = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumPairSlide {...storyArgs} />,
+  args: Pair.args,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const MultiPortrait = {
+  render: (storyArgs: typeof meta.args) => <DefaultPhotoAlbumMultiSlide {...storyArgs} />,
+  args: Multi.args,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}