@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/scene/slide/video-showcase/default-video-showcase-multi-slide.tsx

@@ -0,0 +1,195 @@
+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, getOverflowSafeSlideGridLayout, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultVideoShowcaseMultiClip {
+  title: string
+  caption?: string
+  duration?: string
+  poster?: ReactNode
+}
+
+export interface DefaultVideoShowcaseMultiSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  clips: DefaultVideoShowcaseMultiClip[]
+}
+
+function MultiClipCard({
+  clip,
+  scale,
+  index,
+}: {
+  clip: DefaultVideoShowcaseMultiClip
+  scale: ReturnType<typeof getSlideTypographyScale>
+  index: number
+}) {
+  return (
+    <article
+      style={{
+        minWidth: 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        border: '1px solid rgba(148,163,184,0.18)',
+        background: 'rgba(15,23,42,0.34)',
+      }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          aspectRatio: '16 / 9',
+          background: 'linear-gradient(135deg, rgba(15,23,42,0.96), rgba(30,41,59,0.96))',
+          overflow: 'hidden',
+        }}
+      >
+        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: '#f8fafc', opacity: 0.92 }}>
+          {clip.poster ?? <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.06em' }}>▶</div>}
+        </div>
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background:
+              'linear-gradient(180deg, rgba(2,6,23,0.12) 0%, rgba(2,6,23,0.22) 38%, rgba(2,6,23,0.84) 100%)',
+          }}
+        />
+        <span
+          style={{
+            position: 'absolute',
+            left: 12,
+            top: 12,
+            zIndex: 1,
+            padding: '6px 10px',
+            border: '1px solid rgba(255,255,255,0.18)',
+            background: 'rgba(2,6,23,0.38)',
+            color: '#f8fafc',
+            fontSize: scale.caption,
+            letterSpacing: '0.18em',
+            textTransform: 'uppercase',
+          }}
+        >
+          {String(index + 1).padStart(2, '0')}
+        </span>
+      </div>
+
+      <div style={{ padding: 16, display: 'grid', gap: 8, color: '#e2e8f0' }}>
+        <div style={{ fontSize: scale.body * 0.94, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.03em' }}>{clip.title}</div>
+        {clip.caption ? <div style={{ fontSize: scale.caption, lineHeight: 1.45, opacity: 0.78 }}>{clip.caption}</div> : null}
+        {clip.duration ? (
+          <div style={{ fontSize: scale.caption, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.62 }}>{clip.duration}</div>
+        ) : null}
+      </div>
+    </article>
+  )
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultVideoShowcaseMultiSlide',
+  description: 'Multi video showcase slide',
+  sourceFile: 'src/core/scene/slide/video-showcase/default-video-showcase-multi-slide.tsx',
+  pluginKey: 'core.slide.video-showcase.multi',
+  tags: ['scene', 'slide', 'video', 'showcase', 'multi'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultVideoShowcaseMultiSlideProps',
+})
+
+export const DefaultVideoShowcaseMultiSlide = 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(),
+      clips: z
+        .array(
+          z.object({
+            title: z.string().min(1),
+            caption: z.string().optional(),
+            duration: z.string().optional(),
+            poster: z.any().optional(),
+          }),
+        )
+        .min(2),
+    }),
+    component: function DefaultVideoShowcaseMultiSlide({ sceneId, sceneName, title, subtitle, clips }: DefaultVideoShowcaseMultiSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const scale = getSlideTypographyScale(runtime.height)
+      const isPortrait = runtime.height > runtime.width
+      const grid = getOverflowSafeSlideGridLayout(clips.length, isPortrait ? 2 : 3, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 40 : 128,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 420 : 240,
+        minCardWidth: isPortrait ? 180 : 220,
+        minCardHeight: isPortrait ? 180 : 210,
+      })
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 56%, #1d4ed8 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateColumns: isPortrait ? '1fr' : 'minmax(280px, 0.88fr) minmax(0, 1.12fr)',
+              gap: isPortrait ? 18 : 28,
+              padding: isPortrait ? '40px 24px 42px' : '64px 72px',
+              color: '#e2e8f0',
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            <SceneMotionLayer variant="hero-title">
+              <div style={{ display: 'grid', alignContent: 'start', gap: 14, minWidth: 0 }}>
+                <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>Video wall</div>
+                <h1 style={{ margin: 0, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.94, letterSpacing: '-0.06em' }}>{title}</h1>
+                {subtitle ? (
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.body * 0.92 : scale.body, lineHeight: 1.5, opacity: 0.82, maxWidth: 560 }}>{subtitle}</p>
+                ) : null}
+                <div style={{ fontSize: scale.caption, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.56 }}>
+                  {clips.length} clips
+                </div>
+              </div>
+            </SceneMotionLayer>
+
+            <SceneMotionLayer variant="panel" delayIndex={1}>
+              <div
+                style={{
+                  height: '100%',
+                  minWidth: 0,
+                  minHeight: 0,
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(${Math.max(1, grid.columns)}, minmax(0, 1fr))`,
+                  gap: grid.gap,
+                }}
+              >
+                {clips.slice(0, 6).map((clip, index) => (
+                  <SceneMotionLayer key={`${clip.title}-${index}`} variant="card" delayIndex={index + 1}>
+                    <MultiClipCard clip={clip} index={index} scale={scale} />
+                  </SceneMotionLayer>
+                ))}
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/video-showcase/default-video-showcase-slide-Horizontal.tsx

@@ -0,0 +1,212 @@
+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, getSlideTypographyScale } from '../_shared'
+import { componentMetadata as baseComponentMetadata } from './default-video-showcase-slide'
+
+export interface DefaultVideoShowcaseSlideHorizontalProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  chapter?: string
+  runtimeLabel?: string
+  posterLabel?: string
+  posterCaption?: string
+  notes?: string[]
+  poster?: ReactNode
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  ...baseComponentMetadata,
+  name: 'DefaultVideoShowcaseSlideHorizontal',
+  description: 'Video showcase slide (Portrait 9:16 variant)',
+  sourceFile: 'src/core/scene/slide/video-showcase/default-video-showcase-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+})
+
+export const DefaultVideoShowcaseSlideHorizontal = 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(),
+      chapter: z.string().optional(),
+      runtimeLabel: z.string().optional(),
+      posterLabel: z.string().optional(),
+      posterCaption: z.string().optional(),
+      notes: z.array(z.string().min(1)).max(5).optional(),
+      poster: z.any().optional(),
+    }),
+    component: function DefaultVideoShowcaseSlideHorizontal({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      chapter,
+      runtimeLabel,
+      posterLabel,
+      posterCaption,
+      notes,
+      poster,
+    }: DefaultVideoShowcaseSlideHorizontalProps) {
+      const runtime = useRemotionSceneRuntime()
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(180deg, #020617 0%, #0f172a 52%, #1d4ed8 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateRows: 'auto auto 1fr',
+              gap: 18,
+              padding: '34px 24px 36px',
+              color: '#e2e8f0',
+              justifyItems: 'center',
+              alignContent: 'start',
+            }}
+          >
+            <SceneMotionLayer variant="panel">
+              <div
+                style={{
+                  position: 'relative',
+                  width: 'min(100%, 400px)',
+                  aspectRatio: '4 / 5',
+                  overflow: 'hidden',
+                  borderRadius: 0,
+                  border: '1px solid rgba(148,163,184,0.22)',
+                  background: 'linear-gradient(135deg, rgba(15,23,42,0.96) 0%, rgba(30,41,59,0.92) 42%, rgba(37,99,235,0.78) 100%)',
+                  boxShadow: '0 22px 54px rgba(15,23,42,0.28)',
+                }}
+              >
+                <div
+                  style={{
+                    position: 'absolute',
+                    inset: 0,
+                    background:
+                      'radial-gradient(circle at 25% 18%, rgba(96,165,250,0.34), transparent 28%), radial-gradient(circle at 80% 22%, rgba(56,189,248,0.16), transparent 22%), linear-gradient(180deg, rgba(2,6,23,0.14) 0%, rgba(2,6,23,0.76) 100%)',
+                  }}
+                />
+                <div style={{ position: 'absolute', inset: 14, border: '1px solid rgba(255,255,255,0.12)', pointerEvents: 'none' }} />
+                <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', padding: 16, display: 'grid', gridTemplateRows: 'auto 1fr auto', gap: 12 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 10px', border: '1px solid rgba(255,255,255,0.16)', background: 'rgba(15,23,42,0.46)', fontSize: scale.caption, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
+                      <span style={{ width: 8, height: 8, background: '#38bdf8', display: 'inline-block' }} />
+                      {posterLabel ?? 'Poster'}
+                    </div>
+                    {runtimeLabel ? (
+                      <div style={{ display: 'inline-flex', alignItems: 'center', padding: '7px 10px', border: '1px solid rgba(255,255,255,0.16)', background: 'rgba(2,6,23,0.5)', fontSize: scale.caption, fontWeight: 700 }}>
+                        {runtimeLabel}
+                      </div>
+                    ) : null}
+                  </div>
+
+                  <div style={{ display: 'grid', placeItems: 'center', minHeight: 0 }}>
+                    {poster ?? (
+                      <div style={{ display: 'grid', placeItems: 'center', gap: 14, textAlign: 'center' }}>
+                        <div style={{ width: 86, height: 86, display: 'grid', placeItems: 'center', borderRadius: '999px', background: 'rgba(15,23,42,0.64)', border: '1px solid rgba(255,255,255,0.18)', boxShadow: '0 12px 32px rgba(15,23,42,0.28)', fontSize: 28 }}>
+                          ▶
+                        </div>
+                        <div>
+                          <div style={{ fontSize: scale.body * 0.94, fontWeight: 700 }}>{posterLabel ?? 'Video poster'}</div>
+                          <div style={{ marginTop: 8, fontSize: scale.caption, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.68 }}>
+                            {posterCaption ?? 'A true portrait poster composition for mobile-first previews.'}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  <div style={{ display: 'grid', gap: 8 }}>
+                    <div style={{ fontSize: scale.caption, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{chapter ?? 'Video showcase'}</div>
+                    <div style={{ fontSize: scale.body * 0.9, lineHeight: 1.38, opacity: 0.86 }}>{posterCaption ?? 'Stacked composition for the clip poster, runtime and supporting context.'}</div>
+                  </div>
+                </div>
+              </div>
+            </SceneMotionLayer>
+
+            <div style={{ width: 'min(100%, 460px)', display: 'grid', gap: 14 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <div
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    padding: '8px 12px',
+                    border: '1px solid rgba(148,163,184,0.2)',
+                    background: 'rgba(15,23,42,0.42)',
+                    fontSize: scale.caption,
+                    letterSpacing: '0.18em',
+                    textTransform: 'uppercase',
+                    width: 'fit-content',
+                  }}
+                >
+                  <span style={{ width: 8, height: 8, background: '#38bdf8', display: 'inline-block' }} />
+                  {chapter ?? 'Video showcase'}
+                </div>
+              </SceneMotionLayer>
+
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1 style={{ margin: 0, fontSize: scale.title * 0.76, lineHeight: 0.94, letterSpacing: '-0.06em', textAlign: 'left' }}>{title}</h1>
+              </SceneMotionLayer>
+
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: 0, fontSize: scale.body * 0.88, lineHeight: 1.5, opacity: 0.82 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+
+            <SceneMotionLayer variant="panel" delayIndex={3}>
+              <div style={{ width: 'min(100%, 460px)', display: 'grid', gap: 12, gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}>
+                <article style={{ padding: '14px 14px 15px', borderRadius: 0, border: '1px solid rgba(148,163,184,0.18)', background: 'rgba(15,23,42,0.24)' }}>
+                  <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Chapter</div>
+                  <div style={{ marginTop: 8, fontSize: scale.body * 0.88, lineHeight: 1.32, fontWeight: 700 }}>{chapter ?? 'Opening sequence'}</div>
+                </article>
+                <article style={{ padding: '14px 14px 15px', borderRadius: 0, border: '1px solid rgba(148,163,184,0.18)', background: 'rgba(15,23,42,0.24)' }}>
+                  <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Runtime</div>
+                  <div style={{ marginTop: 8, fontSize: scale.body * 0.88, lineHeight: 1.32, fontWeight: 700 }}>{runtimeLabel ?? '02:34'}</div>
+                </article>
+              </div>
+            </SceneMotionLayer>
+
+            <SceneMotionLayer variant="panel" delayIndex={4}>
+              <div style={{ width: 'min(100%, 460px)', display: 'grid', gap: 10 }}>
+                {(notes ?? []).slice(0, 5).map((note, index) => (
+                  <article
+                    key={`${index}-${note}`}
+                    style={{
+                      padding: '13px 14px',
+                      borderRadius: 0,
+                      border: '1px solid rgba(148,163,184,0.18)',
+                      background: 'rgba(15,23,42,0.22)',
+                    }}
+                  >
+                    <div style={{ fontSize: scale.caption, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.58 }}>
+                      Note {String(index + 1).padStart(2, '0')}
+                    </div>
+                    <p style={{ margin: '8px 0 0', fontSize: scale.body * 0.84, lineHeight: 1.42, opacity: 0.92 }}>{note}</p>
+                  </article>
+                ))}
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/video-showcase/default-video-showcase-slide-Landscape.tsx

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

package/src/core/scene/slide/video-showcase/default-video-showcase-slide.animated.stories.tsx

@@ -0,0 +1,78 @@
+import { DefaultVideoShowcaseSlideHorizontal } from './default-video-showcase-slide-Horizontal'
+import { DefaultVideoShowcaseSlideLandscape } from './default-video-showcase-slide-Landscape'
+import { DefaultVideoShowcaseMultiSlide } from './default-video-showcase-multi-slide'
+
+const args = {
+  title: 'Launch trailer cut',
+  subtitle: 'A native video-first showcase with a poster, chapter context, runtime, and edit notes.',
+  chapter: 'Chapter 03',
+  runtimeLabel: '03:18',
+  posterLabel: 'Trailer poster',
+  posterCaption: 'Use a key frame, teaser art, or final poster still.',
+  notes: [
+    'Fade the poster in first, then reveal the chapter label.',
+    'Let the runtime badge settle before the notes appear.',
+    'Use the motion pass to nudge the text blocks into place.',
+  ],
+}
+
+const meta = {
+  title: 'core/scene/slide/video-showcase/DefaultVideoShowcaseSlide/Animated',
+  component: DefaultVideoShowcaseSlideLandscape,
+  args,
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultVideoShowcaseSlideHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Multi = {
+  render: () => (
+    <DefaultVideoShowcaseMultiSlide
+      title="Clip wall"
+      subtitle="Animated multi-video poster wall."
+      clips={[
+        { title: 'Opening scene', caption: 'First 8 seconds', duration: '00:08' },
+        { title: 'Middle beat', caption: 'Reaction shot', duration: '00:11' },
+        { title: 'Final cut', caption: 'Ending frame', duration: '00:14' },
+        { title: 'Alt take', caption: 'Alternate angle', duration: '00:09' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const MultiPortrait = {
+  render: () => (
+    <DefaultVideoShowcaseMultiSlide
+      title="Clip wall"
+      subtitle="Animated multi-video poster wall."
+      clips={[
+        { title: 'Opening scene', caption: 'First 8 seconds', duration: '00:08' },
+        { title: 'Middle beat', caption: 'Reaction shot', duration: '00:11' },
+        { title: 'Final cut', caption: 'Ending frame', duration: '00:14' },
+        { title: 'Alt take', caption: 'Alternate angle', duration: '00:09' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/video-showcase/default-video-showcase-slide.stories.tsx

@@ -0,0 +1,74 @@
+import { DefaultVideoShowcaseSlideHorizontal } from './default-video-showcase-slide-Horizontal'
+import { DefaultVideoShowcaseSlideLandscape } from './default-video-showcase-slide-Landscape'
+import { DefaultVideoShowcaseMultiSlide } from './default-video-showcase-multi-slide'
+
+const args = {
+  title: 'Launch trailer cut',
+  subtitle: 'A native video-first showcase with a poster, chapter context, runtime, and edit notes.',
+  chapter: 'Chapter 03',
+  runtimeLabel: '03:18',
+  posterLabel: 'Trailer poster',
+  posterCaption: 'Use a key frame, teaser art, or final poster still.',
+  notes: [
+    'Open on the poster and hold the room tone for one beat.',
+    'Call out the chapter change before the first transition.',
+    'Keep the supporting notes concise and production-friendly.',
+  ],
+}
+
+const meta = {
+  title: 'core/scene/slide/video-showcase/DefaultVideoShowcaseSlide',
+  component: DefaultVideoShowcaseSlideLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultVideoShowcaseSlideHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Multi = {
+  render: () => (
+    <DefaultVideoShowcaseMultiSlide
+      title="Clip wall"
+      subtitle="A wall of multiple video posters, useful for highlights, trailers, and edit reviews."
+      clips={[
+        { title: 'Opening scene', caption: 'First 8 seconds', duration: '00:08' },
+        { title: 'Middle beat', caption: 'Reaction shot', duration: '00:11' },
+        { title: 'Final cut', caption: 'Ending frame', duration: '00:14' },
+        { title: 'Alt take', caption: 'Alternate angle', duration: '00:09' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const MultiPortrait = {
+  render: () => (
+    <DefaultVideoShowcaseMultiSlide
+      title="Clip wall"
+      subtitle="A wall of multiple video posters, useful for highlights, trailers, and edit reviews."
+      clips={[
+        { title: 'Opening scene', caption: 'First 8 seconds', duration: '00:08' },
+        { title: 'Middle beat', caption: 'Reaction shot', duration: '00:11' },
+        { title: 'Final cut', caption: 'Ending frame', duration: '00:14' },
+        { title: 'Alt take', caption: 'Alternate angle', duration: '00:09' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}