vibebusiness 1.2.77 → 1.2.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibebusiness",
-  "version": "1.2.77",
+  "version": "1.2.80",
   "description": "AI-powered autonomous product manager. Research. Build. Ship. Grow.",
   "license": "SEE LICENSE IN LICENSE",
   "private": false,

package/scripts/lib/video/compositions/AdVideo.tsx

@@ -1,26 +1,29 @@
 /**
- * AdVideo — 5-slide ad composition.
+ * AdVideo — ad composition with optional background music.
  *
  * Formats:
  *   AdFeed  — 1080×1080 (Instagram/LinkedIn square)
  *   AdReels — 1080×1920 (Reels/Shorts/Stories vertical)
  *
- * 5 slides × 90 frames (3s) = 450 frames total at 30fps.
+ * Slide count is dynamic (5-7 slides from Claude). Duration = slides.length × 90 frames.
  */
 
 import React from 'react';
 import { AbsoluteFill, Sequence } from 'remotion';
 import { Slide } from './Slide';
 import type { SlideData } from './Slide';
+import { BackgroundMusic } from './BackgroundMusic';
+import type { AudioConfig } from '../renderer';
 
 export interface AdVideoProps {
   slides: SlideData[];
   format: 'feed' | 'reels';
+  audio?: AudioConfig;
 }
 
 const FRAMES_PER_SLIDE = 90; // 3 seconds at 30fps
 
-export const AdVideo: React.FC<AdVideoProps> = ({ slides }) => {
+export const AdVideo: React.FC<AdVideoProps> = ({ slides, audio }) => {
   return (
     <AbsoluteFill
       style={{
@@ -32,6 +35,7 @@ export const AdVideo: React.FC<AdVideoProps> = ({ slides }) => {
           <Slide slide={slide} />
         </Sequence>
       ))}
+      {audio && <BackgroundMusic audio={audio} />}
     </AbsoluteFill>
   );
 };

package/scripts/lib/video/compositions/BackgroundMusic.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { Audio, interpolate, useCurrentFrame, useVideoConfig, staticFile } from 'remotion';
+import type { AudioConfig } from '../renderer';
+
+const DEFAULTS = {
+  volume: 0.3,
+  fadeInSeconds: 0.5,
+  fadeOutSeconds: 1.0,
+} as const;
+
+export const BackgroundMusic: React.FC<{ audio: AudioConfig }> = ({ audio }) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+
+  const baseVolume = audio.volume ?? DEFAULTS.volume;
+  const fadeInFrames = Math.round((audio.fadeInSeconds ?? DEFAULTS.fadeInSeconds) * fps);
+  const fadeOutFrames = Math.round((audio.fadeOutSeconds ?? DEFAULTS.fadeOutSeconds) * fps);
+  const fadeOutStart = durationInFrames - fadeOutFrames;
+
+  const volumeFunction = useCallback(() => {
+    if (frame < fadeInFrames) {
+      return interpolate(frame, [0, fadeInFrames], [0, baseVolume], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+    }
+    if (frame >= fadeOutStart) {
+      return interpolate(frame, [fadeOutStart, durationInFrames], [baseVolume, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+    }
+    return baseVolume;
+  }, [frame, fadeInFrames, fadeOutStart, durationInFrames, baseVolume]);
+
+  const src = audio.src.includes('/')
+    ? staticFile(audio.src)
+    : staticFile(`audio/${audio.src}`);
+
+  return <Audio src={src} volume={volumeFunction()} />;
+};

package/scripts/lib/video/compositions/Root.tsx

@@ -4,8 +4,11 @@
  * Registers 4 compositions:
  *   ShipFeed   — 7-slide ship announcement, 1080×1080
  *   ShipReels  — 7-slide ship announcement, 1080×1920
- *   AdFeed     — 5-slide ad video, 1080×1080
- *   AdReels    — 5-slide ad video, 1080×1920
+ *   AdFeed     — 5-7 slide ad video, 1080×1080
+ *   AdReels    — 5-7 slide ad video, 1080×1920
+ *
+ * Ad compositions use calculateMetadata for dynamic duration — Claude may
+ * generate 5-7 slides, so duration is computed from props at render time.
  *
  * This file is bundled at runtime by @remotion/bundler (webpack).
  * It must call registerRoot() as a side effect.
@@ -29,7 +32,7 @@ const AdComp = AdVideo as unknown as AnyComp;
 
 const FRAMES_PER_SLIDE = 90; // 3s at 30fps
 const SHIP_SLIDE_COUNT = 7;
-const AD_SLIDE_COUNT = 5;
+const AD_SLIDE_COUNT_DEFAULT = 5;
 
 // ─── Default props (used in Remotion Studio preview) ─────────────────────────
 
@@ -40,7 +43,7 @@ const placeholderSlide: SlideData = {
 };
 
 const defaultShipSlides: SlideData[] = Array(SHIP_SLIDE_COUNT).fill(placeholderSlide);
-const defaultAdSlides: SlideData[] = Array(AD_SLIDE_COUNT).fill(placeholderSlide);
+const defaultAdSlides: SlideData[] = Array(AD_SLIDE_COUNT_DEFAULT).fill(placeholderSlide);
 
 // ─── Root component ──────────────────────────────────────────────────────────
 
@@ -68,20 +71,28 @@ export const RemotionRoot: React.FC = () => {
       <Composition
         id="AdFeed"
         component={AdComp}
-        durationInFrames={AD_SLIDE_COUNT * FRAMES_PER_SLIDE}
+        durationInFrames={AD_SLIDE_COUNT_DEFAULT * FRAMES_PER_SLIDE}
         fps={30}
         width={1080}
         height={1080}
         defaultProps={{ slides: defaultAdSlides, format: 'feed' } as AdVideoProps}
+        calculateMetadata={({ props }) => ({
+          durationInFrames: (props as unknown as AdVideoProps).slides.length * FRAMES_PER_SLIDE,
+          props,
+        })}
       />
       <Composition
         id="AdReels"
         component={AdComp}
-        durationInFrames={AD_SLIDE_COUNT * FRAMES_PER_SLIDE}
+        durationInFrames={AD_SLIDE_COUNT_DEFAULT * FRAMES_PER_SLIDE}
         fps={30}
         width={1080}
         height={1920}
         defaultProps={{ slides: defaultAdSlides, format: 'reels' } as AdVideoProps}
+        calculateMetadata={({ props }) => ({
+          durationInFrames: (props as unknown as AdVideoProps).slides.length * FRAMES_PER_SLIDE,
+          props,
+        })}
       />
     </>
   );

package/scripts/lib/video/compositions/ShipVideo.tsx

@@ -1,5 +1,5 @@
 /**
- * ShipVideo — 7-slide ship announcement composition.
+ * ShipVideo — ship announcement composition with optional background music.
  *
  * Formats:
  *   ShipFeed  — 1080×1080 (Instagram/LinkedIn square)
@@ -12,15 +12,18 @@ import React from 'react';
 import { AbsoluteFill, Sequence } from 'remotion';
 import { Slide } from './Slide';
 import type { SlideData } from './Slide';
+import { BackgroundMusic } from './BackgroundMusic';
+import type { AudioConfig } from '../renderer';
 
 export interface ShipVideoProps {
   slides: SlideData[];
   format: 'feed' | 'reels';
+  audio?: AudioConfig;
 }
 
 const FRAMES_PER_SLIDE = 90; // 3 seconds at 30fps
 
-export const ShipVideo: React.FC<ShipVideoProps> = ({ slides }) => {
+export const ShipVideo: React.FC<ShipVideoProps> = ({ slides, audio }) => {
   return (
     <AbsoluteFill
       style={{
@@ -32,6 +35,7 @@ export const ShipVideo: React.FC<ShipVideoProps> = ({ slides }) => {
           <Slide slide={slide} />
         </Sequence>
       ))}
+      {audio && <BackgroundMusic audio={audio} />}
     </AbsoluteFill>
   );
 };