@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/core/scene/3dscene/default-3d-scene.stories.tsx

@@ -0,0 +1,18 @@
+import { Default3DSceneLandscape } from './default-3d-scene-Landscape'
+
+const meta = {
+  title: 'core/scene/Default3DSceneLandscape',
+  component: Default3DSceneLandscape,
+  args: {
+    title: '3D Scene',
+    depth: 320,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/3dscene/default-3d-scene.tsx

@@ -4,7 +4,7 @@ import { z } from 'zod'
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
 import { defineSceneComponent } from '../../../plugins/scene-component'
-import { useRemotionSceneRuntime } from '../../../base'
+import { SceneMotionStack, useRemotionSceneRuntime } from '../../../base'
 import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
 
 export interface Default3DSceneProps {
@@ -65,12 +65,18 @@ export const Default3DScene = VideoComponent(componentMetadata)(
             perspective: 1200,
           }}
         >
-          <div style={{ transform: `translateZ(${depth / 8}px) rotateY(-18deg)` }}>
-            <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-            <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024), opacity: 0.8 }}>
-              Depth {depth}
-            </p>
-          </div>
+          <SceneMotionStack>
+            <div
+              style={{
+                transform: `translateZ(${depth / 8}px) rotateY(-18deg)`,
+              }}
+            >
+              <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+              <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024), opacity: 0.8 }}>
+                Depth {depth}
+              </p>
+            </div>
+          </SceneMotionStack>
         </AbsoluteFill>
       )
     },

package/src/core/scene/3dscene/index.ts

@@ -1 +1,3 @@
 export { Default3DScene } from './default-3d-scene'
+export { Default3DSceneLandscape, componentMetadata as Default3DSceneLandscapeMetadata } from './default-3d-scene-Landscape'
+export { Default3DSceneHorizontal, componentMetadata as Default3DSceneHorizontalMetadata } from './default-3d-scene-Horizontal'

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

@@ -0,0 +1,33 @@
+export { SlideFrame } from './slide-frame'
+export type { SlideFrameProps } from './slide-frame'
+export { getSlideTypographyScale } from './slide-typography'
+export type { SlideTypographyScale } from './slide-typography'
+export { getAdaptiveSlideGridLayout, getOverflowSafeSlideGridLayout } from './slide-grid'
+export type { SlideGridLayout, OverflowSafeSlideGridOptions } from './slide-grid'
+export {
+  MediaTemplateSection,
+  clampTextLines,
+  columnRailStyle,
+  createTileStyle,
+  fitMediaStyle,
+  getPhotoGridLayout,
+  getProfileHeroLayout,
+  getVideoPosterRailLayout,
+  gridStyle,
+  renderMediaBadge,
+  renderMediaPlaceholder,
+  safeFullSizeStyle,
+  stackContentStyle,
+} from './media-templates'
+export type {
+  MediaTemplateRuntime,
+  MediaTileStyle,
+  PhotoGridLayout,
+  PhotoGridTemplateItem,
+  ProfileHeroLayout,
+  ProfileHeroStat,
+  ProfileHeroTemplateItem,
+  VideoPosterRailLayout,
+  VideoPosterRailItem,
+  MediaTemplateSectionProps,
+} from './media-templates'

package/src/core/scene/slide/_shared/media-templates.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getPhotoGridLayout,
+  getProfileHeroLayout,
+  getVideoPosterRailLayout,
+} from './media-templates'
+
+describe('media template layouts', () => {
+  it('keeps photo grids compact and inside portrait bounds', () => {
+    const layout = getPhotoGridLayout(5, { width: 1080, height: 1920 })
+
+    expect(layout).toMatchObject({
+      columns: 2,
+      rows: 3,
+      visibleItems: 5,
+      mediaAspectRatio: '4 / 3',
+    })
+    expect(layout.cardMinHeight).toBeGreaterThanOrEqual(120)
+    expect(layout.gap).toBeLessThanOrEqual(18)
+  })
+
+  it('switches poster rails to a stacked column in portrait scenes', () => {
+    const layout = getVideoPosterRailLayout(4, { width: 1080, height: 1920 })
+
+    expect(layout).toMatchObject({
+      railDirection: 'column',
+      columns: 1,
+      rows: 4,
+      visibleItems: 4,
+      posterAspectRatio: '9 / 16',
+    })
+    expect(layout.posterMinHeight).toBeGreaterThanOrEqual(128)
+    expect(layout.posterMinWidth).toBeGreaterThanOrEqual(220)
+  })
+
+  it('reserves enough room for profile hero content on landscape scenes', () => {
+    const layout = getProfileHeroLayout({ width: 1920, height: 1080 }, 3)
+
+    expect(layout).toMatchObject({
+      columns: 2,
+      statColumns: 3,
+    })
+    expect(layout.avatarSize).toBeGreaterThanOrEqual(120)
+    expect(layout.bodyMaxWidth).toBeLessThan(1920)
+  })
+})

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/_shared/slide-frame.tsx

@@ -0,0 +1,97 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+import { AbsoluteFill } from 'remotion'
+
+import { SceneMotionStack } from '../../../../base'
+import { useResolvedSceneTheme, useSceneConfig } from '../../../../base'
+import type { SceneTheme } from '../../../../themes'
+import { useSceneRootProps } from '../../../../runtime/use-scene-root-props'
+
+export interface SlideFrameProps {
+  pluginKey: string
+  sceneId?: string
+  sceneName?: string
+  theme?: SceneTheme
+  className?: string
+  style?: CSSProperties
+  background?: CSSProperties['background']
+  children: ReactNode
+}
+
+export function SlideFrame({
+  pluginKey,
+  sceneId,
+  sceneName,
+  theme,
+  className,
+  style,
+  background,
+  children,
+}: SlideFrameProps) {
+  const sceneConfig = useSceneConfig()
+  const sceneTheme = useResolvedSceneTheme()
+  const resolvedTheme = sceneConfig.sceneToken ? undefined : (theme ?? sceneTheme)
+  const rootProps = useSceneRootProps({
+    pluginKey,
+    sceneId,
+    sceneName,
+    theme: resolvedTheme,
+    className,
+  })
+  return (
+    <AbsoluteFill
+      {...rootProps}
+      data-scene-display-mode={sceneConfig.sceneType}
+      data-scene-token={sceneConfig.sceneToken}
+      className={[
+        rootProps.className,
+        'vibecuting-slide-frame',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={{
+        ...rootProps.style,
+        background: background ?? 'var(--scene-bg)',
+        color: 'var(--scene-fg)',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      <style>{`
+        .vibecuting-slide-frame,
+        .vibecuting-slide-frame * {
+          box-sizing: border-box;
+        }
+
+        .vibecuting-slide-frame {
+          overflow: hidden;
+          min-width: 0;
+          min-height: 0;
+          position: relative;
+          isolation: isolate;
+        }
+
+        .vibecuting-slide-frame * {
+          max-width: 100%;
+        }
+
+        .vibecuting-slide-frame article,
+        .vibecuting-slide-frame aside,
+        .vibecuting-slide-frame section,
+        .vibecuting-slide-frame div,
+        .vibecuting-slide-frame pre,
+        .vibecuting-slide-frame table,
+        .vibecuting-slide-frame th,
+        .vibecuting-slide-frame td,
+        .vibecuting-slide-frame li {
+          border-radius: 0 !important;
+        }
+      `}</style>
+      <SceneMotionStack>{children}</SceneMotionStack>
+    </AbsoluteFill>
+  )
+}

package/src/core/scene/slide/_shared/slide-grid.ts

@@ -0,0 +1,97 @@
+export type SlideGridLayout = {
+  columns: number
+  gap: number
+  cardPaddingX: number
+  cardPaddingY: number
+  cardMinHeight: number
+}
+
+export function getAdaptiveSlideGridLayout(itemCount: number, maxColumns = 4): SlideGridLayout {
+  const count = Math.max(1, itemCount)
+  let columns = 1
+
+  if (count <= 1) {
+    columns = 1
+  } else if (count === 2) {
+    columns = Math.min(2, maxColumns)
+  } else if (count <= 4) {
+    columns = Math.min(2, maxColumns)
+  } else if (count <= 6) {
+    columns = Math.min(3, maxColumns)
+  } else {
+    columns = Math.min(maxColumns, Math.max(3, Math.ceil(Math.sqrt(count))))
+  }
+
+  const rows = Math.ceil(count / columns)
+  const compact = rows >= 3 || count >= 6
+  const tight = rows >= 4 || count >= 9
+
+  return {
+    columns,
+    gap: tight ? 12 : compact ? 14 : 18,
+    cardPaddingX: tight ? 16 : compact ? 20 : 24,
+    cardPaddingY: tight ? 14 : compact ? 18 : 24,
+    cardMinHeight: tight ? 120 : compact ? 160 : 200,
+  }
+}
+
+export type OverflowSafeSlideGridOptions = {
+  runtimeWidth?: number
+  runtimeHeight?: number
+  reservedWidth?: number
+  reservedHeight?: number
+  minCardWidth?: number
+  minCardHeight?: number
+}
+
+export function getOverflowSafeSlideGridLayout(
+  itemCount: number,
+  maxColumns = 4,
+  options: OverflowSafeSlideGridOptions = {},
+): SlideGridLayout {
+  const count = Math.max(1, Math.min(5, itemCount))
+  const candidateMaxColumns = Math.max(1, Math.min(maxColumns, count))
+
+  if (!options.runtimeHeight) {
+    return getAdaptiveSlideGridLayout(count, candidateMaxColumns)
+  }
+
+  const runtimeWidth = options.runtimeWidth ?? 0
+  const reservedWidth = options.reservedWidth ?? 0
+  const reservedHeight = options.reservedHeight ?? 300
+  const minCardWidth = options.minCardWidth ?? 180
+  const minCardHeight = options.minCardHeight ?? 112
+  const usableHeight = Math.max(0, options.runtimeHeight - reservedHeight)
+  const usableWidth = runtimeWidth > 0 ? Math.max(0, runtimeWidth - reservedWidth) : 0
+
+  for (let columns = candidateMaxColumns; columns >= 1; columns -= 1) {
+    const rows = Math.ceil(count / columns)
+    const compact = rows >= 3 || count >= 5
+    const tight = rows >= 4 || count >= 6
+    const gap = tight ? 12 : compact ? 14 : 18
+    const cardPaddingX = tight ? 16 : compact ? 20 : 24
+    const cardPaddingY = tight ? 14 : compact ? 18 : 24
+    const cardMinHeight = Math.floor((usableHeight - gap * (rows - 1)) / rows)
+    const cardMinWidth = usableWidth > 0 ? Math.floor((usableWidth - gap * (columns - 1)) / columns) : minCardWidth
+
+    if (cardMinHeight >= minCardHeight && cardMinWidth >= minCardWidth) {
+      return {
+        columns,
+        gap,
+        cardPaddingX,
+        cardPaddingY,
+        cardMinHeight: Math.max(56, cardMinHeight),
+      }
+    }
+  }
+
+  const fallbackRows = Math.ceil(count / 1)
+  const fallbackGap = fallbackRows >= 3 ? 12 : fallbackRows === 2 ? 14 : 18
+  return {
+    columns: 1,
+    gap: fallbackGap,
+    cardPaddingX: fallbackRows >= 3 ? 16 : fallbackRows === 2 ? 20 : 24,
+    cardPaddingY: fallbackRows >= 3 ? 14 : fallbackRows === 2 ? 18 : 24,
+    cardMinHeight: Math.max(56, Math.floor((usableHeight - fallbackGap * (fallbackRows - 1)) / fallbackRows)),
+  }
+}

package/src/core/scene/slide/_shared/slide-shared.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSlideTypographyScale } from './slide-typography'
+
+describe('slide shared primitives', () => {
+  it('computes typography scale from height', () => {
+    expect(getSlideTypographyScale(1080)).toMatchObject({
+      eyebrow: expect.any(Number),
+      title: expect.any(Number),
+      body: expect.any(Number),
+      caption: expect.any(Number),
+      statValue: expect.any(Number),
+    })
+  })
+})

package/src/core/scene/slide/_shared/slide-typography.ts

@@ -0,0 +1,17 @@
+export type SlideTypographyScale = {
+  eyebrow: number
+  title: number
+  body: number
+  caption: number
+  statValue: number
+}
+
+export function getSlideTypographyScale(height: number): SlideTypographyScale {
+  return {
+    eyebrow: Math.max(14, Math.round(height * 0.018)),
+    title: Math.max(42, Math.round(height * 0.064)),
+    body: Math.max(18, Math.round(height * 0.024)),
+    caption: Math.max(12, Math.round(height * 0.015)),
+    statValue: Math.max(28, Math.round(height * 0.05)),
+  }
+}