@vibecuting/video-project-core 0.1.29 → 0.1.31

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@vibecuting/video-project-core",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./storybook": "./src/storybook/index.ts",
+    "./storybook/remotion-preview": "./src/storybook/remotion-preview.tsx",
+    "./lint": "./src/lint/index.ts"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -16,13 +19,13 @@
     "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",
+    "lint": "node ../../../scripts/run-eslint.mjs src .storybook && node ../../../scripts/lint-vibecuting-scenes.mjs --all",
+    "lint:fix": "node ../../../scripts/run-eslint.mjs src .storybook --fix && node ../../../scripts/lint-vibecuting-scenes.mjs --all --fix",
     "typecheck": "pnpm exec tsc -p tsconfig.json --noEmit",
     "test": "pnpm exec vitest run"
   },
   "dependencies": {
-    "@vibecuting/component-project-helper": "0.1.29",
+    "@vibecuting/component-project-helper": "0.1.31",
     "@remotion/transitions": "4.0.473",
     "mermaid": "^11.12.2",
     "react": "^19.0.0",
@@ -37,6 +40,7 @@
     "@storybook/react-vite": "^8.6.12",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
+    "react-dom": "19.2.7",
     "remotion": "4.0.473",
     "storybook": "^8.6.12",
     "typescript": "5.9.3",

package/src/base/BaseRemotionScene.test.tsx

@@ -1,8 +1,18 @@
 import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 
 import { BaseRemotionScene } from './BaseRemotionScene'
 
+vi.mock('remotion', () => ({
+  useCurrentFrame: () => 0,
+  useVideoConfig: () => ({
+    fps: 30,
+    width: 1920,
+    height: 1080,
+    durationInFrames: 150,
+  }),
+}))
+
 describe('BaseRemotionScene', () => {
   it('renders a reusable scene frame', () => {
     const html = renderToStaticMarkup(

package/src/base/index.ts

@@ -14,3 +14,4 @@ export {
 } from './use-scene-config'
 export { useSceneMotion } from './use-scene-motion'
 export { useRemotionSceneRuntime } from './use-remotion-scene-runtime'
+export * from './utils'

package/src/base/utils/asset-source.ts

@@ -0,0 +1,11 @@
+import { staticFile } from "remotion";
+
+export const resolveVideoLayerAssetSource = (source: string) => {
+  if (/^https?:\/\//.test(source)) {
+    return source;
+  }
+
+  const normalizedSource = source.replace(/^public\//, "").replace(/^\/+/, "");
+
+  return staticFile(normalizedSource);
+};

package/src/base/utils/background-audio-layer.tsx

@@ -0,0 +1,90 @@
+import { Audio, Sequence } from "remotion";
+import type {
+  VideoLayerAudioCue,
+  VideoLayerBackgroundMusicPlan,
+} from "./video-layer-types";
+import { resolveVideoLayerAssetSource } from "./asset-source";
+
+export type VideoLayerChapterAudioTiming = {
+  key: string;
+  startFrame: number;
+  durationInFrames: number;
+};
+
+export type VideoLayerChapterAudioPlan = {
+  id: string;
+  bgm?: VideoLayerBackgroundMusicPlan | null;
+};
+
+export type VideoBackgroundAudioLayerProps = {
+  chapters?: VideoLayerChapterAudioPlan[];
+  chapterTimings?: VideoLayerChapterAudioTiming[];
+  cues?: VideoLayerAudioCue[];
+};
+
+export const getVideoLayerCueVolume = (cue: VideoLayerAudioCue, frame: number) => {
+  const baseVolume = cue.volume ?? 1;
+  const fadeInFrames = cue.fadeInFrames ?? 0;
+  const fadeOutFrames = cue.fadeOutFrames ?? 0;
+  const fadeInVolume =
+    fadeInFrames > 0 ? Math.min(1, Math.max(0, frame / fadeInFrames)) : 1;
+  const fadeOutStartFrame = cue.durationInFrames - fadeOutFrames;
+  const fadeOutVolume =
+    fadeOutFrames > 0 && frame >= fadeOutStartFrame
+      ? Math.min(1, Math.max(0, (cue.durationInFrames - frame) / fadeOutFrames))
+      : 1;
+
+  return baseVolume * Math.min(fadeInVolume, fadeOutVolume);
+};
+
+export const buildVideoLayerBgmCues = (
+  chapters: VideoLayerChapterAudioPlan[],
+  chapterTimings: VideoLayerChapterAudioTiming[],
+): VideoLayerAudioCue[] => {
+  return chapters.flatMap((chapter) => {
+    const chapterTiming = chapterTimings.find((item) => item.key === chapter.id);
+
+    if (!chapter.bgm?.source || !chapterTiming) {
+      return [];
+    }
+
+    return [
+      {
+        id: `bgm-${chapter.id}`,
+        source: chapter.bgm.source,
+        startFrame: chapterTiming.startFrame,
+        durationInFrames: chapterTiming.durationInFrames,
+        volume: chapter.bgm.volume,
+        fadeInFrames: chapter.bgm.fadeInFrames,
+        fadeOutFrames: chapter.bgm.fadeOutFrames,
+      },
+    ];
+  });
+};
+
+export const VideoBackgroundAudioLayer = ({
+  chapters = [],
+  chapterTimings = [],
+  cues = [],
+}: VideoBackgroundAudioLayerProps) => {
+  const audioCues = [...buildVideoLayerBgmCues(chapters, chapterTimings), ...cues];
+
+  return (
+    <>
+      {audioCues.map((cue) => (
+        <Sequence
+          key={cue.id}
+          from={cue.startFrame}
+          durationInFrames={cue.durationInFrames}
+        >
+          <Audio
+            src={resolveVideoLayerAssetSource(cue.source)}
+            volume={(frame: number) => getVideoLayerCueVolume(cue, frame)}
+          />
+        </Sequence>
+      ))}
+    </>
+  );
+};
+
+export const BackgroundAudioLayer = VideoBackgroundAudioLayer;

package/src/base/utils/background-layer.tsx

@@ -0,0 +1,84 @@
+import { Img } from "remotion";
+import type { VideoLayerBackgroundConfig } from "./video-layer-types";
+
+export type VideoBackgroundLayerProps = {
+  config: VideoLayerBackgroundConfig;
+};
+
+export const VideoBackgroundLayer = ({ config }: VideoBackgroundLayerProps) => {
+  const backgroundStyle =
+    config.mode === "gradient" && config.gradient ? config.gradient : config.baseColor;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        background: config.baseColor,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: backgroundStyle,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.16), transparent 18%), radial-gradient(circle at 50% 62%, rgba(56, 189, 248, 0.18), transparent 24%), radial-gradient(circle at center, transparent 34%, rgba(2, 6, 23, 0.28) 72%, rgba(2, 6, 23, 0.52) 100%)",
+          mixBlendMode: "screen",
+          opacity: 0.95,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.025) 0, rgba(15, 23, 42, 0.025) 1px, transparent 1px, transparent 4px)",
+          opacity: 0.18,
+          mixBlendMode: "multiply",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "linear-gradient(180deg, rgba(2, 6, 23, 0.14) 0%, transparent 26%, transparent 72%, rgba(2, 6, 23, 0.22) 100%)",
+        }}
+      />
+      {config.mode === "image" && config.imageUrl ? (
+        <Img
+          src={config.imageUrl}
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            opacity: config.imageOpacity ?? 1,
+          }}
+        />
+      ) : null}
+      {config.accentColor ? (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: `radial-gradient(circle at 22% 18%, ${config.accentColor}, transparent 26%), radial-gradient(circle at 78% 82%, ${config.accentColor}, transparent 28%)`,
+            mixBlendMode: "multiply",
+            opacity: 0.72,
+          }}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export const BackgroundLayer = VideoBackgroundLayer;

package/src/base/utils/chapter-progress-foreground.tsx

@@ -0,0 +1,125 @@
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { getVideoLayerChapterState } from "./chapter-progress-state";
+import { buildVideoLayerDisplaySurfaceStyle } from "./display-surface";
+import type {
+  VideoLayerChapterProgressItem,
+  VideoLayerDesign,
+} from "./video-layer-types";
+
+export type VideoChapterProgressForegroundProps = {
+  design: VideoLayerDesign;
+  chapters: VideoLayerChapterProgressItem[];
+};
+
+export const VideoChapterProgressForeground = ({
+  design,
+  chapters,
+}: VideoChapterProgressForegroundProps) => {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+  const isPortrait = height > width;
+
+  if (!design.display.chapterInfo.enabled || chapters.length === 0) {
+    return null;
+  }
+
+  const { activeChapterIndex, activeChapterProgress } = getVideoLayerChapterState(
+    frame,
+    chapters,
+  );
+  const chapterSurface = design.display.chapterInfo;
+
+  return (
+    <div style={buildVideoLayerDisplaySurfaceStyle(chapterSurface, frame, fps)}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 0,
+          justifyContent: "stretch",
+          whiteSpace: "nowrap",
+          fontSize: isPortrait
+            ? Math.round(height * 0.013)
+            : chapterSurface.style.fontSize - 2,
+          fontWeight: 800,
+          lineHeight: 1,
+          width: "100%",
+          minHeight: isPortrait ? Math.round(height * 0.032) : 48,
+          boxShadow: isPortrait ? "0 18px 38px rgba(2, 6, 23, 0.32)" : undefined,
+        }}
+      >
+        {chapters.map((chapter, index) => {
+          const isActive = index === activeChapterIndex;
+          const isDone = index < activeChapterIndex;
+          const filled = Math.max(
+            0,
+            Math.min(1, isDone ? 1 : isActive ? activeChapterProgress : 0),
+          );
+          const baseBackground =
+            chapterSurface.style.backgroundColor ?? "rgba(2, 6, 23, 0.72)";
+          const labelColor =
+            isActive || isDone
+              ? chapterSurface.style.foregroundColor ?? chapterSurface.style.color
+              : "rgba(255, 255, 255, 0.74)";
+          const progressBackground =
+            chapterSurface.style.foregroundGradient ??
+            (isDone
+              ? "linear-gradient(90deg, rgba(34, 197, 94, 0.9), rgba(59, 130, 246, 0.9))"
+              : "linear-gradient(90deg, rgba(96, 165, 250, 0.92), rgba(168, 85, 247, 0.9))");
+
+          return (
+            <div
+              key={chapter.title}
+              style={{
+                flex: 1,
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 0,
+                minHeight: isPortrait ? Math.round(height * 0.032) : 48,
+                padding: 0,
+                borderRadius: 0,
+                overflow: "hidden",
+                background: baseBackground,
+                borderRight:
+                  index < chapters.length - 1
+                    ? "1px solid rgba(255, 255, 255, 0.08)"
+                    : "none",
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  width: `${filled * 100}%`,
+                  background: progressBackground,
+                  opacity: isDone ? 0.95 : filled > 0 ? 0.88 : 0.28,
+                }}
+              />
+              <span
+                style={{
+                  position: "relative",
+                  zIndex: 1,
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 0,
+                  color: labelColor,
+                  textShadow: isActive || isDone ? chapterSurface.style.shadow : "none",
+                  padding: 0,
+                  letterSpacing: isPortrait ? "0.03em" : "normal",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {chapter.title}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const ChapterProgressForeground = VideoChapterProgressForeground;

package/src/base/utils/chapter-progress-state.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { getVideoLayerChapterState } from "./chapter-progress-state";
+
+const chapters = [
+  { title: "Intro", durationInFrames: 30 },
+  { title: "Middle", durationInFrames: 60 },
+  { title: "Outro", durationInFrames: 30 },
+];
+
+describe("getVideoLayerChapterState", () => {
+  it("returns the active chapter and normalized progress", () => {
+    expect(getVideoLayerChapterState(0, chapters)).toEqual({
+      activeChapterIndex: 0,
+      activeChapterProgress: 0,
+    });
+    expect(getVideoLayerChapterState(45, chapters)).toEqual({
+      activeChapterIndex: 1,
+      activeChapterProgress: 0.25,
+    });
+  });
+
+  it("clamps progress on the last chapter", () => {
+    expect(getVideoLayerChapterState(999, chapters)).toEqual({
+      activeChapterIndex: 2,
+      activeChapterProgress: 1,
+    });
+  });
+});

package/src/base/utils/chapter-progress-state.ts

@@ -0,0 +1,33 @@
+import type { VideoLayerChapterProgressItem } from "./video-layer-types";
+
+export const getVideoLayerChapterState = (
+  frame: number,
+  chapters: VideoLayerChapterProgressItem[],
+) => {
+  let cursor = 0;
+
+  for (let index = 0; index < chapters.length; index += 1) {
+    const chapter = chapters[index];
+    const start = cursor;
+    const end = start + chapter.durationInFrames;
+
+    if (frame < end || index === chapters.length - 1) {
+      const progress = Math.max(
+        0,
+        Math.min(1, (frame - start) / chapter.durationInFrames),
+      );
+
+      return {
+        activeChapterIndex: index,
+        activeChapterProgress: progress,
+      };
+    }
+
+    cursor = end;
+  }
+
+  return {
+    activeChapterIndex: 0,
+    activeChapterProgress: 0,
+  };
+};

package/src/base/utils/display-motion.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { resolveDisplayMotionStyle } from "./display-motion";
+
+describe("resolveDisplayMotionStyle", () => {
+  it("returns no transform when motion is missing or static", () => {
+    expect(resolveDisplayMotionStyle(undefined, 10, 30)).toEqual({});
+    expect(
+      resolveDisplayMotionStyle({ enabled: true, strategy: "static" }, 10, 30),
+    ).toEqual({});
+  });
+
+  it("returns deterministic drift transforms", () => {
+    expect(
+      resolveDisplayMotionStyle(
+        { enabled: true, strategy: "drift", amplitudeX: 10, amplitudeY: 4, speed: 0.5 },
+        15,
+        30,
+      ),
+    ).toEqual({ transform: "translate3d(10.00px, 4.00px, 0)" });
+  });
+});

package/src/base/utils/display-motion.ts

@@ -0,0 +1,52 @@
+import type { CSSProperties } from "react";
+import type { VideoLayerSurfaceMotionConfig } from "./video-layer-types";
+
+const getMotionOffset = (
+  motion: VideoLayerSurfaceMotionConfig,
+  frame: number,
+  fps: number,
+) => {
+  if (!motion.enabled) {
+    return {};
+  }
+
+  const strategy = motion.strategy ?? "static";
+  if (strategy === "static") {
+    return {};
+  }
+
+  const speed = motion.speed ?? 1;
+  const phase = motion.phase ?? 0;
+  const amplitudeX = motion.amplitudeX ?? 0;
+  const amplitudeY = motion.amplitudeY ?? 0;
+  const t = frame / Math.max(1, fps);
+  const wave = Math.sin((t + phase) * speed * Math.PI * 2);
+
+  if (strategy === "drift") {
+    return {
+      transform: `translate3d(${(wave * amplitudeX).toFixed(2)}px, ${(wave * amplitudeY).toFixed(2)}px, 0)`,
+    } satisfies CSSProperties;
+  }
+
+  if (strategy === "float") {
+    return {
+      transform: `translate3d(0, ${(wave * amplitudeY).toFixed(2)}px, 0)`,
+    } satisfies CSSProperties;
+  }
+
+  return {
+    transform: `translate3d(${(wave * amplitudeX * 0.5).toFixed(2)}px, ${(wave * amplitudeY * 0.5).toFixed(2)}px, 0)`,
+  } satisfies CSSProperties;
+};
+
+export const resolveDisplayMotionStyle = (
+  motion: VideoLayerSurfaceMotionConfig | undefined,
+  frame: number,
+  fps: number,
+): CSSProperties => {
+  if (!motion) {
+    return {};
+  }
+
+  return getMotionOffset(motion, frame, fps);
+};

package/src/base/utils/display-surface.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties } from "react";
+import type { VideoLayerSurfaceConfig } from "./video-layer-types";
+import { resolveDisplayMotionStyle } from "./display-motion";
+
+const getJustifyContent = (align: VideoLayerSurfaceConfig["position"]["align"]) => {
+  if (align === "center") {
+    return "center";
+  }
+
+  if (align === "right") {
+    return "flex-end";
+  }
+
+  return "flex-start";
+};
+
+export const buildVideoLayerDisplaySurfaceStyle = (
+  surface: VideoLayerSurfaceConfig,
+  frame: number,
+  fps: number,
+  overrides: CSSProperties = {},
+): CSSProperties => {
+  const placement = surface.position.placement;
+  const motionStyle = resolveDisplayMotionStyle(surface.motion, frame, fps);
+  const placementTransform = placement === "middle" ? "translateY(-50%)" : undefined;
+  const transform = [placementTransform, motionStyle.transform]
+    .filter(Boolean)
+    .join(" ");
+
+  return {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: placement === "bottom" ? undefined : placement === "middle" ? "50%" : 0,
+    bottom: placement === "bottom" ? 0 : undefined,
+    display: "flex",
+    justifyContent: getJustifyContent(surface.position.align),
+    textAlign: surface.position.align ?? "left",
+    width: "100%",
+    maxWidth: "none",
+    boxSizing: "border-box",
+    padding: surface.style.padding,
+    borderRadius:
+      placement === "top" || placement === "bottom" ? 0 : surface.style.borderRadius,
+    background: surface.style.backgroundColor ?? "transparent",
+    color: surface.style.color,
+    fontFamily: surface.style.fontFamily,
+    fontSize: surface.style.fontSize,
+    fontWeight: surface.style.fontWeight,
+    lineHeight: surface.style.lineHeight ?? 1.4,
+    textShadow: surface.style.shadow,
+    opacity: surface.style.opacity,
+    ...motionStyle,
+    transform: transform || undefined,
+    ...overrides,
+  };
+};

package/src/base/utils/index.ts

@@ -0,0 +1,10 @@
+export * from "./asset-source";
+export * from "./background-audio-layer";
+export * from "./background-layer";
+export * from "./chapter-progress-foreground";
+export * from "./chapter-progress-state";
+export * from "./display-motion";
+export * from "./display-surface";
+export * from "./subtitle-style";
+export * from "./video-layer-types";
+export * from "./voice-captions-foreground";

package/src/base/utils/subtitle-style.ts

@@ -0,0 +1,28 @@
+import type { VideoLayerSurfaceConfig } from "./video-layer-types";
+
+export type VideoLayerSubtitleViewport = {
+  width: number;
+  height: number;
+};
+
+export const resolveVideoLayerSubtitleStyle = (
+  surface: VideoLayerSurfaceConfig,
+  viewport: VideoLayerSubtitleViewport,
+): VideoLayerSurfaceConfig => {
+  const isPortrait = viewport.height > viewport.width;
+  const variant = isPortrait
+    ? surface.responsiveStyle?.portrait
+    : surface.responsiveStyle?.landscape;
+
+  if (!variant) {
+    return surface;
+  }
+
+  return {
+    ...surface,
+    style: {
+      ...surface.style,
+      ...variant,
+    },
+  };
+};