@vibecuting/video-project-core 0.1.26 → 0.1.27

package/src/core/scene/slide/_shared/media-templates.tsx

@@ -0,0 +1,324 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+export type MediaTemplateRuntime = {
+  width: number
+  height: number
+}
+
+export type MediaTileStyle = {
+  borderRadius: number
+  border: string
+  background: string
+  boxShadow?: string
+}
+
+export type PhotoGridLayout = {
+  columns: number
+  rows: number
+  gap: number
+  cardPaddingX: number
+  cardPaddingY: number
+  cardMinHeight: number
+  mediaAspectRatio: string
+  titleLines: number
+  captionLines: number
+  visibleItems: number
+}
+
+export type VideoPosterRailLayout = {
+  railDirection: 'row' | 'column'
+  columns: number
+  rows: number
+  gap: number
+  cardPaddingX: number
+  cardPaddingY: number
+  posterAspectRatio: string
+  posterMinHeight: number
+  posterMinWidth: number
+  visibleItems: number
+}
+
+export type ProfileHeroLayout = {
+  columns: number
+  gap: number
+  cardPaddingX: number
+  cardPaddingY: number
+  avatarSize: number
+  avatarColumnSpan: number
+  bodyMaxWidth: number
+  titleLines: number
+  bioLines: number
+  statColumns: number
+}
+
+export type PhotoGridTemplateItem = {
+  title: string
+  caption?: string
+  badge?: string
+  imageLabel?: string
+  accent?: string
+}
+
+export type VideoPosterRailItem = {
+  title: string
+  caption?: string
+  duration?: string
+  badge?: string
+  posterLabel?: string
+  accent?: string
+}
+
+export type ProfileHeroStat = {
+  label: string
+  value: string
+}
+
+export type ProfileHeroTemplateItem = {
+  name: string
+  role: string
+  bio?: string
+  avatarLabel?: string
+  accent?: string
+  highlights?: string[]
+  stats?: ProfileHeroStat[]
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function deriveDensity(runtime: MediaTemplateRuntime, itemCount: number) {
+  const landscape = runtime.width >= runtime.height
+  const compact = itemCount >= 4
+  const dense = itemCount >= 6
+  const vertical = !landscape
+  return { landscape, compact, dense, vertical }
+}
+
+export function getPhotoGridLayout(itemCount: number, runtime: MediaTemplateRuntime): PhotoGridLayout {
+  const count = Math.max(1, Math.min(8, itemCount))
+  const density = deriveDensity(runtime, count)
+  const maxColumns = density.vertical ? 2 : 3
+  const columns = count <= 1 ? 1 : count === 2 ? 2 : count <= 4 ? Math.min(2, maxColumns) : Math.min(maxColumns, 3)
+  const rows = Math.ceil(count / columns)
+  const gap = density.dense ? 12 : density.compact ? 14 : 18
+
+  return {
+    columns,
+    rows,
+    gap,
+    cardPaddingX: density.dense ? 14 : density.compact ? 18 : 24,
+    cardPaddingY: density.dense ? 12 : density.compact ? 16 : 22,
+    cardMinHeight: clamp(Math.floor((runtime.height - 220 - gap * (rows - 1)) / rows), 120, density.vertical ? 340 : 420),
+    mediaAspectRatio: density.vertical ? '4 / 3' : count <= 3 ? '16 / 10' : '3 / 2',
+    titleLines: density.dense ? 2 : 3,
+    captionLines: density.dense ? 2 : 3,
+    visibleItems: count,
+  }
+}
+
+export function getVideoPosterRailLayout(
+  itemCount: number,
+  runtime: MediaTemplateRuntime,
+): VideoPosterRailLayout {
+  const count = Math.max(1, Math.min(6, itemCount))
+  const density = deriveDensity(runtime, count)
+  const railDirection: 'row' | 'column' = density.vertical || count >= 4 ? 'column' : 'row'
+  const columns = railDirection === 'column' ? 1 : clamp(count, 2, 3)
+  const rows = railDirection === 'column' ? count : Math.ceil(count / columns)
+  const gap = density.dense ? 12 : density.compact ? 14 : 18
+  const posterMinHeight = clamp(Math.floor((runtime.height - 240 - gap * (rows - 1)) / Math.max(1, rows)), 128, density.vertical ? 220 : 300)
+  const posterMinWidth = clamp(Math.floor((runtime.width - 220 - gap * (columns - 1)) / Math.max(1, columns)), 220, density.vertical ? 520 : 680)
+
+  return {
+    railDirection,
+    columns,
+    rows,
+    gap,
+    cardPaddingX: density.dense ? 14 : density.compact ? 18 : 24,
+    cardPaddingY: density.dense ? 12 : density.compact ? 16 : 22,
+    posterAspectRatio: density.vertical ? '9 / 16' : '16 / 9',
+    posterMinHeight,
+    posterMinWidth,
+    visibleItems: count,
+  }
+}
+
+export function getProfileHeroLayout(
+  runtime: MediaTemplateRuntime,
+  itemCount = 1,
+): ProfileHeroLayout {
+  const density = deriveDensity(runtime, Math.max(1, itemCount))
+  const columns = density.vertical ? 1 : 2
+  const gap = density.dense ? 14 : density.compact ? 18 : 24
+  const avatarSize = clamp(Math.round(Math.min(runtime.width, runtime.height) * (density.vertical ? 0.24 : 0.28)), 120, density.vertical ? 280 : 360)
+
+  return {
+    columns,
+    gap,
+    cardPaddingX: density.dense ? 16 : density.compact ? 20 : 28,
+    cardPaddingY: density.dense ? 14 : density.compact ? 18 : 28,
+    avatarSize,
+    avatarColumnSpan: density.vertical ? 1 : 1,
+    bodyMaxWidth: density.vertical ? runtime.width - 64 : Math.round(runtime.width * 0.52),
+    titleLines: density.dense ? 2 : 3,
+    bioLines: density.dense ? 3 : 4,
+    statColumns: density.vertical ? 2 : 3,
+  }
+}
+
+export function clampTextLines(lines: number): CSSProperties {
+  return {
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: lines,
+    overflow: 'hidden',
+  }
+}
+
+export function createTileStyle(theme: MediaTileStyle): CSSProperties {
+  return {
+    borderRadius: theme.borderRadius,
+    border: theme.border,
+    background: theme.background,
+    boxShadow: theme.boxShadow,
+    overflow: 'hidden',
+    minWidth: 0,
+    minHeight: 0,
+  }
+}
+
+export function fitMediaStyle(aspectRatio: string): CSSProperties {
+  return {
+    width: '100%',
+    aspectRatio,
+    borderRadius: 0,
+    objectFit: 'cover',
+    display: 'block',
+    minWidth: 0,
+    minHeight: 0,
+  }
+}
+
+export function stackContentStyle(gap: number): CSSProperties {
+  return {
+    display: 'grid',
+    gap,
+    minWidth: 0,
+    minHeight: 0,
+  }
+}
+
+export function gridStyle(columns: number, gap: number): CSSProperties {
+  return {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gap,
+    minWidth: 0,
+    minHeight: 0,
+  }
+}
+
+export function rowRailStyle(columns: number, gap: number): CSSProperties {
+  return {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gap,
+    minWidth: 0,
+    minHeight: 0,
+  }
+}
+
+export function columnRailStyle(rows: number, gap: number): CSSProperties {
+  return {
+    display: 'grid',
+    gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+    gap,
+    minWidth: 0,
+    minHeight: 0,
+  }
+}
+
+export function safeFullSizeStyle(extra: CSSProperties = {}): CSSProperties {
+  return {
+    minWidth: 0,
+    minHeight: 0,
+    maxWidth: '100%',
+    maxHeight: '100%',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    ...extra,
+  }
+}
+
+export function renderMediaBadge(label?: string) {
+  if (!label) {
+    return null
+  }
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 22,
+        padding: '0 8px',
+        borderRadius: 0,
+        border: '1px solid rgba(148,163,184,0.28)',
+        background: 'rgba(255,255,255,0.72)',
+        color: 'inherit',
+        fontSize: 11,
+        fontWeight: 700,
+        letterSpacing: '0.06em',
+        textTransform: 'uppercase',
+      }}
+    >
+      {label}
+    </span>
+  )
+}
+
+export function renderMediaPlaceholder(label: string, aspectRatio: string, background: string) {
+  return (
+    <div
+      style={{
+        ...fitMediaStyle(aspectRatio),
+        display: 'grid',
+        placeItems: 'center',
+        color: '#e2e8f0',
+        background,
+        border: '1px solid rgba(148,163,184,0.18)',
+        fontSize: 12,
+        fontWeight: 700,
+        letterSpacing: '0.04em',
+        textTransform: 'uppercase',
+      }}
+    >
+      {label}
+    </div>
+  )
+}
+
+export type MediaTemplateSectionProps = {
+  children: ReactNode
+  style?: CSSProperties
+}
+
+export function MediaTemplateSection({ children, style }: MediaTemplateSectionProps) {
+  return (
+    <section
+      style={{
+        width: '100%',
+        height: '100%',
+        minWidth: 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      {children}
+    </section>
+  )
+}

package/src/core/scene/slide/index.test.ts

@@ -52,6 +52,11 @@ import {
   DefaultFeatureListSlide,
   componentMetadata as galleryMetadata,
   DefaultGallerySlide,
+  componentMetadata as photoAlbumMetadata,
+  DefaultPhotoAlbumSlide,
+  DefaultPhotoAlbumSingleSlide,
+  DefaultPhotoAlbumPairSlide,
+  DefaultPhotoAlbumMultiSlide,
   componentMetadata as faqAccordionMetadata,
   DefaultFAQAccordionSlide,
   componentMetadata as faqMetadata,
@@ -64,6 +69,12 @@ import {
   DefaultHeroVariantSlide,
   componentMetadata as imageHeroMetadata,
   DefaultImageHeroSlide,
+  componentMetadata as personIntroMetadata,
+  DefaultPersonIntroSlide,
+  DefaultPersonIntroGroupSlide,
+  DefaultPersonIntroDuoSlide,
+  DefaultPersonIntroTrioSlide,
+  DefaultPersonIntroQuadSlide,
   componentMetadata as interactiveDemoMetadata,
   DefaultInteractiveDemoSlide,
   componentMetadata as kpiDashboardMetadata,
@@ -90,6 +101,9 @@ import {
   DefaultMapLocationSlide,
   componentMetadata as orgChartMetadata,
   DefaultOrgChartSlide,
+  componentMetadata as videoShowcaseMetadata,
+  DefaultVideoShowcaseSlide,
+  DefaultVideoShowcaseMultiSlide,
   componentMetadata as stackTimelineMetadata,
   DefaultStackTimelineSlide,
   componentMetadata as processMetadata,
@@ -185,6 +199,7 @@ describe('video-project-core slide exports', () => {
     expect(geoMapMetadata.sceneFamily).toBe('slide')
     expect(diagramMatrixMetadata.sceneFamily).toBe('slide')
     expect(galleryMetadata.sceneFamily).toBe('slide')
+    expect(photoAlbumMetadata.sceneFamily).toBe('slide')
     expect(kpiDashboardMetadata.sceneFamily).toBe('slide')
     expect(heroVariantMetadata.sceneFamily).toBe('slide')
     expect(interactiveDemoMetadata.sceneFamily).toBe('slide')
@@ -244,6 +259,10 @@ describe('video-project-core slide exports', () => {
     expect(DefaultFeatureGridSlide).toBeTypeOf('function')
     expect(DefaultFeatureListSlide).toBeTypeOf('function')
     expect(DefaultGallerySlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumSlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumSingleSlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumPairSlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumMultiSlide).toBeTypeOf('function')
     expect(DefaultFAQAccordionSlide).toBeTypeOf('function')
     expect(DefaultFAQSlide).toBeTypeOf('function')
     expect(DefaultFAQSidecarSlide).toBeTypeOf('function')
@@ -261,6 +280,7 @@ describe('video-project-core slide exports', () => {
     expect(DefaultFlowDiagramSlide).toBeTypeOf('function')
     expect(DefaultMapLocationSlide).toBeTypeOf('function')
     expect(DefaultOrgChartSlide).toBeTypeOf('function')
+    expect(videoShowcaseMetadata.sceneFamily).toBe('slide')
     expect(DefaultStackTimelineSlide).toBeTypeOf('function')
     expect(DefaultPricingSlide).toBeTypeOf('function')
     expect(DefaultProsConsSlide).toBeTypeOf('function')
@@ -294,8 +314,16 @@ describe('video-project-core slide exports', () => {
     expect(threeColumnMetadata.sceneFamily).toBe('slide')
     expect(DefaultHeroSlide).toBeTypeOf('function')
     expect(DefaultImageHeroSlide).toBeTypeOf('function')
+    expect(personIntroMetadata.sceneFamily).toBe('slide')
+    expect(DefaultPersonIntroSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroGroupSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroDuoSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroTrioSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroQuadSlide).toBeTypeOf('function')
     expect(DefaultSplitSlide).toBeTypeOf('function')
     expect(DefaultChapterSlide).toBeTypeOf('function')
     expect(DefaultThreeColumnSlide).toBeTypeOf('function')
+    expect(DefaultVideoShowcaseSlide).toBeTypeOf('function')
+    expect(DefaultVideoShowcaseMultiSlide).toBeTypeOf('function')
   })
 })

package/src/core/scene/slide/index.ts

@@ -32,10 +32,19 @@ export { DefaultFeatureGridSlide } from './feature-grid'
 export { DefaultFeatureListSlide } from './feature-list'
 export { DefaultFlowDiagramSlide } from './flow-diagram'
 export { DefaultGallerySlide } from './gallery'
+export { DefaultPhotoAlbumSlide } from './photo-album'
+export { DefaultPhotoAlbumSingleSlide } from './photo-album'
+export { DefaultPhotoAlbumPairSlide } from './photo-album'
+export { DefaultPhotoAlbumMultiSlide } from './photo-album'
 export { DefaultGeoMapSlide } from './geo-map'
 export { DefaultHeroSlide } from './hero'
 export { DefaultHeroVariantSlide } from './hero-variant'
 export { DefaultImageHeroSlide } from './image-hero'
+export { DefaultPersonIntroSlide } from './person-intro'
+export { DefaultPersonIntroGroupSlide } from './person-intro'
+export { DefaultPersonIntroDuoSlide } from './person-intro'
+export { DefaultPersonIntroTrioSlide } from './person-intro'
+export { DefaultPersonIntroQuadSlide } from './person-intro'
 export { DefaultInteractiveDemoSlide } from './interactive-demo'
 export { DefaultKPIDashboardSlide } from './kpi-dashboard'
 export { DefaultListHeroSlide } from './list-hero'
@@ -49,6 +58,8 @@ export { DefaultMetricShowcaseSlide } from './metric-showcase'
 export { DefaultMetricsStripSlide } from './metrics-strip'
 export { DefaultMermaidDiagramSlide } from './mermaid-diagram'
 export { DefaultOrgChartSlide } from './org-chart'
+export { DefaultVideoShowcaseSlide } from './video-showcase'
+export { DefaultVideoShowcaseMultiSlide } from './video-showcase'
 export { DefaultPricingSlide } from './pricing'
 export { DefaultProcessCardsSlide } from './process-cards'
 export { DefaultProcessSlide } from './process'
@@ -111,10 +122,12 @@ export const featureGridMetadata = slideSceneMetadata
 export const featureListMetadata = slideSceneMetadata
 export const flowDiagramMetadata = slideSceneMetadata
 export const galleryMetadata = slideSceneMetadata
+export const photoAlbumMetadata = slideSceneMetadata
 export const geoMapMetadata = slideSceneMetadata
 export const heroMetadata = slideSceneMetadata
 export const heroVariantMetadata = slideSceneMetadata
 export const imageHeroMetadata = slideSceneMetadata
+export const personIntroMetadata = slideSceneMetadata
 export const interactiveDemoMetadata = slideSceneMetadata
 export const kpiDashboardMetadata = slideSceneMetadata
 export const listHeroMetadata = slideSceneMetadata
@@ -128,6 +141,7 @@ export const metricShowcaseMetadata = slideSceneMetadata
 export const metricsStripMetadata = slideSceneMetadata
 export const mermaidDiagramMetadata = slideSceneMetadata
 export const orgChartMetadata = slideSceneMetadata
+export const videoShowcaseMetadata = slideSceneMetadata
 export const pricingMetadata = slideSceneMetadata
 export const processCardsMetadata = slideSceneMetadata
 export const processMetadata = slideSceneMetadata

package/src/core/scene/slide/person-intro/default-person-intro-duo-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: 'DefaultPersonIntroDuoSlide',
+  description: 'Two person intro slide',
+  sourceFile: 'src/core/scene/slide/person-intro/default-person-intro-duo-slide.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'duo', 'two-person'])),
+}
+
+export const DefaultPersonIntroDuoSlide = VideoComponent(componentMetadata)(function DefaultPersonIntroDuoSlide(
+  props: ComponentProps<typeof DefaultPersonIntroGroupSlide>,
+) {
+  return <DefaultPersonIntroGroupSlide {...props} />
+})

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

@@ -0,0 +1,168 @@
+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 PersonIntroGroupMember {
+  name: string
+  role?: string
+  bio?: string
+  avatar?: ReactNode
+}
+
+export interface DefaultPersonIntroGroupSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  people: PersonIntroGroupMember[]
+}
+
+function PersonGroupAvatarFallback({ name }: { name: string }) {
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0] ?? '')
+    .join('')
+    .toUpperCase()
+
+  return (
+    <div style={{ width: '100%', height: '100%', display: 'grid', placeItems: 'center', background: 'linear-gradient(135deg, rgba(59,130,246,0.34), rgba(14,165,233,0.18))', color: '#f8fafc', fontSize: 32, fontWeight: 800 }}>
+      {initials || 'P'}
+    </div>
+  )
+}
+
+function PersonGroupCard({ member, scale }: { member: PersonIntroGroupMember; scale: ReturnType<typeof getSlideTypographyScale> }) {
+  return (
+    <article
+      style={{
+        minWidth: 0,
+        minHeight: 0,
+        padding: 14,
+        display: 'grid',
+        gap: 12,
+        background: 'rgba(15,23,42,0.58)',
+        border: '1px solid rgba(148,163,184,0.18)',
+        color: '#e2e8f0',
+        overflow: 'hidden',
+      }}
+    >
+      <div style={{ display: 'grid', gridTemplateColumns: '92px 1fr', gap: 14, alignItems: 'center', minWidth: 0 }}>
+        <div style={{ width: 92, height: 92, overflow: 'hidden', borderRadius: 0, border: '1px solid rgba(148,163,184,0.22)', background: 'rgba(2,6,23,0.88)' }}>
+          {member.avatar ?? <PersonGroupAvatarFallback name={member.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.86)' }}>Profile</div>
+          <h3 style={{ margin: 0, fontSize: Math.max(scale.body * 1.02, 22), lineHeight: 1.02, letterSpacing: '-0.05em' }}>{member.name}</h3>
+          {member.role ? <div style={{ fontSize: scale.caption, lineHeight: 1.4, opacity: 0.82 }}>{member.role}</div> : null}
+        </div>
+      </div>
+      {member.bio ? <p style={{ margin: 0, fontSize: scale.caption, lineHeight: 1.5, color: 'rgba(226,232,240,0.8)' }}>{member.bio}</p> : null}
+    </article>
+  )
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultPersonIntroGroupSlide',
+  description: 'Multi person intro slide',
+  sourceFile: 'src/core/scene/slide/person-intro/default-person-intro-group-slide.tsx',
+  pluginKey: 'core.slide.person-intro.group',
+  tags: ['scene', 'slide', 'person', 'profile', 'group'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultPersonIntroGroupSlideProps',
+})
+
+export const DefaultPersonIntroGroupSlide = 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(),
+      people: z
+        .array(
+          z.object({
+            name: z.string().min(1),
+            role: z.string().optional(),
+            bio: z.string().optional(),
+            avatar: z.any().optional(),
+          }),
+        )
+        .min(2)
+        .max(4),
+    }),
+    component: function DefaultPersonIntroGroupSlide({ sceneId, sceneName, title, subtitle, people }: DefaultPersonIntroGroupSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      const grid = getOverflowSafeSlideGridLayout(people.length, isPortrait ? 1 : 2, {
+        runtimeWidth: runtime.width,
+        reservedWidth: isPortrait ? 40 : 120,
+        runtimeHeight: runtime.height,
+        reservedHeight: isPortrait ? 420 : 240,
+        minCardWidth: isPortrait ? 220 : 240,
+        minCardHeight: isPortrait ? 168 : 180,
+      })
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 48%, #1e293b 100%)"
+        >
+          <section
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'grid',
+              gridTemplateRows: 'auto minmax(0, 1fr)',
+              gap: isPortrait ? 18 : 24,
+              padding: isPortrait ? '40px 24px' : '60px 72px',
+              color: '#e2e8f0',
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            <SceneMotionLayer variant="hero-title">
+              <div style={{ display: 'grid', gap: 12, maxWidth: isPortrait ? 620 : 760, minWidth: 0 }}>
+                <div style={{ fontSize: scale.eyebrow, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(148,163,184,0.9)' }}>Team intro</div>
+                <h1 style={{ margin: 0, fontSize: isPortrait ? scale.title * 0.76 : 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 }}>{subtitle}</p> : null}
+              </div>
+            </SceneMotionLayer>
+
+            <SceneMotionLayer variant="panel" delayIndex={1}>
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: `repeat(${Math.max(1, grid.columns)}, minmax(0, 1fr))`,
+                  gap: grid.gap,
+                  minWidth: 0,
+                  minHeight: 0,
+                }}
+              >
+                {people.slice(0, 4).map((member, index) => (
+                  <SceneMotionLayer key={`${member.name}-${index}`} variant="card" delayIndex={index + 1}>
+                    <PersonGroupCard member={member} scale={scale} />
+                  </SceneMotionLayer>
+                ))}
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/person-intro/default-person-intro-quad-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: 'DefaultPersonIntroQuadSlide',
+  description: 'Four person intro slide',
+  sourceFile: 'src/core/scene/slide/person-intro/default-person-intro-quad-slide.tsx',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'quad', 'four-person'])),
+}
+
+export const DefaultPersonIntroQuadSlide = VideoComponent(componentMetadata)(function DefaultPersonIntroQuadSlide(
+  props: ComponentProps<typeof DefaultPersonIntroGroupSlide>,
+) {
+  return <DefaultPersonIntroGroupSlide {...props} />
+})