@vibecuting/video-project-core 0.1.25 → 0.1.27

package/src/storybook/remotion-preview.tsx

@@ -0,0 +1,116 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+type RemotionPreviewValue = {
+  frame: number
+  fps: number
+  width: number
+  height: number
+  durationInFrames: number
+}
+
+const defaultValue: RemotionPreviewValue = {
+  frame: 0,
+  fps: 30,
+  width: 1280,
+  height: 720,
+  durationInFrames: 150,
+}
+
+const RemotionPreviewContext = createContext<RemotionPreviewValue>(defaultValue)
+
+export function RemotionPreviewProvider({
+  value,
+  children,
+}: {
+  value: RemotionPreviewValue
+  children: ReactNode
+}) {
+  return <RemotionPreviewContext.Provider value={value}>{children}</RemotionPreviewContext.Provider>
+}
+
+export function useCurrentFrame() {
+  return useContext(RemotionPreviewContext).frame
+}
+
+export function useVideoConfig() {
+  const value = useContext(RemotionPreviewContext)
+
+  return {
+    fps: value.fps,
+    width: value.width,
+    height: value.height,
+    durationInFrames: value.durationInFrames,
+    id: 'storybook-preview',
+    defaultProps: {},
+    props: {},
+    compositionStart: 0,
+    compositionEnd: value.durationInFrames,
+    durationInFramesInSection: value.durationInFrames,
+    numberOfShards: 1,
+    defaultEncodingSettings: {},
+  }
+}
+
+type SpringConfig = {
+  damping?: number
+  mass?: number
+  stiffness?: number
+  durationInFrames?: number
+  delay?: number
+}
+
+function clamp01(value: number) {
+  if (value < 0) {
+    return 0
+  }
+  if (value > 1) {
+    return 1
+  }
+  return value
+}
+
+export function spring({
+  frame,
+  fps,
+  config,
+}: {
+  frame: number
+  fps: number
+  config?: SpringConfig
+}) {
+  const delay = config?.delay ?? 0
+  const durationInFrames = config?.durationInFrames ?? fps
+  const damping = config?.damping ?? 18
+  const stiffness = config?.stiffness ?? 110
+  const mass = config?.mass ?? 1
+  const progress = Math.max(0, frame - delay) / Math.max(1, durationInFrames)
+  const eased = 1 - Math.exp(-progress * (damping / Math.max(0.001, mass)))
+  const wobble = Math.sin(progress * Math.PI * (stiffness / 55)) * 0.015
+
+  return clamp01(eased + wobble)
+}
+
+export function AbsoluteFill({
+  children,
+  style,
+  ...rest
+}: {
+  children?: ReactNode
+  style?: CSSProperties
+  [key: string]: unknown
+}) {
+  return (
+    <div
+      {...rest}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/storybook/scene-story.ts

@@ -0,0 +1,21 @@
+export function createSceneStoryVariants() {
+  return {
+    Landscape: {},
+    Horizontal: {
+      parameters: {
+        scenePreviewAspectRatio: '9:16' as const,
+      },
+    },
+    AnimatedLandscape: {
+      parameters: {
+        scenePreviewMode: 'animation' as const,
+      },
+    },
+    AnimatedHorizontal: {
+      parameters: {
+        scenePreviewMode: 'animation' as const,
+        scenePreviewAspectRatio: '9:16' as const,
+      },
+    },
+  }
+}

package/src/storybook/scene-theme-options.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+import { editorialDarkTheme, editorialLightTheme, editorialWarmTheme } from '../themes'
+import { getSceneThemeOption, sceneThemeOptions } from './scene-theme-options'
+
+describe('scene-theme-options', () => {
+  it('exposes the built-in theme list', () => {
+    expect(sceneThemeOptions).toHaveLength(3)
+    expect(sceneThemeOptions[0]?.theme).toBe(editorialDarkTheme)
+    expect(sceneThemeOptions[1]?.theme).toBe(editorialLightTheme)
+    expect(sceneThemeOptions[2]?.theme).toBe(editorialWarmTheme)
+  })
+
+  it('falls back to the default theme when the key is unknown', () => {
+    expect(getSceneThemeOption('unknown').theme).toBe(editorialDarkTheme)
+  })
+})

package/src/storybook/scene-theme-options.ts

@@ -0,0 +1,34 @@
+import { editorialDarkTheme, editorialLightTheme, editorialWarmTheme } from '../themes'
+import type { SceneTheme } from '../themes'
+
+export type SceneThemeOption = {
+  key: string
+  label: string
+  theme: SceneTheme
+}
+
+export const sceneThemeOptions: SceneThemeOption[] = [
+  {
+    key: editorialDarkTheme.key,
+    label: editorialDarkTheme.name,
+    theme: editorialDarkTheme,
+  },
+  {
+    key: editorialLightTheme.key,
+    label: editorialLightTheme.name,
+    theme: editorialLightTheme,
+  },
+  {
+    key: editorialWarmTheme.key,
+    label: editorialWarmTheme.name,
+    theme: editorialWarmTheme,
+  },
+]
+
+export function getSceneThemeOption(key?: string) {
+  if (!key) {
+    return sceneThemeOptions[0]
+  }
+
+  return sceneThemeOptions.find((option) => option.key === key) ?? sceneThemeOptions[0]
+}

package/src/themes/scene-themes.ts

@@ -42,3 +42,85 @@ export const editorialDarkTheme = ThemeComponent(
     '--scene-section-gap': '24px',
   },
 }))
+
+export const editorialLightTheme = ThemeComponent(
+  defineThemePluginMetadata({
+    resourceKind: 'theme',
+    name: 'Editorial Light',
+    description: 'Clean light theme for slide scenes',
+    sourceFile: 'src/themes/scene-themes.ts',
+    pluginKey: 'core.editorial-light',
+    supportedSceneFamilies: ['slide', 'custom'],
+    cssVariables: [
+      '--scene-bg',
+      '--scene-fg',
+      '--scene-muted',
+      '--scene-accent',
+      '--scene-panel',
+      '--scene-border',
+      '--scene-page-x',
+      '--scene-page-y',
+      '--scene-content-max',
+      '--scene-radius',
+      '--scene-section-gap',
+    ],
+    tags: ['builtin', 'theme'],
+  }),
+)(defineSceneTheme({
+  key: 'core.editorial-light',
+  name: 'Editorial Light',
+  variables: {
+    '--scene-bg': '#ffffff',
+    '--scene-fg': '#0f172a',
+    '--scene-muted': '#475569',
+    '--scene-accent': '#2563eb',
+    '--scene-panel': '#f8fafc',
+    '--scene-border': '#cbd5e1',
+    '--scene-page-x': '64px',
+    '--scene-page-y': '56px',
+    '--scene-content-max': '1200px',
+    '--scene-radius': '24px',
+    '--scene-section-gap': '24px',
+  },
+}))
+
+export const editorialWarmTheme = ThemeComponent(
+  defineThemePluginMetadata({
+    resourceKind: 'theme',
+    name: 'Editorial Warm',
+    description: 'Warm neutral theme for slide scenes',
+    sourceFile: 'src/themes/scene-themes.ts',
+    pluginKey: 'core.editorial-warm',
+    supportedSceneFamilies: ['slide', 'custom'],
+    cssVariables: [
+      '--scene-bg',
+      '--scene-fg',
+      '--scene-muted',
+      '--scene-accent',
+      '--scene-panel',
+      '--scene-border',
+      '--scene-page-x',
+      '--scene-page-y',
+      '--scene-content-max',
+      '--scene-radius',
+      '--scene-section-gap',
+    ],
+    tags: ['builtin', 'theme'],
+  }),
+)(defineSceneTheme({
+  key: 'core.editorial-warm',
+  name: 'Editorial Warm',
+  variables: {
+    '--scene-bg': '#fff7ed',
+    '--scene-fg': '#1f2937',
+    '--scene-muted': '#6b7280',
+    '--scene-accent': '#ea580c',
+    '--scene-panel': '#fffbeb',
+    '--scene-border': '#fdba74',
+    '--scene-page-x': '64px',
+    '--scene-page-y': '56px',
+    '--scene-content-max': '1200px',
+    '--scene-radius': '24px',
+    '--scene-section-gap': '24px',
+  },
+}))

package/src/core/intro/default-intro-bumper.tsx

@@ -1,66 +0,0 @@
-import type { ReactNode } from 'react'
-
-import {
-  BaseRemotionScene,
-  type BaseRemotionSceneProps,
-  useRemotionSceneRuntime,
-} from '../../base'
-import {
-  VideoComponent,
-  defineComponentProjectComponentMetadata,
-} from '@vibecuting/component-project-helper'
-
-export interface DefaultIntroBumperProps extends BaseRemotionSceneProps {
-  title: string
-  subtitle?: string
-  accent?: string
-  children?: ReactNode
-}
-
-export const componentMetadata = defineComponentProjectComponentMetadata({
-  name: 'DefaultIntroBumper',
-  description: 'Default remotion intro bumper',
-  sourceFile: 'src/core/intro/default-intro-bumper.tsx',
-  aspectRatio: '16:9',
-  sceneType: 'intro',
-  tags: ['intro', 'bumper'],
-  propsTypeName: 'DefaultIntroBumperProps',
-})
-
-export function DefaultIntroBumper({
-  id,
-  name,
-  title,
-  subtitle,
-  accent,
-  children,
-}: DefaultIntroBumperProps) {
-  const runtime = useRemotionSceneRuntime()
-  const titleFontSize = Math.round(runtime.height * 0.062)
-  const subtitleFontSize = Math.round(runtime.height * 0.024)
-
-  return (
-    <BaseRemotionScene
-      id={id}
-      name={name}
-      style={{
-        background: accent ?? '#0f172a',
-        color: '#fff',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        padding: Math.round(runtime.height * 0.06),
-      }}
-    >
-      <section style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
-        {subtitle ? (
-          <p style={{ margin: 0, fontSize: subtitleFontSize, opacity: 0.82 }}>{subtitle}</p>
-        ) : null}
-        <h1 style={{ margin: '16px 0 0', fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-        {children}
-      </section>
-    </BaseRemotionScene>
-  )
-}
-
-VideoComponent(componentMetadata)(DefaultIntroBumper)

package/src/core/outro/default-outro-bumper.tsx

@@ -1,55 +0,0 @@
-import type { ReactNode } from 'react'
-
-import {
-  BaseRemotionScene,
-  type BaseRemotionSceneProps,
-  useRemotionSceneRuntime,
-} from '../../base'
-import {
-  VideoComponent,
-  defineComponentProjectComponentMetadata,
-} from '@vibecuting/component-project-helper'
-
-export interface DefaultOutroBumperProps extends BaseRemotionSceneProps {
-  title: string
-  note?: string
-  children?: ReactNode
-}
-
-export const componentMetadata = defineComponentProjectComponentMetadata({
-  name: 'DefaultOutroBumper',
-  description: 'Default remotion outro bumper',
-  sourceFile: 'src/core/outro/default-outro-bumper.tsx',
-  aspectRatio: '16:9',
-  sceneType: 'outro',
-  tags: ['outro', 'bumper'],
-  propsTypeName: 'DefaultOutroBumperProps',
-})
-
-export function DefaultOutroBumper({ id, name, title, note, children }: DefaultOutroBumperProps) {
-  const runtime = useRemotionSceneRuntime()
-  const titleFontSize = Math.round(runtime.height * 0.062)
-
-  return (
-    <BaseRemotionScene
-      id={id}
-      name={name}
-      style={{
-        background: '#e2e8f0',
-        color: '#0f172a',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        padding: Math.round(runtime.height * 0.06),
-      }}
-    >
-      <footer style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
-        <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-        {note ? <p style={{ margin: '16px 0 0' }}>{note}</p> : null}
-        {children}
-      </footer>
-    </BaseRemotionScene>
-  )
-}
-
-VideoComponent(componentMetadata)(DefaultOutroBumper)