buildmymcpserver/remotion/package.json

25 lines
870 B
JSON
Raw Normal View History

feat(web): Remotion hero video — Section 2 (prompt → server → connect) New @bmm/video workspace at remotion/. Renders an 8s 1920×1080 H.264 + WebM + JPG poster sequence that visualises the three-step "How it works" pitch literally: - Beat 1 (0-2s): "Search our Notion workspace" word-by-word entrance with spring-in from below + brief indigo under-glow + monospace prompt.txt label. Blinking cursor bridges the loop seam. - Beat 2 (2-5s): each prompt word detonates into ~9 particles per word; particles drift, then magnetically converge onto target slots along a server schematic that strokes itself on. Scan-line sweep + corner labels (mcp-notion, OAuth 2.1, search_pages, get_page_content) sell that this is a real artefact, not a placeholder. - Beat 3 (5-8s): Claude Desktop client panel slides in from the right; a Bézier wire animates between server and client; three data-packet dots travel along the wire; 200-OK tag pops; green live-dot pulses on the server. Last 12 frames fade to black so frame 239 ≈ frame 0 and browser <video loop> has no visible seam. Brand palette is hard-coded in lib/colors.ts to match globals.css — keeps the Remotion bundle self-contained (no Tailwind import needed). springIn / softSpring / clampLerp / rand helpers in lib/easings.ts power the motion vocabulary. Concurrency=1 + yuv420p in the config gives a deterministic render that plays on every <video> tag. File sizes: hero.mp4 449 KB, hero.webm 258 KB, hero-poster.jpg 33 KB — all well under the 3 MB / 250 KB ceilings. Section 2 ("How it works") now opens with the video in a border-bordered aspect-video panel between the heading and the three existing cards. autoPlay+muted+loop+playsInline satisfies every mobile autoplay policy; motion-reduce:hidden swaps in the static poster for prefers-reduced-motion users. Scripts: - pnpm --filter @bmm/video render:all (mp4 + webm + poster) - pnpm --filter @bmm/video to-web (copy to apps/web/public/videos/) - pnpm --filter @bmm/video build (both, end-to-end) `to-web` is the script name because `publish` collides with pnpm's built-in npm-publish command which refused to run with an unclean tree. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 10:57:08 +02:00
{
"name": "@bmm/video",
"version": "0.1.0",
"private": true,
"scripts": {
"studio": "remotion studio src/index.ts",
"render:mp4": "remotion render src/index.ts HeroVideo out/hero.mp4 --codec h264 --crf 28 --pixel-format yuv420p",
"render:webm": "remotion render src/index.ts HeroVideo out/hero.webm --codec vp9 --crf 32",
"render:poster": "remotion still src/index.ts HeroVideo out/hero-poster.jpg --frame 60 --image-format jpeg --jpeg-quality 85",
"render:all": "pnpm render:mp4 && pnpm render:webm && pnpm render:poster",
"to-web": "node scripts/publish-to-web.mjs",
"build": "pnpm render:all && pnpm to-web"
},
"dependencies": {
"@remotion/cli": "4.0.220",
"react": "19.0.0",
"react-dom": "19.0.0",
"remotion": "4.0.220"
},
"devDependencies": {
"@types/react": "19.0.2",
"typescript": "5.7.2"
}
}