e4e437c44c
All checks were successful
Deploy to Production / deploy (push) Successful in 1m2s
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>
50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
// 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`);
|