22ba23f353
2 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Marco Sadjadi
|
22ba23f353 |
fix(video): make Beat 2 visible — bigger particles, parallel schematic stroke
All checks were successful
Deploy to Production / deploy (push) Successful in 52s
User report: "I only see 'Search our Notion workspace' — no video." Cause: Beat 2 (frames 55-165) was a near-empty dead moment. Particles were 1.5-2.5px on a 1080p canvas (nearly invisible), and the server schematic didn't start drawing until local frame 30 (= global 85), leaving a 30-frame gap of empty space mid-clip. The viewer's brain correctly registered "the video stops after Beat 1." Fixes: - 60 particles (was 36) at radius 6→3 with SVG Gaussian-blur glow filter, always indigo (was an indecisive two-color split). - Schematic stroke starts at local frame 8 (was 30) so the box draws IN PARALLEL with particle convergence — eye always has something to track. - Central radial-glow attractor visible the whole beat — gives the "something is forming here" cue before the schematic appears. - Server schematic enlarged 460×300 → 720×420 so it commands attention rather than feeling small. - Inner tool-row dots and port dots doubled in size with stronger drop-shadow. - Beat 3 schematic + client panel sizes scaled to match, and the wire base position adjusted (server CX moved from 960 to 760 so the wire has room to breathe before reaching the client). - Poster frame moved from 60 (mid-fade dead spot) to 180 (Beat 3 Connection layout — the most "this is a real product" shot). File sizes still well under budget: 514 KB mp4, 319 KB webm, 29 KB poster. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
||
|
Marco Sadjadi
|
fd147f9998 |
feat(web): Remotion hero video — Section 2 (prompt → server → connect)
All checks were successful
Deploy to Production / deploy (push) Successful in 1m13s
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>
|