buildmymcpserver/remotion/scripts/postprocess.mjs

50 lines
1.6 KiB
JavaScript
Raw Normal View History

feat(web): hero redesign — cycling step rotator + full-width video section Restructures the landing page above-the-fold into two distinct sections: 1. **Hero — left copy + cycling tile, no static stack of three blocks** New `<HeroStepRotator>` (Framer Motion client component) shows ONE tile centred in the column, cycling prompt.txt → build.log → claude_desktop_config.json every 3.5s. Auto-advance pauses on hover and exposes a 3-dot tablist so users can jump to any step. The active dot grows wide with an accent glow. Mouse interaction: spring-smoothed 3D tilt on rotateX/rotateY plus a radial glow that translates toward the cursor — both driven by motion values, so the transforms stay on the GPU compositor instead of re-rendering on every mousemove. `useReducedMotion()` strips the tilt + glow translation and collapses the page transition to an instant cross-fade (the rotation itself still advances — it's content, not decoration). Hero padding tightened (py-12/14/16 vs py-14/20/28) so the video section below is teased above the fold. New scroll cue ("see it run" + animated chevron) sits at the bottom of the hero, anchored to #flow. 2. **Flow video — full-width edge-to-edge under the hero (new section)** The hero.mp4 / hero.webm pair moves out of the "How it works" section into its own #flow section. No max-w wrapper — it spans the viewport with `w-full aspect-video`, so on a 1080p monitor the video gets the full 1920px width. Adds a subtle radial vignette so the black edges blend into the page chrome. 3. **"How it works" — now lean** Video removed (it's the flow section now). Just the three textual cards as supporting copy. Adds `framer-motion@11.18.2` to apps/web/package.json. Build passes typecheck + Next.js production build with no new warnings; LCP path is untouched since the rotator is client-hydrated after first paint and Framer Motion is tree-shaken to the components we import. Note: visitors with `prefers-reduced-motion: reduce` will still see the video's poster instead of autoplay — Chrome blocks the network fetch entirely for autoplay media when reduced-motion is set. The flow video remains visible for the rest, and the step rotator continues to cycle its content (with instant cross-fade instead of slide+scale). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 12:05:28 +02:00
// Re-encode the raw Remotion output to a browser-safe MP4 then delete
// the raw file. The previous pipeline used `-c:v copy` which preserved
// `pix_fmt=yuvj420p` (JPEG full-range) — Chrome refuses to decode that
// correctly and the video ships as a black square on the marketing page.
//
// Flags below were verified to produce a tag the browsers accept:
// pix_fmt=yuv420p, color_range=tv, profile=Main, level=4.0, BT.709.
import { spawnSync } from 'node:child_process';
import { existsSync, unlinkSync } from 'node:fs';
import { resolve, dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
const __dirname = dirname(fileURLToPath(import.meta.url));
const root = resolve(__dirname, '..');
const rawPath = resolve(root, 'out', 'hero-raw.mp4');
const outPath = resolve(root, 'out', 'hero.mp4');
if (!existsSync(rawPath)) {
console.error(`postprocess: input not found at ${rawPath}`);
process.exit(1);
}
const ffmpegArgs = [
'-y',
'-i', rawPath,
'-c:v', 'libx264',
'-profile:v', 'main',
'-level', '4.0',
'-vf', 'format=yuv420p,colorspace=bt709:iall=bt709:fast=1',
'-color_range', 'tv',
'-color_primaries', 'bt709',
'-color_trc', 'bt709',
'-colorspace', 'bt709',
'-preset', 'slow',
'-crf', '23',
'-an',
'-movflags', '+faststart',
outPath,
];
const result = spawnSync('ffmpeg', ffmpegArgs, { stdio: 'inherit' });
if (result.status !== 0) {
console.error(`postprocess: ffmpeg exited with code ${result.status}`);
process.exit(result.status ?? 1);
}
unlinkSync(rawPath);
console.log(`postprocess: wrote ${outPath} and removed raw input`);