@vibecuting/video-project-core 0.1.25 → 0.1.27

package/.storybook/main.ts

@@ -0,0 +1,38 @@
+import path from 'node:path'
+
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const root = process.cwd()
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  async viteFinal(config) {
+    config.resolve ??= {}
+    config.resolve.alias = {
+      ...(config.resolve.alias && !Array.isArray(config.resolve.alias)
+        ? config.resolve.alias
+        : {}),
+      remotion: path.resolve(root, 'src/storybook/remotion-preview.tsx'),
+      '@vibecuting/component-project-helper': path.resolve(
+        root,
+        'src/storybook/component-project-helper.ts',
+      ),
+    }
+    config.server ??= {}
+    config.server.watch = {
+      usePolling: true,
+      interval: 300,
+    }
+    return config
+  },
+  core: {
+    allowedHosts: ['localhost', '127.0.0.1', '0.0.0.0'],
+  },
+}
+
+export default config

package/.storybook/preview.tsx

@@ -0,0 +1,88 @@
+import type { Preview } from '@storybook/react'
+
+import { getScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { SceneViewport } from '../src/storybook/SceneViewport'
+import { sceneThemeOptions } from '../src/storybook/scene-theme-options'
+
+const preview: Preview = {
+  globalTypes: {
+    scenePreviewMode: {
+      description: 'Scene preview mode',
+      defaultValue: 'static',
+      toolbar: {
+        icon: 'play',
+        items: [
+          { value: 'static', title: 'Static' },
+          { value: 'animation', title: 'Animation' },
+          { value: 'both', title: 'Both' },
+        ],
+        showName: true,
+      },
+    },
+    sceneThemeKey: {
+      description: 'Scene theme',
+      defaultValue: sceneThemeOptions[0]?.key,
+      toolbar: {
+        icon: 'paintbrush',
+        items: sceneThemeOptions.map((option) => ({
+          value: option.key,
+          title: option.label,
+        })),
+        showName: true,
+      },
+    },
+    scenePreviewAspectRatio: {
+      description: 'Scene preview aspect ratio',
+      defaultValue: '16:9',
+      toolbar: {
+        icon: 'sidebar',
+        items: [
+          { value: '16:9', title: 'Landscape 16:9' },
+          { value: '9:16', title: 'Horizontal 9:16' },
+        ],
+        showName: true,
+      },
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story, context) => {
+      const componentAspectRatio = getScenePluginMetadata(context.component)?.aspectRatio
+      const componentName = context.component?.displayName ?? context.component?.name ?? ''
+      const inferredAspectRatio = /Horizontal$/i.test(componentName)
+        ? '9:16'
+        : /Landscape$/i.test(componentName)
+          ? '16:9'
+          : undefined
+      const aspectRatio = (context.parameters.scenePreviewAspectRatio ??
+        componentAspectRatio ??
+        inferredAspectRatio ??
+        context.globals.scenePreviewAspectRatio) as '16:9' | '9:16'
+      const isVertical = aspectRatio === '9:16'
+
+      return (
+        <SceneViewport
+          width={isVertical ? 720 : 1280}
+          height={isVertical ? 1280 : 720}
+          mode={
+            context.parameters.scenePreviewMode ??
+            (context.globals.scenePreviewMode === 'both'
+              ? 'both'
+              : context.globals.scenePreviewMode === 'animation'
+                ? 'animation'
+                : 'static')
+          }
+          aspectRatio={aspectRatio}
+          themeKey={context.parameters.sceneThemeKey ?? context.globals.sceneThemeKey}
+        >
+          <Story />
+        </SceneViewport>
+      )
+    },
+  ],
+}
+
+export default preview

package/README.md

@@ -16,12 +16,86 @@ NPM 地址：
   - `scene/3dscene`
   - `scene/slide`
   - `scene/utils`
+- `scene/slide` 下面按模板族拆分，每个目录只承载一个版式家族
+  - `abstract-background-cover`
+  - `agenda`
+  - `agenda-cards`
+  - `annotation`
+  - `before-after`
+  - `callout`
+  - `chapter`
+  - `chart`
+  - `chart-sidecar`
+  - `code-callout`
+  - `code-snippet`
+  - `compact-hero`
+  - `comparison`
+  - `comparison-card`
+  - `cover`
+  - `cover-left`
+  - `cover-right`
+  - `customer-logo-wall`
+  - `data-story`
+  - `device-mockup`
+  - `diagram`
+  - `diagram-matrix`
+  - `faq`
+  - `faq-accordion`
+  - `faq-sidecar`
+  - `feature-cards`
+  - `feature-grid`
+  - `feature-list`
+  - `flow-diagram`
+  - `gallery`
+  - `hero`
+  - `hero-variant`
+  - `image-hero`
+  - `interactive-demo`
+  - `kpi-dashboard`
+  - `geo-map`
+  - `mermaid-diagram`
+  - `list`
+  - `list-hero`
+  - `list-with-icons`
+  - `map-location`
+  - `metric-cards`
+  - `metric-grid`
+  - `metric-list`
+  - `metric-showcase`
+  - `metrics-strip`
+  - `org-chart`
+  - `pricing`
+  - `process`
+  - `process-cards`
+  - `pros-cons`
+  - `quote`
+  - `quote-banner`
+  - `quote-sidecar`
+  - `screenshot-comparison`
+  - `speaker-notes`
+  - `split`
+  - `split-card`
+  - `split-hero`
+  - `stack-timeline`
+  - `stat-wall`
+  - `stats`
+  - `table`
+  - `testimonial-grid`
+  - `testimonial-wall`
+  - `terminal`
+  - `three-column`
+  - `timeline`
+  - `timeline-cards`
+  - `timeline-split`
+  - `swimlane-timeline`
+  - `title-with-image`
 - 复用 `@vibecuting/component-project-helper` 的注解和元数据模型
 - 只保留基础场景模板，不再承载本地 `manifest` / `decorators` 协议层
 - 供 `project-templates/video-project` 和主工程中的视频场景模板复用
 
 常用命令：
 
+- `pnpm run dev`：启动 Storybook 预览
 - `pnpm typecheck`
 - `pnpm test`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibecuting/video-project-core",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "main": "src/index.ts",
@@ -13,14 +13,18 @@
     "access": "public"
   },
   "scripts": {
-    "lint": "node ../../../scripts/run-eslint.mjs .",
-    "lint:fix": "node ../../../scripts/run-eslint.mjs . --fix",
+    "dev": "storybook dev -p 6010 --host 0.0.0.0",
+    "preview": "storybook dev -p 6010 --host 0.0.0.0",
+    "build:storybook": "storybook build",
+    "lint": "node ../../../scripts/run-eslint.mjs src .storybook",
+    "lint:fix": "node ../../../scripts/run-eslint.mjs src .storybook --fix",
     "typecheck": "pnpm exec tsc -p tsconfig.json --noEmit",
     "test": "pnpm exec vitest run"
   },
   "dependencies": {
-    "@vibecuting/component-project-helper": "0.1.25",
+    "@vibecuting/component-project-helper": "0.1.27",
     "@remotion/transitions": "4.0.473",
+    "mermaid": "^11.12.2",
     "react": "^19.0.0",
     "zod": "4.1.12"
   },
@@ -28,9 +32,13 @@
     "remotion": "^4.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "remotion": "4.0.473",
+    "storybook": "^8.6.12",
     "typescript": "5.9.3",
     "vitest": "^4.1.0",
     "@testing-library/jest-dom": "^6.8.0",

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true

package/scripts/generate-scene-orientation-variants.mjs

@@ -0,0 +1,268 @@
+import { promises as fs } from 'node:fs'
+import { spawnSync } from 'node:child_process'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const packageRoot = path.resolve(scriptDir, '..')
+const repoRoot = path.resolve(packageRoot, '..', '..', '..')
+const sceneRoot = path.join(packageRoot, 'src', 'core', 'scene')
+
+async function walk(dir) {
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  const files = []
+
+  for (const entry of entries) {
+    const resolved = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      files.push(...(await walk(resolved)))
+      continue
+    }
+
+    files.push(resolved)
+  }
+
+  return files
+}
+
+function toPosix(relativePath) {
+  return relativePath.split(path.sep).join('/')
+}
+
+function isVariantFile(filePath) {
+  return /-(Landscape|Horizontal)\.tsx$/.test(filePath) || /-(Landscape|Horizontal)(?:\.animated)?\.stories\.tsx$/.test(filePath)
+}
+
+function isBaseComponentFile(filePath) {
+  return (
+    filePath.endsWith('.tsx') &&
+    !filePath.endsWith('.stories.tsx') &&
+    !filePath.includes(`${path.sep}_shared${path.sep}`) &&
+    !isVariantFile(filePath)
+  )
+}
+
+function findComponentName(source) {
+  const match = source.match(/export const\s+([A-Za-z0-9_]+)\s*=\s*VideoComponent\(/)
+  return match?.[1] ?? null
+}
+
+function findStoryImport(source) {
+  const match = source.match(/import\s+\{\s*([A-Za-z0-9_]+)\s*\}\s+from\s+'(\.\/[^']+)'/)
+  return match ? { componentName: match[1], importPath: match[2] } : null
+}
+
+function orientTitle(title, suffix) {
+  if (title.endsWith('/Animated')) {
+    return `${title.slice(0, -'/Animated'.length)}${suffix}/Animated`
+  }
+
+  return `${title}${suffix}`
+}
+
+function normalizeOrientationSuffix(value) {
+  return value.replace(/(?:Landscape|Horizontal)+$/, '')
+}
+
+function normalizeOrientationPath(value) {
+  return value.replace(/(?:-(?:Landscape|Horizontal))+$/, '')
+}
+
+function normalizeStoryTitle(value) {
+  if (value.endsWith('/Animated')) {
+    return `${normalizeOrientationSuffix(value.slice(0, -'/Animated'.length))}/Animated`
+  }
+
+  return normalizeOrientationSuffix(value)
+}
+
+function collapseRepeatedOrientationSuffixes(source) {
+  return source
+    .replace(/(Landscape)\1+/g, '$1')
+    .replace(/(Horizontal)\1+/g, '$1')
+}
+
+function createWrapperSource({
+  baseImportPath,
+  componentName,
+  wrapperName,
+  sourceFile,
+  aspectRatio,
+  orientationTag,
+  baseDescription,
+}) {
+  const orientationLabel = aspectRatio === '16:9' ? 'Landscape 16:9' : 'Portrait 9:16'
+  const description = baseDescription
+    ? `${baseDescription} (${orientationLabel} variant)`
+    : `${orientationLabel} scene variant`
+
+  return `import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { ${componentName}, componentMetadata as baseComponentMetadata } from '${baseImportPath}'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: '${wrapperName}',
+  description: ${JSON.stringify(description)},
+  sourceFile: '${sourceFile}',
+  aspectRatio: '${aspectRatio}',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), '${orientationTag}'])),
+}
+
+export const ${wrapperName} = VideoComponent(componentMetadata)(function ${wrapperName}(
+  props: ComponentProps<typeof ${componentName}>,
+) {
+  return <${componentName} {...props} />
+})
+`
+}
+
+function createStorySource({ baseImportPath, componentName, title, source, suffix }) {
+  const wrapperName = `${normalizeOrientationSuffix(componentName)}${suffix}`
+  const normalizedImportPath = normalizeOrientationPath(baseImportPath)
+  const normalizedTitle = normalizeStoryTitle(title)
+  const normalizedSource = collapseRepeatedOrientationSuffixes(source)
+  const normalizedComponentName = normalizeOrientationSuffix(componentName)
+  const escapedComponentName = normalizedComponentName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+  return normalizedSource
+    .replace(/import\s+\{\s*[A-Za-z0-9_]+\s*\}\s+from\s+'[^']+'/, `import { ${wrapperName} } from '${normalizedImportPath}-${suffix}'`)
+    .replace(/component:\s*[A-Za-z0-9_]+\b/, `component: ${wrapperName}`)
+    .replace(new RegExp(`typeof\\s+${escapedComponentName}(?:Landscape|Horizontal)*`, 'g'), `typeof ${wrapperName}`)
+    .replace(/title:\s*'[^']+'/, `title: '${orientTitle(normalizedTitle, suffix)}'`)
+}
+
+function setStoryPreviewAspectRatio(source, aspectRatio, exportName) {
+  const beforeExport = source.replace(/\nexport const [\s\S]*$/, '').trimEnd()
+  const exportLines = [`export const ${exportName} = {`, '  parameters: {']
+  if (exportName === 'Animated') {
+    exportLines.push("    scenePreviewMode: 'animation',")
+  }
+  exportLines.push(`    scenePreviewAspectRatio: '${aspectRatio}',`)
+  exportLines.push('  },')
+  exportLines.push('}')
+  return `${beforeExport}\n\n${exportLines.join('\n')}\n`
+}
+
+async function ensureFile(filePath, content) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true })
+  await fs.writeFile(filePath, content)
+}
+
+function readGitHead(relativePath) {
+  const result = spawnSync('git', ['show', `HEAD:${toPosix(relativePath)}`], {
+    cwd: repoRoot,
+    encoding: 'utf8',
+    maxBuffer: 10 * 1024 * 1024,
+  })
+
+  if (result.status !== 0 || !result.stdout) {
+    return null
+  }
+
+  return result.stdout
+}
+
+async function main() {
+  const files = await walk(sceneRoot)
+  const baseComponentFiles = files.filter(isBaseComponentFile)
+
+  for (const filePath of baseComponentFiles) {
+    const source = await fs.readFile(filePath, 'utf8')
+    const componentName = findComponentName(source)
+    if (!componentName) {
+      continue
+    }
+
+    const relativeFile = toPosix(path.relative(sceneRoot, filePath))
+    const dir = path.dirname(relativeFile)
+    const baseName = path.basename(relativeFile, '.tsx')
+    const baseImportPath = `./${baseName}`
+    const wrapperNames = [
+      { suffix: 'Landscape', aspectRatio: '16:9', orientationTag: 'landscape' },
+      { suffix: 'Horizontal', aspectRatio: '9:16', orientationTag: 'horizontal' },
+    ]
+
+    for (const variant of wrapperNames) {
+      const wrapperName = `${componentName}${variant.suffix}`
+      const wrapperFile = path.join(path.dirname(filePath), `${baseName}-${variant.suffix}.tsx`)
+      const wrapperRelativeSourceFile = toPosix(path.relative(packageRoot, wrapperFile))
+      const descriptionMatch = source.match(/description:\s*'([^']+)'/)
+      const wrapperSource = createWrapperSource({
+        baseImportPath,
+        componentName,
+        wrapperName,
+        sourceFile: wrapperRelativeSourceFile,
+        aspectRatio: variant.aspectRatio,
+        orientationTag: variant.orientationTag,
+        baseDescription: descriptionMatch?.[1] ?? '',
+      })
+      await ensureFile(wrapperFile, wrapperSource)
+    }
+
+    const storyFiles = files.filter((candidate) => {
+      if (!candidate.startsWith(path.dirname(filePath))) {
+        return false
+      }
+      return (
+        candidate === path.join(path.dirname(filePath), `${baseName}.stories.tsx`) ||
+        candidate === path.join(path.dirname(filePath), `${baseName}.animated.stories.tsx`)
+      )
+    })
+
+    for (const storyFile of storyFiles) {
+      const storyExportName = storyFile.endsWith('.animated.stories.tsx') ? 'Animated' : 'Default'
+      const storySource =
+        readGitHead(path.relative(repoRoot, storyFile)) ??
+        (await fs.readFile(storyFile, 'utf8'))
+      const storyMeta = findStoryImport(storySource)
+      const titleMatch = storySource.match(/title:\s*'([^']+)'/)
+      if (!storyMeta || !titleMatch) {
+        continue
+      }
+
+      const baseStoryImportPath = storyMeta.importPath
+      const landscapeSource = createStorySource({
+        baseImportPath: baseStoryImportPath,
+        componentName: storyMeta.componentName,
+        title: titleMatch[1],
+        source: storySource,
+        suffix: 'Landscape',
+      })
+      const updatedLandscapeSource = setStoryPreviewAspectRatio(landscapeSource, '16:9', storyExportName)
+      await fs.writeFile(storyFile, updatedLandscapeSource)
+
+      const horizontalStoryFile = storyFile.replace(/(\.animated)?\.stories\.tsx$/, '-Horizontal$1.stories.tsx')
+      const horizontalSource = createStorySource({
+        baseImportPath: baseStoryImportPath,
+        componentName: storyMeta.componentName,
+        title: titleMatch[1],
+        source: storySource,
+        suffix: 'Horizontal',
+      })
+      const updatedHorizontalSource = setStoryPreviewAspectRatio(horizontalSource, '9:16', storyExportName)
+      await ensureFile(horizontalStoryFile, updatedHorizontalSource)
+    }
+
+    const indexFile = path.join(path.dirname(filePath), 'index.ts')
+    try {
+      const indexSource = await fs.readFile(indexFile, 'utf8')
+      const landscapeExport = `export { ${componentName}Landscape, componentMetadata as ${componentName}LandscapeMetadata } from './${baseName}-Landscape'`
+      const horizontalExport = `export { ${componentName}Horizontal, componentMetadata as ${componentName}HorizontalMetadata } from './${baseName}-Horizontal'`
+
+      if (!indexSource.includes(landscapeExport)) {
+        const updated = `${indexSource.trimEnd()}\n${landscapeExport}\n${horizontalExport}\n`
+        await fs.writeFile(indexFile, updated)
+      }
+    } catch {
+      // Some directories do not have an index barrel. Skip them.
+    }
+  }
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exitCode = 1
+})

package/src/base/BaseRemotionScene.tsx

@@ -2,6 +2,8 @@ import type { CSSProperties, ReactNode } from 'react'
 import { useId } from 'react'
 import { AbsoluteFill } from 'remotion'
 
+import { SceneMotionStack } from './use-scene-child-motion'
+import { useResolvedSceneTheme, useSceneConfig } from './use-scene-config'
 import { resolveRemotionSceneId } from './scene-identity'
 
 export interface BaseRemotionSceneProps {
@@ -21,18 +23,25 @@ export function BaseRemotionScene({
 }: BaseRemotionSceneProps) {
   const reactId = useId()
   const resolvedId = resolveRemotionSceneId({ id, name, reactId })
+  const sceneConfig = useSceneConfig()
+  const resolvedTheme = useResolvedSceneTheme()
 
   return (
     <AbsoluteFill
       id={resolvedId}
       data-scene-name={name}
+      data-scene-display-mode={sceneConfig.sceneType}
+      data-scene-token={sceneConfig.sceneToken}
       className={className}
       style={{
+        ...(sceneConfig.sceneToken ? {} : (resolvedTheme?.variables ?? {})),
         overflow: 'hidden',
+        position: 'relative',
+        isolation: 'isolate',
         ...style,
       }}
     >
-      {children}
+      <SceneMotionStack>{children}</SceneMotionStack>
     </AbsoluteFill>
   )
 }

package/src/base/index.ts

@@ -1,4 +1,16 @@
 export { BaseRemotionScene } from './BaseRemotionScene'
 export type { BaseRemotionSceneProps } from './BaseRemotionScene'
 export { resolveRemotionSceneId } from './scene-identity'
+export { SceneMotionLayer, SceneMotionStack, getSceneChildMotionStyle } from './use-scene-child-motion'
+export {
+  AnimationSceneProvider,
+  DEFAULT_SCENE_IN_FRAMES,
+  SceneConfigProvider,
+  StaticSceneProvider,
+  useResolvedSceneTheme,
+  useSceneConfig,
+  type SceneConfig,
+  type SceneDisplayMode,
+} from './use-scene-config'
+export { useSceneMotion } from './use-scene-motion'
 export { useRemotionSceneRuntime } from './use-remotion-scene-runtime'

package/src/base/use-remotion-scene-runtime.test.tsx

@@ -3,6 +3,17 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 
 import { useRemotionSceneRuntime } from './use-remotion-scene-runtime'
 
+let sceneConfigMock = {
+  sceneType: 'static' as const,
+  sceneInFrames: 150,
+  sceneTheme: undefined,
+  sceneToken: undefined,
+}
+
+vi.mock('./use-scene-config', () => ({
+  useSceneConfig: () => sceneConfigMock,
+}))
+
 vi.mock('remotion', () => ({
   useCurrentFrame: () => 30,
   useVideoConfig: () => ({
@@ -16,9 +27,41 @@ vi.mock('remotion', () => ({
 describe('useRemotionSceneRuntime', () => {
   afterEach(() => {
     vi.clearAllMocks()
+    sceneConfigMock = {
+      sceneType: 'static',
+      sceneInFrames: 150,
+      sceneTheme: undefined,
+      sceneToken: undefined,
+    }
   })
 
-  it('returns derived runtime values', () => {
+  it('defaults to static scene timing', () => {
+    const { result } = renderHook(() => useRemotionSceneRuntime())
+
+    expect(result.current).toEqual({
+      frame: 0,
+      fps: 30,
+      width: 1920,
+      height: 1080,
+      durationInFrames: 150,
+      timeInSeconds: 0,
+      scaleX: 1,
+      scaleY: 1,
+      sceneType: 'static',
+      sceneInFrames: 150,
+      sceneTheme: undefined,
+      sceneToken: undefined,
+    })
+  })
+
+  it('uses remotion frame values in animation mode', () => {
+    sceneConfigMock = {
+      sceneType: 'animation',
+      sceneInFrames: 240,
+      sceneTheme: undefined,
+      sceneToken: undefined,
+    }
+
     const { result } = renderHook(() => useRemotionSceneRuntime())
 
     expect(result.current).toEqual({
@@ -26,10 +69,14 @@ describe('useRemotionSceneRuntime', () => {
       fps: 30,
       width: 1920,
       height: 1080,
-      durationInFrames: 300,
+      durationInFrames: 240,
       timeInSeconds: 1,
       scaleX: 1,
       scaleY: 1,
+      sceneType: 'animation',
+      sceneInFrames: 240,
+      sceneTheme: undefined,
+      sceneToken: undefined,
     })
   })
 })

package/src/base/use-remotion-scene-runtime.ts

@@ -1,17 +1,26 @@
 import { useCurrentFrame, useVideoConfig } from 'remotion'
 
+import { useSceneConfig } from './use-scene-config'
+
 export function useRemotionSceneRuntime() {
-  const frame = useCurrentFrame()
+  const sceneConfig = useSceneConfig()
+  const remotionFrame = useCurrentFrame()
   const { fps, width, height, durationInFrames } = useVideoConfig()
+  const frame = sceneConfig.sceneType === 'animation' ? remotionFrame : 0
+  const sceneDurationInFrames = sceneConfig.sceneInFrames
 
   return {
     frame,
     fps,
     width,
     height,
-    durationInFrames,
+    durationInFrames: sceneDurationInFrames ?? durationInFrames,
     timeInSeconds: frame / fps,
     scaleX: width / 1920,
     scaleY: height / 1080,
+    sceneType: sceneConfig.sceneType,
+    sceneInFrames: sceneDurationInFrames,
+    sceneTheme: sceneConfig.sceneTheme,
+    sceneToken: sceneConfig.sceneToken,
   }
 }