@studiomeyer/mcp-video 1.0.0

package/src/tools/engine/concat.ts

@@ -0,0 +1,242 @@
+/**
+ * Video concatenation engine — merge multiple clips with cinematic transitions
+ */
+
+import { execFile } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import { logger } from '../../lib/logger.js';
+import { getMediaDuration } from './audio.js';
+
+// ─── Available Transitions ──────────────────────────────────────────
+
+export const TRANSITIONS = [
+  'fade', 'fadeblack', 'fadewhite', 'dissolve',
+  'wipeleft', 'wiperight', 'wipeup', 'wipedown',
+  'slideleft', 'slideright', 'slideup', 'slidedown',
+  'smoothleft', 'smoothright', 'smoothup', 'smoothdown',
+  'circlecrop', 'circleopen', 'circleclose',
+  'rectcrop', 'vertopen', 'vertclose', 'horzopen', 'horzclose',
+  'diagtl', 'diagtr', 'diagbl', 'diagbr',
+  'hlslice', 'hrslice', 'vuslice', 'vdslice',
+  'radial', 'pixelize',
+] as const;
+
+export type TransitionType = typeof TRANSITIONS[number];
+
+// ─── Concatenation ──────────────────────────────────────────────────
+
+export interface ConcatClip {
+  /** Path to video file */
+  path: string;
+  /** Optional: trim start time (seconds) */
+  trimStart?: number;
+  /** Optional: trim end time (seconds) */
+  trimEnd?: number;
+}
+
+export interface ConcatConfig {
+  /** Video clips to concatenate (in order) */
+  clips: ConcatClip[];
+  /** Output path */
+  outputPath: string;
+  /** Transition between clips (default: fade) */
+  transition?: TransitionType;
+  /** Transition duration in seconds (default: 1) */
+  transitionDuration?: number;
+  /** Normalize all clips to this resolution (default: 1920x1080) */
+  targetWidth?: number;
+  targetHeight?: number;
+  /** Target FPS (default: 60) */
+  targetFps?: number;
+}
+
+export async function concatenateVideos(config: ConcatConfig): Promise<string> {
+  const {
+    clips,
+    outputPath,
+    transition = 'fade',
+    transitionDuration = 1,
+    targetWidth = 1920,
+    targetHeight = 1080,
+    targetFps = 60,
+  } = config;
+
+  if (clips.length === 0) throw new Error('No clips provided');
+
+  if (clips.length === 1) {
+    fs.copyFileSync(clips[0].path, outputPath);
+    return outputPath;
+  }
+
+  // Verify all clips exist
+  for (const clip of clips) {
+    if (!fs.existsSync(clip.path)) throw new Error(`Clip not found: ${clip.path}`);
+  }
+
+  // Get durations for each clip
+  const durations: number[] = [];
+  for (const clip of clips) {
+    let dur = await getMediaDuration(clip.path);
+    if (clip.trimStart) dur -= clip.trimStart;
+    if (clip.trimEnd) dur = Math.min(dur, clip.trimEnd - (clip.trimStart ?? 0));
+    durations.push(dur);
+  }
+
+  logger.info(`Concatenating ${clips.length} clips (${durations.map(d => d.toFixed(1) + 's').join(' + ')}) with ${transition} transition`);
+
+  const inputs: string[] = [];
+  const filterParts: string[] = [];
+
+  // Add inputs
+  for (const clip of clips) {
+    if (clip.trimStart !== undefined || clip.trimEnd !== undefined) {
+      if (clip.trimStart) inputs.push('-ss', String(clip.trimStart));
+      if (clip.trimEnd) inputs.push('-to', String(clip.trimEnd));
+    }
+    inputs.push('-i', clip.path);
+  }
+
+  // Normalize all inputs to same resolution and fps
+  for (let i = 0; i < clips.length; i++) {
+    filterParts.push(
+      `[${i}:v]scale=${targetWidth}:${targetHeight}:force_original_aspect_ratio=decrease,` +
+      `pad=${targetWidth}:${targetHeight}:(ow-iw)/2:(oh-ih)/2:color=black,` +
+      `setsar=1,fps=${targetFps}[v${i}]`
+    );
+  }
+
+  // Chain xfade filters with correct offset calculation
+  let cumulativeDuration = durations[0];
+  let prevLabel = 'v0';
+
+  for (let i = 1; i < clips.length; i++) {
+    const offset = Math.max(0, cumulativeDuration - transitionDuration);
+    const outLabel = i === clips.length - 1 ? 'vout' : `xf${i}`;
+
+    filterParts.push(
+      `[${prevLabel}][v${i}]xfade=transition=${transition}:duration=${transitionDuration}:offset=${offset.toFixed(3)}[${outLabel}]`
+    );
+
+    cumulativeDuration += durations[i] - transitionDuration;
+    prevLabel = outLabel;
+  }
+
+  // Ensure output dir exists
+  const outDir = path.dirname(outputPath);
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+
+  const args = [
+    '-y',
+    ...inputs,
+    '-filter_complex', filterParts.join(';'),
+    '-map', '[vout]',
+    '-c:v', 'libx264',
+    '-crf', '18',
+    '-preset', 'medium',
+    '-pix_fmt', 'yuv420p',
+    '-movflags', '+faststart',
+    outputPath,
+  ];
+
+  await runFfmpeg(args);
+
+  const stats = fs.statSync(outputPath);
+  logger.info(`Concatenated: ${outputPath} (${(stats.size / 1024 / 1024).toFixed(2)} MB)`);
+  return outputPath;
+}
+
+// ─── Intro/Outro Generator ─────────────────────────────────────────
+
+export interface IntroConfig {
+  /** Text to display */
+  text: string;
+  /** Subtitle (optional) */
+  subtitle?: string;
+  /** Duration in seconds (default: 3) */
+  duration?: number;
+  /** Background color (default: #0a0a0a) */
+  backgroundColor?: string;
+  /** Text color (default: white) */
+  textColor?: string;
+  /** Resolution */
+  width?: number;
+  height?: number;
+  /** FPS (default: 60) */
+  fps?: number;
+  /** Output path */
+  outputPath: string;
+}
+
+export async function generateIntro(config: IntroConfig): Promise<string> {
+  const {
+    text,
+    subtitle,
+    duration = 3,
+    backgroundColor = '#0a0a0a',
+    textColor = 'white',
+    width = 1920,
+    height = 1080,
+    fps = 60,
+    outputPath,
+  } = config;
+
+  const outDir = path.dirname(outputPath);
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+
+  // Find a usable font
+  const fontPath = await findFont();
+
+  // Build drawtext filter with fade animation
+  const escapedText = text.replace(/'/g, "\\\\'").replace(/:/g, '\\:');
+  let vf = `drawtext=text='${escapedText}':fontfile='${fontPath}':fontsize=72:fontcolor=${textColor}:x=(w-text_w)/2:y=(h-text_h)/2-40:alpha='if(lt(t\\,0.8)\\,t/0.8\\,if(gt(t\\,${duration - 0.8})\\,(${duration}-t)/0.8\\,1))'`;
+
+  if (subtitle) {
+    const escapedSub = subtitle.replace(/'/g, "\\\\'").replace(/:/g, '\\:');
+    vf += `,drawtext=text='${escapedSub}':fontfile='${fontPath}':fontsize=36:fontcolor=${textColor}@0.7:x=(w-text_w)/2:y=(h-text_h)/2+40:alpha='if(lt(t\\,1.2)\\,0\\,if(lt(t\\,2)\\,(t-1.2)/0.8\\,if(gt(t\\,${duration - 0.8})\\,(${duration}-t)/0.8\\,1)))'`;
+  }
+
+  const args = [
+    '-y',
+    '-f', 'lavfi',
+    '-i', `color=c=${backgroundColor}:s=${width}x${height}:d=${duration}:r=${fps}`,
+    '-vf', vf,
+    '-c:v', 'libx264',
+    '-crf', '18',
+    '-pix_fmt', 'yuv420p',
+    '-movflags', '+faststart',
+    outputPath,
+  ];
+
+  await runFfmpeg(args);
+  logger.info(`Intro generated: ${outputPath}`);
+  return outputPath;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+async function findFont(): Promise<string> {
+  const candidates = [
+    '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf',
+    '/usr/share/fonts/truetype/liberation/LiberationSans-Bold.ttf',
+    '/usr/share/fonts/truetype/ubuntu/Ubuntu-Bold.ttf',
+    '/usr/share/fonts/truetype/freefont/FreeSansBold.ttf',
+  ];
+  for (const f of candidates) {
+    if (fs.existsSync(f)) return f;
+  }
+  return '/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf';
+}
+
+function runFfmpeg(args: string[]): Promise<string> {
+  return new Promise((resolve, reject) => {
+    execFile('ffmpeg', args, { maxBuffer: 50 * 1024 * 1024 }, (error, stdout, stderr) => {
+      if (error) {
+        logger.error(`ffmpeg failed: ${stderr}`);
+        reject(new Error(`ffmpeg failed: ${stderr || error.message}`));
+        return;
+      }
+      resolve(stdout);
+    });
+  });
+}

package/src/tools/engine/cursor.ts

@@ -0,0 +1,222 @@
+/**
+ * Cursor simulation — injects a visible, smooth cursor into the page
+ * Uses Bézier curves for natural-looking mouse movement
+ */
+
+import type { Page } from 'playwright';
+import type { CursorConfig } from './types.js';
+
+const DEFAULT_CURSOR: Required<CursorConfig> = {
+  enabled: true,
+  style: 'dot',
+  color: 'rgba(255, 255, 255, 0.9)',
+  size: 20,
+  clickAnimation: true,
+};
+
+/**
+ * Inject a visible cursor overlay into the page
+ */
+export async function injectCursor(
+  page: Page,
+  config: Partial<CursorConfig> = {}
+): Promise<void> {
+  const opts = { ...DEFAULT_CURSOR, ...config };
+  if (!opts.enabled) return;
+
+  await page.evaluate(
+    ({ style, color, size, clickAnimation }) => {
+      // Create cursor element
+      const cursor = document.createElement('div');
+      cursor.id = '__cinema-cursor';
+
+      const isArrow = style === 'arrow' || style === 'pointer';
+
+      if (isArrow) {
+        // SVG arrow cursor
+        cursor.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 3L19 12L12 13L9 20L5 3Z" fill="${color}" stroke="rgba(0,0,0,0.4)" stroke-width="1.5"/>
+        </svg>`;
+        Object.assign(cursor.style, {
+          position: 'fixed',
+          zIndex: '2147483647',
+          pointerEvents: 'none',
+          left: '-100px',
+          top: '-100px',
+          transition: 'none',
+          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',
+        });
+      } else {
+        // Dot cursor
+        Object.assign(cursor.style, {
+          position: 'fixed',
+          zIndex: '2147483647',
+          pointerEvents: 'none',
+          width: `${size}px`,
+          height: `${size}px`,
+          borderRadius: '50%',
+          backgroundColor: color,
+          border: '2px solid rgba(0,0,0,0.2)',
+          boxShadow: '0 0 12px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1)',
+          left: '-100px',
+          top: '-100px',
+          transform: 'translate(-50%, -50%)',
+          transition: 'none',
+        });
+      }
+
+      document.body.appendChild(cursor);
+
+      // Click animation ring
+      if (clickAnimation) {
+        const ring = document.createElement('div');
+        ring.id = '__cinema-cursor-ring';
+        Object.assign(ring.style, {
+          position: 'fixed',
+          zIndex: '2147483646',
+          pointerEvents: 'none',
+          width: `${size * 2.5}px`,
+          height: `${size * 2.5}px`,
+          borderRadius: '50%',
+          border: `2px solid ${color}`,
+          left: '-100px',
+          top: '-100px',
+          transform: 'translate(-50%, -50%) scale(0)',
+          opacity: '0',
+          transition: 'none',
+        });
+        document.body.appendChild(ring);
+      }
+
+      // Store config on window for later use
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).__cinemaCursorConfig = { style, color, size, clickAnimation };
+    },
+    opts
+  );
+}
+
+/**
+ * Move cursor to a specific position with smooth Bézier interpolation
+ */
+export async function moveCursor(
+  page: Page,
+  targetX: number,
+  targetY: number,
+  duration: number = 800,
+  fps: number = 60
+): Promise<void> {
+  const frames = Math.max(1, Math.ceil((duration / 1000) * fps));
+
+  // Get current cursor position
+  const startPos = await page.evaluate(() => {
+    const cursor = document.getElementById('__cinema-cursor');
+    if (!cursor) return { x: 0, y: 0 };
+    return {
+      x: parseFloat(cursor.style.left) || 0,
+      y: parseFloat(cursor.style.top) || 0,
+    };
+  });
+
+  // Generate Bézier control points for natural movement
+  const dx = targetX - startPos.x;
+  const dy = targetY - startPos.y;
+  const cp1x = startPos.x + dx * 0.3 + (Math.random() - 0.5) * Math.abs(dx) * 0.2;
+  const cp1y = startPos.y + dy * 0.1 + (Math.random() - 0.5) * Math.abs(dy) * 0.3;
+  const cp2x = startPos.x + dx * 0.7 + (Math.random() - 0.5) * Math.abs(dx) * 0.15;
+  const cp2y = startPos.y + dy * 0.9 + (Math.random() - 0.5) * Math.abs(dy) * 0.2;
+
+  // Animate through Bézier curve
+  for (let i = 0; i <= frames; i++) {
+    const t = i / frames;
+    // Ease the t parameter for acceleration/deceleration
+    const et = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+
+    // Cubic Bézier
+    const mt = 1 - et;
+    const x = mt * mt * mt * startPos.x +
+              3 * mt * mt * et * cp1x +
+              3 * mt * et * et * cp2x +
+              et * et * et * targetX;
+    const y = mt * mt * mt * startPos.y +
+              3 * mt * mt * et * cp1y +
+              3 * mt * et * et * cp2y +
+              et * et * et * targetY;
+
+    await page.evaluate(
+      ({ x, y }) => {
+        const cursor = document.getElementById('__cinema-cursor');
+        if (cursor) {
+          cursor.style.left = `${x}px`;
+          cursor.style.top = `${y}px`;
+        }
+      },
+      { x: Math.round(x), y: Math.round(y) }
+    );
+
+    // Also move the actual mouse for hover effects
+    await page.mouse.move(Math.round(x), Math.round(y));
+  }
+}
+
+/**
+ * Move cursor to a CSS selector's center
+ */
+export async function moveCursorToElement(
+  page: Page,
+  selector: string,
+  duration: number = 800,
+  fps: number = 60
+): Promise<void> {
+  const pos = await page.evaluate((sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return null;
+    const rect = el.getBoundingClientRect();
+    return {
+      x: rect.left + rect.width / 2,
+      y: rect.top + rect.height / 2,
+    };
+  }, selector);
+
+  if (pos) {
+    await moveCursor(page, pos.x, pos.y, duration, fps);
+  }
+}
+
+/**
+ * Animate a click effect at current cursor position
+ */
+export async function animateClick(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const ring = document.getElementById('__cinema-cursor-ring');
+    const cursor = document.getElementById('__cinema-cursor');
+    if (!ring || !cursor) return;
+
+    ring.style.left = cursor.style.left;
+    ring.style.top = cursor.style.top;
+    ring.style.transition = 'transform 0.4s ease-out, opacity 0.4s ease-out';
+    ring.style.transform = 'translate(-50%, -50%) scale(0)';
+    ring.style.opacity = '1';
+
+    // Trigger animation
+    requestAnimationFrame(() => {
+      ring.style.transform = 'translate(-50%, -50%) scale(1)';
+      ring.style.opacity = '0';
+    });
+  });
+
+  // Wait for animation
+  await new Promise((r) => setTimeout(r, 450));
+}
+
+/**
+ * Hide cursor (move off-screen)
+ */
+export async function hideCursor(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    const cursor = document.getElementById('__cinema-cursor');
+    const ring = document.getElementById('__cinema-cursor-ring');
+    if (cursor) cursor.style.left = '-100px';
+    if (ring) ring.style.left = '-100px';
+  });
+}

package/src/tools/engine/easing.ts

@@ -0,0 +1,120 @@
+/**
+ * Cinema-grade easing functions for smooth scroll animations
+ * All functions: t ∈ [0,1] → output ∈ [0,1]
+ */
+
+import type { EasingName } from './types.js';
+
+// ─── Core Easing Functions ──────────────────────────────────────────
+
+const linear = (t: number): number => t;
+
+const easeInQuad = (t: number): number => t * t;
+const easeOutQuad = (t: number): number => t * (2 - t);
+const easeInOutQuad = (t: number): number =>
+  t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+
+const easeInCubic = (t: number): number => t * t * t;
+const easeOutCubic = (t: number): number => (--t) * t * t + 1;
+const easeInOutCubic = (t: number): number =>
+  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+
+const easeInQuart = (t: number): number => t * t * t * t;
+const easeOutQuart = (t: number): number => 1 - (--t) * t * t * t;
+const easeInOutQuart = (t: number): number =>
+  t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
+
+const easeInQuint = (t: number): number => t * t * t * t * t;
+const easeOutQuint = (t: number): number => 1 + (--t) * t * t * t * t;
+const easeInOutQuint = (t: number): number =>
+  t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2;
+
+const easeInOutSine = (t: number): number =>
+  -(Math.cos(Math.PI * t) - 1) / 2;
+
+/**
+ * Cinematic easing: slow start (15%), smooth cruise (70%), slow end (15%)
+ * Uses quintic in/out for dramatic deceleration at edges
+ */
+const cinematic = (t: number): number => {
+  if (t < 0.15) {
+    // Slow ease-in (quintic)
+    const local = t / 0.15;
+    return 0.15 * (local * local * local);
+  } else if (t > 0.85) {
+    // Slow ease-out (quintic)
+    const local = (t - 0.85) / 0.15;
+    return 0.85 + 0.15 * (1 - Math.pow(1 - local, 3));
+  } else {
+    // Linear cruise in the middle
+    const local = (t - 0.15) / 0.70;
+    return 0.15 + 0.70 * local;
+  }
+};
+
+/**
+ * Showcase easing: dramatic slow start, buttery cruise, elegant deceleration
+ * Designed specifically for portfolio showcase videos
+ *
+ * Distribution: 25% slow start → 50% smooth cruise → 25% slow end
+ * The cruise section uses easeInOutSine for a gentle wave-like motion
+ * that never feels rushed — perfect for long pages
+ */
+const showcase = (t: number): number => {
+  if (t < 0.25) {
+    // Very slow ease-in (quintic for dramatic slowness)
+    const local = t / 0.25;
+    return 0.08 * easeInQuint(local);
+  } else if (t > 0.75) {
+    // Very slow ease-out (quintic for elegant stop)
+    const local = (t - 0.75) / 0.25;
+    return 0.92 + 0.08 * easeOutQuint(local);
+  } else {
+    // Smooth cruise in the middle — easeInOutSine for wave-like feel
+    const local = (t - 0.25) / 0.50;
+    return 0.08 + 0.84 * easeInOutSine(local);
+  }
+};
+
+// ─── Easing Registry ────────────────────────────────────────────────
+
+const EASINGS: Record<EasingName, (t: number) => number> = {
+  linear,
+  easeInQuad,
+  easeOutQuad,
+  easeInOutQuad,
+  easeInCubic,
+  easeOutCubic,
+  easeInOutCubic,
+  easeInQuart,
+  easeOutQuart,
+  easeInOutQuart,
+  easeInQuint,
+  easeOutQuint,
+  easeInOutQuint,
+  easeInOutSine,
+  cinematic,
+  showcase,
+};
+
+/**
+ * Get an easing function by name
+ */
+export function getEasing(name: EasingName): (t: number) => number {
+  return EASINGS[name] ?? EASINGS.easeInOutCubic;
+}
+
+/**
+ * Apply easing to a progress value and map to a range
+ */
+export function applyEasing(
+  progress: number,
+  totalDistance: number,
+  easingName: EasingName = 'easeInOutCubic'
+): number {
+  const easingFn = getEasing(easingName);
+  const clamped = Math.max(0, Math.min(1, progress));
+  return Math.round(easingFn(clamped) * totalDistance);
+}
+
+export { EASINGS };