@vibecuting/video-project-core 0.1.25 → 0.1.27

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

@@ -0,0 +1,47 @@
+import { DefaultPersonIntroSlideHorizontal } from './default-person-intro-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/person-intro/DefaultPersonIntroSlideHorizontal/Animated',
+  component: DefaultPersonIntroSlideHorizontal,
+  args: {
+    name: 'Avery Chen',
+    role: 'Creative Director, Product Storytelling',
+    bio: 'Designs presentation systems that turn product updates, launches, and leadership narratives into concise visual stories.',
+    avatar: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          placeItems: 'center',
+          background: 'linear-gradient(135deg, #38bdf8 0%, #2563eb 100%)',
+          color: '#f8fafc',
+          fontSize: 42,
+          fontWeight: 800,
+          letterSpacing: '-0.06em',
+        }}
+      >
+        AC
+      </div>
+    ),
+    links: [
+      { label: 'Website', href: 'https://example.com', meta: 'averychen.dev' },
+      { label: 'LinkedIn', href: 'https://www.linkedin.com', meta: 'Profile' },
+      { label: 'Email', href: 'mailto:avery@example.com', meta: 'Direct contact' },
+    ],
+    highlights: [
+      { label: 'Talks', value: '48', detail: 'Keynotes, workshops, and internal launch reviews.' },
+      { label: 'Audience', value: '120K', detail: 'Cross-platform following and community reach.' },
+      { label: 'Specialty', value: 'Narrative systems', detail: 'Messaging, visual rhythm, and reusable deck patterns.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,46 @@
+import { DefaultPersonIntroSlideHorizontal } from './default-person-intro-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/person-intro/DefaultPersonIntroSlideHorizontal',
+  component: DefaultPersonIntroSlideHorizontal,
+  args: {
+    name: 'Avery Chen',
+    role: 'Creative Director, Product Storytelling',
+    bio: 'Designs presentation systems that turn product updates, launches, and leadership narratives into concise visual stories.',
+    avatar: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          placeItems: 'center',
+          background: 'linear-gradient(135deg, #38bdf8 0%, #2563eb 100%)',
+          color: '#f8fafc',
+          fontSize: 42,
+          fontWeight: 800,
+          letterSpacing: '-0.06em',
+        }}
+      >
+        AC
+      </div>
+    ),
+    links: [
+      { label: 'Website', href: 'https://example.com', meta: 'averychen.dev' },
+      { label: 'LinkedIn', href: 'https://www.linkedin.com', meta: 'Profile' },
+      { label: 'Email', href: 'mailto:avery@example.com', meta: 'Direct contact' },
+    ],
+    highlights: [
+      { label: 'Talks', value: '48', detail: 'Keynotes, workshops, and internal launch reviews.' },
+      { label: 'Audience', value: '120K', detail: 'Cross-platform following and community reach.' },
+      { label: 'Specialty', value: 'Narrative systems', detail: 'Messaging, visual rhythm, and reusable deck patterns.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,302 @@
+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'
+import type { DefaultPersonIntroSlideProps, PersonIntroHighlight, PersonIntroLink } from './default-person-intro-slide'
+import { personIntroPropsSchema } from './default-person-intro-slide'
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultPersonIntroSlideHorizontal',
+  description: 'Profile-first person introduction slide (Portrait 9:16 variant)',
+  sourceFile: 'src/core/scene/slide/person-intro/default-person-intro-slide-Horizontal.tsx',
+  pluginKey: 'core.slide.person-intro',
+  tags: ['scene', 'slide', 'person', 'profile', 'intro', 'horizontal'],
+  aspectRatio: '9:16',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultPersonIntroSlideProps',
+})
+
+function PersonIntroAvatarFallback({ name }: { name: string }) {
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0] ?? '')
+    .join('')
+    .toUpperCase() || 'P'
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        placeItems: 'center',
+        background: 'linear-gradient(135deg, rgba(56,189,248,0.3), rgba(34,197,94,0.12))',
+        color: '#f8fafc',
+        fontSize: 'clamp(28px, 7vw, 48px)',
+        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.64)',
+        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: '14px',
+        display: 'grid',
+        gap: 6,
+        background: 'rgba(15,23,42,0.64)',
+        border: '1px solid rgba(148,163,184,0.16)',
+        color: '#e2e8f0',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.9)' }}>{highlight.label}</div>
+      {highlight.value ? <div style={{ fontSize: 'clamp(18px, 4.8vw, 28px)', fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.05em' }}>{highlight.value}</div> : null}
+      {highlight.detail ? (
+        <div
+          style={{
+            fontSize: 13,
+            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 DefaultPersonIntroSlideHorizontal = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: personIntroPropsSchema,
+    component: function DefaultPersonIntroSlideHorizontal({
+      sceneId,
+      sceneName,
+      name,
+      role,
+      bio,
+      avatar,
+      links = [],
+      highlights = [],
+    }: DefaultPersonIntroSlideProps & DefaultSceneProps) {
+      const runtime = useRemotionSceneRuntime()
+      const scale = getSlideTypographyScale(runtime.height)
+      const linkGrid = getOverflowSafeSlideGridLayout(links.length || 1, 2, {
+        runtimeWidth: runtime.width,
+        reservedWidth: 48,
+        runtimeHeight: runtime.height,
+        reservedHeight: 440,
+        minCardWidth: 128,
+        minCardHeight: 48,
+      })
+      const highlightGrid = getOverflowSafeSlideGridLayout(highlights.length || 1, 2, {
+        runtimeWidth: runtime.width,
+        reservedWidth: 48,
+        runtimeHeight: runtime.height,
+        reservedHeight: 360,
+        minCardWidth: 140,
+        minCardHeight: 92,
+      })
+      const avatarSize = Math.max(104, Math.round(runtime.width * 0.34))
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? name}
+          background="linear-gradient(180deg, #020617 0%, #0f172a 48%, #111827 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateRows: 'auto auto auto auto',
+              gap: 14,
+              padding: '34px 20px',
+              color: '#e2e8f0',
+              alignContent: 'start',
+            }}
+          >
+            <SceneMotionLayer variant="panel">
+              <article
+                style={{
+                  padding: 16,
+                  display: 'grid',
+                  gap: 14,
+                  background: 'rgba(15,23,42,0.58)',
+                  border: '1px solid rgba(148,163,184,0.18)',
+                  overflow: 'hidden',
+                }}
+              >
+                <div style={{ display: 'grid', justifyItems: 'center', gap: 12, 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, textAlign: 'center', display: 'grid', gap: 6 }}>
+                    <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.9)' }}>Profile</div>
+                    <h1 style={{ margin: 0, fontSize: Math.max(scale.title * 0.84, 34), lineHeight: 0.95, letterSpacing: '-0.06em' }}>{name}</h1>
+                    {role ? (
+                      <div
+                        style={{
+                          fontSize: scale.body * 0.92,
+                          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: scale.body * 0.86,
+                      lineHeight: 1.5,
+                      color: 'rgba(226,232,240,0.78)',
+                      display: '-webkit-box',
+                      WebkitBoxOrient: 'vertical',
+                      WebkitLineClamp: 4,
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {bio}
+                  </div>
+                ) : null}
+              </article>
+            </SceneMotionLayer>
+
+            {links.length ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <article
+                  style={{
+                    padding: 14,
+                    background: 'rgba(2,6,23,0.46)',
+                    border: '1px solid rgba(148,163,184,0.16)',
+                    display: 'grid',
+                    gap: 12,
+                    overflow: 'hidden',
+                  }}
+                >
+                  <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: 10,
+                    }}
+                  >
+                    {links.slice(0, 5).map((link) => (
+                      <PersonIntroLinkChip key={`${link.label}-${link.href ?? link.meta ?? ''}`} link={link} />
+                    ))}
+                  </div>
+                </article>
+              </SceneMotionLayer>
+            ) : null}
+
+            <SceneMotionLayer variant="card" delayIndex={2}>
+              <article
+                style={{
+                  padding: 14,
+                  background: 'rgba(2,6,23,0.46)',
+                  border: '1px solid rgba(148,163,184,0.16)',
+                  display: 'grid',
+                  gap: 12,
+                  overflow: 'hidden',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
+                  <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.84)' }}>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: 'Native portrait', detail: 'A vertical layout that gives the avatar, identity, and proof points room to breathe.' }]).slice(0, 5).map((highlight, index) => (
+                    <SceneMotionLayer key={`${highlight.label}-${index}`} variant="card" delayIndex={index + 3}>
+                      <PersonIntroHighlightCard highlight={highlight} />
+                    </SceneMotionLayer>
+                  ))}
+                </div>
+              </article>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

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

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

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

@@ -0,0 +1,126 @@
+import { DefaultPersonIntroSlide } from './default-person-intro-slide'
+import { DefaultPersonIntroGroupSlide } from './default-person-intro-group-slide'
+
+const meta = {
+  title: 'core/scene/slide/person-intro/DefaultPersonIntroSlide/Animated',
+  component: DefaultPersonIntroSlide,
+  args: {
+    name: 'Avery Chen',
+    role: 'Creative Director, Product Storytelling',
+    bio: 'Designs presentation systems that turn product updates, launches, and leadership narratives into concise visual stories.',
+    avatar: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          placeItems: 'center',
+          background: 'linear-gradient(135deg, #38bdf8 0%, #2563eb 100%)',
+          color: '#f8fafc',
+          fontSize: 42,
+          fontWeight: 800,
+          letterSpacing: '-0.06em',
+        }}
+      >
+        AC
+      </div>
+    ),
+    links: [
+      { label: 'Website', href: 'https://example.com', meta: 'averychen.dev' },
+      { label: 'LinkedIn', href: 'https://www.linkedin.com', meta: 'Profile' },
+      { label: 'Email', href: 'mailto:avery@example.com', meta: 'Direct contact' },
+    ],
+    highlights: [
+      { label: 'Talks', value: '48', detail: 'Keynotes, workshops, and internal launch reviews.' },
+      { label: 'Audience', value: '120K', detail: 'Cross-platform following and community reach.' },
+      { label: 'Specialty', value: 'Narrative systems', detail: 'Messaging, visual rhythm, and reusable deck patterns.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Duo = {
+  render: () => (
+    <DefaultPersonIntroGroupSlide
+      title="Two voices, one team"
+      subtitle="Animated two-person intro."
+      people={[
+        { name: 'Avery Chen', role: 'Creative Director, Product Storytelling', bio: 'Shapes presentation systems and launch narratives.' },
+        { name: 'Jordan Lee', role: 'Design Systems Lead', bio: 'Builds reusable patterns and production-ready slide structures.' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Trio = {
+  render: () => (
+    <DefaultPersonIntroGroupSlide
+      title="Three people, one message"
+      subtitle="Animated three-person intro."
+      people={[
+        { name: 'Avery Chen', role: 'Creative Director', bio: 'Narrative systems and launch content.' },
+        { name: 'Jordan Lee', role: 'Design Systems Lead', bio: 'Design tokens and component patterns.' },
+        { name: 'Maya Patel', role: 'Motion Director', bio: 'Motion language and polished transitions.' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Quad = {
+  render: () => (
+    <DefaultPersonIntroGroupSlide
+      title="Four-person panel"
+      subtitle="Animated four-person intro."
+      people={[
+        { name: 'Avery Chen', role: 'Creative Director', bio: 'Narrative systems and launch content.' },
+        { name: 'Jordan Lee', role: 'Design Systems Lead', bio: 'Design tokens and component patterns.' },
+        { name: 'Maya Patel', role: 'Motion Director', bio: 'Motion language and polished transitions.' },
+        { name: 'Noah Kim', role: 'Product Manager', bio: 'Roadmaps, positioning, and stakeholder alignment.' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const DuoPortrait = {
+  render: Duo.render,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const TrioPortrait = {
+  render: Trio.render,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const QuadPortrait = {
+  render: Quad.render,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,119 @@
+import { DefaultPersonIntroSlide } from './default-person-intro-slide'
+import { DefaultPersonIntroGroupSlide } from './default-person-intro-group-slide'
+
+const meta = {
+  title: 'core/scene/slide/person-intro/DefaultPersonIntroSlide',
+  component: DefaultPersonIntroSlide,
+  args: {
+    name: 'Avery Chen',
+    role: 'Creative Director, Product Storytelling',
+    bio: 'Designs presentation systems that turn product updates, launches, and leadership narratives into concise visual stories.',
+    avatar: (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          placeItems: 'center',
+          background: 'linear-gradient(135deg, #38bdf8 0%, #2563eb 100%)',
+          color: '#f8fafc',
+          fontSize: 42,
+          fontWeight: 800,
+          letterSpacing: '-0.06em',
+        }}
+      >
+        AC
+      </div>
+    ),
+    links: [
+      { label: 'Website', href: 'https://example.com', meta: 'averychen.dev' },
+      { label: 'LinkedIn', href: 'https://www.linkedin.com', meta: 'Profile' },
+      { label: 'Email', href: 'mailto:avery@example.com', meta: 'Direct contact' },
+    ],
+    highlights: [
+      { label: 'Talks', value: '48', detail: 'Keynotes, workshops, and internal launch reviews.' },
+      { label: 'Audience', value: '120K', detail: 'Cross-platform following and community reach.' },
+      { label: 'Specialty', value: 'Narrative systems', detail: 'Messaging, visual rhythm, and reusable deck patterns.' },
+    ],
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Duo = {
+  render: () => (
+    <DefaultPersonIntroGroupSlide
+      title="Two voices, one team"
+      subtitle="Use this template for co-founders, hosts, collaborators, or paired introductions."
+      people={[
+        { name: 'Avery Chen', role: 'Creative Director, Product Storytelling', bio: 'Shapes presentation systems and launch narratives.' },
+        { name: 'Jordan Lee', role: 'Design Systems Lead', bio: 'Builds reusable patterns and production-ready slide structures.' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Trio = {
+  render: () => (
+    <DefaultPersonIntroGroupSlide
+      title="Three people, one message"
+      subtitle="A three-person intro card for small teams or panelist highlights."
+      people={[
+        { name: 'Avery Chen', role: 'Creative Director', bio: 'Narrative systems and launch content.' },
+        { name: 'Jordan Lee', role: 'Design Systems Lead', bio: 'Design tokens and component patterns.' },
+        { name: 'Maya Patel', role: 'Motion Director', bio: 'Motion language and polished transitions.' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Quad = {
+  render: () => (
+    <DefaultPersonIntroGroupSlide
+      title="Four-person panel"
+      subtitle="A larger roster layout for leadership teams or interview panels."
+      people={[
+        { name: 'Avery Chen', role: 'Creative Director', bio: 'Narrative systems and launch content.' },
+        { name: 'Jordan Lee', role: 'Design Systems Lead', bio: 'Design tokens and component patterns.' },
+        { name: 'Maya Patel', role: 'Motion Director', bio: 'Motion language and polished transitions.' },
+        { name: 'Noah Kim', role: 'Product Manager', bio: 'Roadmaps, positioning, and stakeholder alignment.' },
+      ]}
+    />
+  ),
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const DuoPortrait = {
+  render: Duo.render,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const TrioPortrait = {
+  render: Trio.render,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const QuadPortrait = {
+  render: Quad.render,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}