@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/base/use-scene-child-motion.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSceneChildMotionStyle } from './use-scene-child-motion'
+
+describe('getSceneChildMotionStyle', () => {
+  it('returns an empty style in static mode', () => {
+    expect(getSceneChildMotionStyle(18, 30, 0, false)).toEqual({})
+  })
+
+  it('returns a spring-based entry style in animation mode', () => {
+    const style = getSceneChildMotionStyle(15, 30, 1, true, {
+      distance: 20,
+      scale: 0.96,
+      delayStepFrames: 3,
+    })
+
+    expect(style.opacity).toBeGreaterThan(0)
+    expect(style.opacity).toBeLessThanOrEqual(1)
+    expect(style.transform).toContain('translate3d(')
+    expect(style.transform).toContain('scale(')
+    expect(style.transformOrigin).toBe('center center')
+  })
+})

package/src/base/use-scene-child-motion.tsx

@@ -0,0 +1,230 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { Children, Fragment, cloneElement, isValidElement, useMemo } from 'react'
+
+import { spring } from 'remotion'
+
+import { useSceneMotion } from './use-scene-motion'
+
+export type SceneMotionVariant =
+  | 'ambient'
+  | 'hero-title'
+  | 'hero-copy'
+  | 'panel'
+  | 'card'
+  | 'list-item'
+  | 'quote'
+  | 'stat'
+  | 'chart-bar'
+  | 'timeline-item'
+  | 'media'
+
+export type SceneChildMotionOptions = {
+  distance?: number
+  scale?: number
+  delayStepFrames?: number
+  direction?: 'up' | 'down' | 'left' | 'right'
+}
+
+function getVariantDefaults(variant: SceneMotionVariant) {
+  switch (variant) {
+    case 'hero-title':
+      return { distance: 24, scale: 0.97, direction: 'up' as const, delayStepFrames: 3 }
+    case 'hero-copy':
+      return { distance: 18, scale: 0.985, direction: 'up' as const, delayStepFrames: 4 }
+    case 'panel':
+      return { distance: 18, scale: 0.985, direction: 'right' as const, delayStepFrames: 4 }
+    case 'card':
+      return { distance: 16, scale: 0.975, direction: 'up' as const, delayStepFrames: 4 }
+    case 'list-item':
+      return { distance: 12, scale: 1, direction: 'left' as const, delayStepFrames: 2 }
+    case 'quote':
+      return { distance: 16, scale: 0.988, direction: 'up' as const, delayStepFrames: 3 }
+    case 'stat':
+      return { distance: 16, scale: 0.975, direction: 'up' as const, delayStepFrames: 3 }
+    case 'chart-bar':
+      return { distance: 0, scale: 1, direction: 'right' as const, delayStepFrames: 2 }
+    case 'timeline-item':
+      return { distance: 18, scale: 0.98, direction: 'up' as const, delayStepFrames: 4 }
+    case 'media':
+      return { distance: 10, scale: 0.96, direction: 'up' as const, delayStepFrames: 3 }
+    case 'ambient':
+    default:
+      return { distance: 10, scale: 0.992, direction: 'up' as const, delayStepFrames: 4 }
+  }
+}
+
+export function getSceneChildMotionStyle(
+  frame: number,
+  fps: number,
+  index: number,
+  isAnimation: boolean,
+  options: SceneChildMotionOptions & { variant?: SceneMotionVariant } = {},
+): CSSProperties {
+  if (!isAnimation) {
+    return {}
+  }
+
+  const defaults = getVariantDefaults(options.variant ?? 'ambient')
+  const distance = options.distance ?? defaults.distance
+  const scale = options.scale ?? defaults.scale
+  const delayStepFrames = options.delayStepFrames ?? defaults.delayStepFrames
+  const direction = options.direction ?? defaults.direction
+  const delayedFrame = Math.max(0, frame - index * delayStepFrames)
+  const progress = spring({
+    frame: delayedFrame,
+    fps,
+    config: {
+      damping: 18,
+      mass: 0.8,
+      stiffness: 110,
+    },
+  })
+
+  const translateX = direction === 'left' ? (1 - progress) * -distance : direction === 'right' ? (1 - progress) * distance : 0
+  const translateY = direction === 'up' ? (1 - progress) * distance : direction === 'down' ? (1 - progress) * -distance : 0
+
+  return {
+    opacity: progress,
+    transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale + progress * (1 - scale)})`,
+    transformOrigin: 'center center',
+    willChange: 'transform, opacity',
+  }
+}
+
+function flattenSceneChildren(children: ReactNode): ReactNode[] {
+  const items: ReactNode[] = []
+
+  for (const child of Children.toArray(children)) {
+    if (isValidElement(child) && child.type === Fragment) {
+      items.push(...flattenSceneChildren(child.props.children))
+      continue
+    }
+
+    items.push(child)
+  }
+
+  return items
+}
+
+export type SceneMotionStackProps = {
+  children: ReactNode
+  delayStepFrames?: number
+  distance?: number
+  scale?: number
+  variant?: SceneMotionVariant
+}
+
+export function SceneMotionStack({
+  children,
+  delayStepFrames,
+  distance,
+  scale,
+  variant = 'ambient',
+}: SceneMotionStackProps) {
+  const sceneMotion = useSceneMotion()
+  const items = useMemo(() => flattenSceneChildren(children), [children])
+
+  if (!sceneMotion.isAnimation) {
+    return <>{children}</>
+  }
+
+  return (
+    <>
+      {items.map((child, index) => {
+        const motionStyle = getSceneChildMotionStyle(
+          sceneMotion.frame,
+          sceneMotion.fps,
+          index,
+          sceneMotion.isAnimation,
+          {
+            delayStepFrames,
+            distance,
+            scale,
+            variant,
+          },
+        )
+
+        if (isValidElement(child)) {
+          const childProps = child.props as {
+            style?: CSSProperties
+            'aria-hidden'?: boolean | 'true' | 'false'
+            'data-scene-motion'?: string
+          }
+
+          if (childProps['data-scene-motion'] === 'none' || childProps['aria-hidden'] === true || childProps['aria-hidden'] === 'true') {
+            return child
+          }
+
+          const existingStyle = childProps.style ?? {}
+          const mergedStyle: CSSProperties = {
+            ...existingStyle,
+            ...motionStyle,
+          }
+
+          if (existingStyle.transform && motionStyle.transform) {
+            mergedStyle.transform = `${existingStyle.transform} ${motionStyle.transform}`
+          }
+
+          if (typeof existingStyle.opacity === 'number' && typeof motionStyle.opacity === 'number') {
+            mergedStyle.opacity = existingStyle.opacity * motionStyle.opacity
+          }
+
+          return cloneElement(child, {
+            ...( {
+              'data-scene-motion-child': index,
+              style: mergedStyle,
+            } as Record<string, unknown>),
+          })
+        }
+
+        return (
+          <div
+            key={`scene-motion-child-${index}`}
+            style={{
+              width: '100%',
+              ...motionStyle,
+            }}
+          >
+            {child}
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export type SceneMotionLayerProps = {
+  children: ReactNode
+  className?: string
+  style?: CSSProperties
+  variant?: SceneMotionVariant
+  delayIndex?: number
+  delayStepFrames?: number
+}
+
+export function SceneMotionLayer({
+  children,
+  className,
+  style,
+  variant = 'ambient',
+  delayIndex = 0,
+  delayStepFrames,
+}: SceneMotionLayerProps) {
+  const sceneMotion = useSceneMotion()
+  const motionStyle = getSceneChildMotionStyle(sceneMotion.frame, sceneMotion.fps, delayIndex, sceneMotion.isAnimation, {
+    variant,
+    delayStepFrames,
+  })
+
+  return (
+    <div
+      className={className}
+      style={{
+        ...style,
+        ...motionStyle,
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/base/use-scene-config.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext, useMemo } from 'react'
+
+import type { SceneTheme } from '../themes'
+
+export type SceneDisplayMode = 'static' | 'animation'
+
+export const DEFAULT_SCENE_IN_FRAMES = 150
+
+export type SceneConfig = {
+  sceneType: SceneDisplayMode
+  sceneInFrames: number
+  sceneTheme?: SceneTheme
+  sceneToken?: string
+}
+
+const defaultSceneConfig: SceneConfig = {
+  sceneType: 'static',
+  sceneInFrames: DEFAULT_SCENE_IN_FRAMES,
+  sceneTheme: undefined,
+  sceneToken: undefined,
+}
+
+const SceneConfigContext = createContext<SceneConfig>(defaultSceneConfig)
+
+export type SceneConfigProviderProps = Partial<SceneConfig> & {
+  children: ReactNode
+}
+
+export function SceneConfigProvider({
+  children,
+  ...value
+}: SceneConfigProviderProps) {
+  const parent = useContext(SceneConfigContext)
+  const config = useMemo<SceneConfig>(
+    () => ({
+      ...parent,
+      ...(value.sceneTheme !== undefined ? { sceneTheme: value.sceneTheme } : {}),
+      ...(value.sceneToken !== undefined ? { sceneToken: value.sceneToken } : {}),
+      sceneInFrames: value.sceneInFrames ?? parent.sceneInFrames ?? DEFAULT_SCENE_IN_FRAMES,
+      sceneType: value.sceneType ?? parent.sceneType ?? 'static',
+    }),
+    [parent, value.sceneInFrames, value.sceneTheme, value.sceneToken, value.sceneType],
+  )
+
+  return <SceneConfigContext.Provider value={config}>{children}</SceneConfigContext.Provider>
+}
+
+export function StaticSceneProvider({
+  children,
+  sceneInFrames = DEFAULT_SCENE_IN_FRAMES,
+  sceneTheme,
+  sceneToken,
+}: {
+  children: ReactNode
+  sceneInFrames?: number
+  sceneTheme?: SceneTheme
+  sceneToken?: string
+}) {
+  return (
+    <SceneConfigProvider
+      sceneType="static"
+      sceneInFrames={sceneInFrames}
+      sceneTheme={sceneTheme}
+      sceneToken={sceneToken}
+    >
+      {children}
+    </SceneConfigProvider>
+  )
+}
+
+export function AnimationSceneProvider({
+  children,
+  sceneInFrames = DEFAULT_SCENE_IN_FRAMES,
+  sceneTheme,
+  sceneToken,
+}: {
+  children: ReactNode
+  sceneInFrames?: number
+  sceneTheme?: SceneTheme
+  sceneToken?: string
+}) {
+  return (
+    <SceneConfigProvider
+      sceneType="animation"
+      sceneInFrames={sceneInFrames}
+      sceneTheme={sceneTheme}
+      sceneToken={sceneToken}
+    >
+      {children}
+    </SceneConfigProvider>
+  )
+}
+
+export function useSceneConfig() {
+  return useContext(SceneConfigContext)
+}
+
+export function useResolvedSceneTheme() {
+  const sceneConfig = useSceneConfig()
+  return sceneConfig.sceneToken ? undefined : sceneConfig.sceneTheme
+}

package/src/base/use-scene-motion.test.tsx

@@ -0,0 +1,61 @@
+import { renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { useSceneMotion } from './use-scene-motion'
+
+let sceneRuntimeMock = {
+  frame: 0,
+  fps: 30,
+  width: 1280,
+  height: 720,
+  durationInFrames: 150,
+  timeInSeconds: 0,
+  scaleX: 1,
+  scaleY: 1,
+  sceneType: 'static' as const,
+  sceneInFrames: 150,
+  sceneTheme: undefined,
+  sceneToken: undefined,
+}
+
+vi.mock('./use-remotion-scene-runtime', () => ({
+  useRemotionSceneRuntime: () => sceneRuntimeMock,
+}))
+
+vi.mock('remotion', () => ({
+  spring: ({ frame }: { frame: number }) => Math.min(1, frame / 30),
+}))
+
+describe('useSceneMotion', () => {
+  it('returns static motion by default', () => {
+    const { result } = renderHook(() => useSceneMotion())
+
+    expect(result.current).toEqual({
+      isAnimation: false,
+      progress: 1,
+      frame: 0,
+      fps: 30,
+      durationInFrames: 150,
+    })
+  })
+
+  it('returns spring-based motion in animation mode', () => {
+    sceneRuntimeMock = {
+      ...sceneRuntimeMock,
+      sceneType: 'animation',
+      frame: 15,
+      sceneInFrames: 240,
+      durationInFrames: 240,
+    }
+
+    const { result } = renderHook(() => useSceneMotion())
+
+    expect(result.current).toEqual({
+      isAnimation: true,
+      progress: 0.5,
+      frame: 15,
+      fps: 30,
+      durationInFrames: 240,
+    })
+  })
+})

package/src/base/use-scene-motion.ts

@@ -0,0 +1,35 @@
+import { spring } from 'remotion'
+
+import { useRemotionSceneRuntime } from './use-remotion-scene-runtime'
+
+export type SceneMotion = {
+  isAnimation: boolean
+  progress: number
+  frame: number
+  fps: number
+  durationInFrames: number
+}
+
+export function useSceneMotion(): SceneMotion {
+  const runtime = useRemotionSceneRuntime()
+  const isAnimation = runtime.sceneType === 'animation'
+  const progress = isAnimation
+    ? spring({
+        frame: runtime.frame,
+        fps: runtime.fps,
+        config: {
+          damping: 18,
+          mass: 0.8,
+          stiffness: 110,
+        },
+      })
+    : 1
+
+  return {
+    isAnimation,
+    progress,
+    frame: runtime.frame,
+    fps: runtime.fps,
+    durationInFrames: runtime.durationInFrames,
+  }
+}

package/src/core/index.test.ts

@@ -1,21 +1,199 @@
 import { describe, expect, it } from 'vitest'
 
-import { getComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
-
 import {
   Default2DScene,
   Default3DScene,
+  componentMetadata as abstractBackgroundCoverMetadata,
+  componentMetadata as annotationMetadata,
+  componentMetadata as beforeAfterMetadata,
+  componentMetadata as chartMetadata,
+  componentMetadata as chapterMetadata,
+  DefaultAgendaSlide,
+  DefaultAbstractBackgroundCoverSlide,
+  DefaultAnnotationSlide,
+  DefaultBeforeAfterSlide,
+  DefaultChartSlide,
   DefaultIntroBumper,
+  componentMetadata as calloutMetadata,
+  componentMetadata as heroMetadata,
+  componentMetadata as imageHeroMetadata,
+  componentMetadata as comparisonMetadata,
+  DefaultComparisonSlide,
+  componentMetadata as codeSnippetMetadata,
+  DefaultCodeSnippetSlide,
+  componentMetadata as dataStoryMetadata,
+  componentMetadata as coverMetadata,
+  DefaultCoverSlide,
+  componentMetadata as diagramMatrixMetadata,
+  componentMetadata as customerLogoWallMetadata,
+  DefaultCustomerLogoWallSlide,
+  componentMetadata as deviceMockupMetadata,
+  DefaultDeviceMockupSlide,
+  componentMetadata as geoMapMetadata,
+  DefaultGeoMapSlide,
+  componentMetadata as closingMetadata,
+  DefaultClosingSlide,
+  componentMetadata as featureGridMetadata,
+  DefaultFeatureGridSlide,
+  componentMetadata as featureListMetadata,
+  DefaultFeatureListSlide,
+  componentMetadata as galleryMetadata,
+  DefaultGallerySlide,
+  componentMetadata as faqMetadata,
+  DefaultFAQSlide,
+  componentMetadata as faqSidecarMetadata,
+  DefaultFAQSidecarSlide,
   DefaultOutroBumper,
   DefaultSlideScene,
+  componentMetadata as interactiveDemoMetadata,
+  componentMetadata as kpiDashboardMetadata,
+  DefaultKPIDashboardSlide,
+  componentMetadata as metricListMetadata,
+  componentMetadata as metricCardsMetadata,
+  DefaultMetricCardsSlide,
+  componentMetadata as metricShowcaseMetadata,
+  DefaultMetricShowcaseSlide,
+  componentMetadata as metricsStripMetadata,
+  componentMetadata as flowDiagramMetadata,
+  DefaultFlowDiagramSlide,
+  componentMetadata as mapLocationMetadata,
+  DefaultMapLocationSlide,
+  componentMetadata as orgChartMetadata,
+  DefaultOrgChartSlide,
+  componentMetadata as screenshotComparisonMetadata,
+  DefaultProcessSlide,
+  componentMetadata as processCardsMetadata,
+  DefaultProcessCardsSlide,
+  componentMetadata as pricingMetadata,
+  DefaultPricingSlide,
+  componentMetadata as prosConsMetadata,
+  DefaultProsConsSlide,
+  componentMetadata as speakerNotesMetadata,
+  DefaultQuoteSlide,
+  DefaultTableSlide,
+  componentMetadata as terminalMetadata,
+  DefaultTerminalSlide,
+  componentMetadata as testimonialGridMetadata,
+  DefaultTestimonialGridSlide,
+  componentMetadata as testimonialWallMetadata,
+  DefaultTestimonialWallSlide,
+  componentMetadata as statsMetadata,
+  DefaultStatsSlide,
+  componentMetadata as splitMetadata,
+  componentMetadata as splitHeroMetadata,
+  DefaultSplitHeroSlide,
+  componentMetadata as timelineCardsMetadata,
+  DefaultTimelineCardsSlide,
+  componentMetadata as timelineSplitMetadata,
+  DefaultTimelineSplitSlide,
+  componentMetadata as timelineMetadata,
+  componentMetadata as swimlaneTimelineMetadata,
+  DefaultTimelineSlide,
+  componentMetadata as codeCalloutMetadata,
+  DefaultCodeCalloutSlide,
+  componentMetadata as mermaidDiagramMetadata,
+  DefaultMermaidDiagramSlide,
+  componentMetadata as agendaCardsMetadata,
+  DefaultAgendaCardsSlide,
+  componentMetadata as threeColumnMetadata,
 } from './index'
 
 describe('video-project-core demo exports', () => {
   it('exports helper-annotated demo templates from the core entrypoint', () => {
-    expect(getComponentProjectComponentMetadata(DefaultIntroBumper)?.sceneType).toBe('intro')
-    expect(getComponentProjectComponentMetadata(DefaultOutroBumper)?.sceneType).toBe('outro')
-    expect(getComponentProjectComponentMetadata(Default2DScene)?.aspectRatio).toBe('16:9')
-    expect(getComponentProjectComponentMetadata(Default3DScene)?.aspectRatio).toBe('16:9')
-    expect(getComponentProjectComponentMetadata(DefaultSlideScene)?.aspectRatio).toBe('16:9')
+    expect(DefaultIntroBumper).toBeTypeOf('function')
+    expect(DefaultOutroBumper).toBeTypeOf('function')
+    expect(Default2DScene).toBeTypeOf('function')
+    expect(Default3DScene).toBeTypeOf('function')
+    expect(DefaultSlideScene).toBeTypeOf('function')
+    expect(heroMetadata.sceneFamily).toBe('slide')
+    expect(imageHeroMetadata.sceneFamily).toBe('slide')
+    expect(splitMetadata.sceneFamily).toBe('slide')
+    expect(chapterMetadata.sceneFamily).toBe('slide')
+    expect(abstractBackgroundCoverMetadata.sceneFamily).toBe('slide')
+    expect(annotationMetadata.sceneFamily).toBe('slide')
+    expect(comparisonMetadata.sceneFamily).toBe('slide')
+    expect(calloutMetadata.sceneFamily).toBe('slide')
+    expect(coverMetadata.sceneFamily).toBe('slide')
+    expect(dataStoryMetadata.sceneFamily).toBe('slide')
+    expect(diagramMatrixMetadata.sceneFamily).toBe('slide')
+    expect(deviceMockupMetadata.sceneFamily).toBe('slide')
+    expect(geoMapMetadata.sceneFamily).toBe('slide')
+    expect(closingMetadata.sceneFamily).toBe('slide')
+    expect(featureGridMetadata.sceneFamily).toBe('slide')
+    expect(featureListMetadata.sceneFamily).toBe('slide')
+    expect(faqMetadata.sceneFamily).toBe('slide')
+    expect(faqSidecarMetadata.sceneFamily).toBe('slide')
+    expect(timelineMetadata.sceneFamily).toBe('slide')
+    expect(statsMetadata.sceneFamily).toBe('slide')
+    expect(beforeAfterMetadata.sceneFamily).toBe('slide')
+    expect(chartMetadata.sceneFamily).toBe('slide')
+    expect(codeSnippetMetadata.sceneFamily).toBe('slide')
+    expect(customerLogoWallMetadata.sceneFamily).toBe('slide')
+    expect(galleryMetadata.sceneFamily).toBe('slide')
+    expect(kpiDashboardMetadata.sceneFamily).toBe('slide')
+    expect(interactiveDemoMetadata.sceneFamily).toBe('slide')
+    expect(metricListMetadata.sceneFamily).toBe('slide')
+    expect(metricCardsMetadata.sceneFamily).toBe('slide')
+    expect(metricShowcaseMetadata.sceneFamily).toBe('slide')
+    expect(metricsStripMetadata.sceneFamily).toBe('slide')
+    expect(flowDiagramMetadata.sceneFamily).toBe('slide')
+    expect(mapLocationMetadata.sceneFamily).toBe('slide')
+    expect(orgChartMetadata.sceneFamily).toBe('slide')
+    expect(screenshotComparisonMetadata.sceneFamily).toBe('slide')
+    expect(pricingMetadata.sceneFamily).toBe('slide')
+    expect(prosConsMetadata.sceneFamily).toBe('slide')
+    expect(speakerNotesMetadata.sceneFamily).toBe('slide')
+    expect(terminalMetadata.sceneFamily).toBe('slide')
+    expect(testimonialGridMetadata.sceneFamily).toBe('slide')
+    expect(testimonialWallMetadata.sceneFamily).toBe('slide')
+    expect(splitHeroMetadata.sceneFamily).toBe('slide')
+    expect(timelineCardsMetadata.sceneFamily).toBe('slide')
+    expect(timelineSplitMetadata.sceneFamily).toBe('slide')
+    expect(swimlaneTimelineMetadata.sceneFamily).toBe('slide')
+    expect(mermaidDiagramMetadata.sceneFamily).toBe('slide')
+    expect(codeCalloutMetadata.sceneFamily).toBe('slide')
+    expect(agendaCardsMetadata.sceneFamily).toBe('slide')
+    expect(DefaultAgendaSlide).toBeTypeOf('function')
+    expect(DefaultAbstractBackgroundCoverSlide).toBeTypeOf('function')
+    expect(DefaultAnnotationSlide).toBeTypeOf('function')
+    expect(DefaultBeforeAfterSlide).toBeTypeOf('function')
+    expect(DefaultChartSlide).toBeTypeOf('function')
+    expect(DefaultComparisonSlide).toBeTypeOf('function')
+    expect(DefaultCodeSnippetSlide).toBeTypeOf('function')
+    expect(DefaultCoverSlide).toBeTypeOf('function')
+    expect(DefaultCustomerLogoWallSlide).toBeTypeOf('function')
+    expect(DefaultDeviceMockupSlide).toBeTypeOf('function')
+    expect(DefaultGeoMapSlide).toBeTypeOf('function')
+    expect(DefaultClosingSlide).toBeTypeOf('function')
+    expect(DefaultFeatureGridSlide).toBeTypeOf('function')
+    expect(DefaultFeatureListSlide).toBeTypeOf('function')
+    expect(DefaultGallerySlide).toBeTypeOf('function')
+    expect(DefaultFAQSlide).toBeTypeOf('function')
+    expect(DefaultFAQSidecarSlide).toBeTypeOf('function')
+    expect(DefaultKPIDashboardSlide).toBeTypeOf('function')
+    expect(DefaultMapLocationSlide).toBeTypeOf('function')
+    expect(DefaultOrgChartSlide).toBeTypeOf('function')
+    expect(DefaultPricingSlide).toBeTypeOf('function')
+    expect(DefaultProsConsSlide).toBeTypeOf('function')
+    expect(DefaultSplitHeroSlide).toBeTypeOf('function')
+    expect(DefaultStatsSlide).toBeTypeOf('function')
+    expect(DefaultTimelineSlide).toBeTypeOf('function')
+    expect(DefaultTerminalSlide).toBeTypeOf('function')
+    expect(DefaultTestimonialGridSlide).toBeTypeOf('function')
+    expect(DefaultTestimonialWallSlide).toBeTypeOf('function')
+    expect(DefaultProcessSlide).toBeTypeOf('function')
+    expect(processCardsMetadata.sceneFamily).toBe('slide')
+    expect(DefaultProcessCardsSlide).toBeTypeOf('function')
+    expect(DefaultQuoteSlide).toBeTypeOf('function')
+    expect(DefaultTableSlide).toBeTypeOf('function')
+    expect(DefaultMetricCardsSlide).toBeTypeOf('function')
+    expect(DefaultMetricShowcaseSlide).toBeTypeOf('function')
+    expect(DefaultFlowDiagramSlide).toBeTypeOf('function')
+    expect(DefaultTimelineCardsSlide).toBeTypeOf('function')
+    expect(DefaultTimelineSplitSlide).toBeTypeOf('function')
+    expect(DefaultMermaidDiagramSlide).toBeTypeOf('function')
+    expect(DefaultCodeCalloutSlide).toBeTypeOf('function')
+    expect(DefaultAgendaCardsSlide).toBeTypeOf('function')
+    expect(threeColumnMetadata.sceneFamily).toBe('slide')
   })
 })

package/src/core/intro/_shared/intro-layout.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { getIntroBodyMaxWidth, getIntroLineClamp, getIntroPanelMinHeight, getIntroPanelPadding } from './intro-layout'
+
+describe('intro layout helpers', () => {
+  it('keeps portrait constraints tighter than landscape ones', () => {
+    expect(getIntroBodyMaxWidth(1080, false, 0.9, 0.42, { min: 240, max: 760 })).toBeGreaterThan(
+      getIntroBodyMaxWidth(1080, true, 0.9, 0.42, { min: 240, max: 760 }),
+    )
+
+    expect(getIntroPanelMinHeight(1920, true, 0.32, 0.22, { min: 160, max: 360 })).toBeLessThanOrEqual(360)
+    expect(getIntroPanelPadding(1920, true, 0.02, 0.014, { min: 12, max: 24 })).toBeGreaterThanOrEqual(12)
+    expect(getIntroLineClamp(3)).toMatchObject({
+      display: '-webkit-box',
+      WebkitLineClamp: 3,
+    })
+  })
+})