feat(home): swap the promo video for the interactive walkthrough

[cevheri]

The home page led with a click-to-load YouTube facade. It now leads with the demo itself.

Two self-contained bundles in public/demo/ — a 16:9 editor clip and a portrait phone clip — picked by viewport, played when they scroll into view, paused when they leave. React, fonts and screenshots are all inlined, so this keeps the facade's property of making no third-party request (verified in a network trace: no unpkg, no CDN), and adds nothing to our own bundle.

Two things the bundles disagree on

Both are handled in LibreDBDemo.astro, and both were found by testing rather than reading:

They speak different postMessage protocols, and each ignores the other's.

message	desktop clip	phone clip
'libredb-demo:play' (string)	honored	ignored
{type: 'om-demo-play'} (object)	ignored	honored

The component sends both forms; the loaded clip picks up its own.

The desktop clip's play does not resume a paused run — it starts another timeline on top of it, so a second animated cursor drifts across the frame after the first scroll-away-and-back, and a third after the next. It is played once per document and a re-entry reloads it instead. The phone clip resumes properly and just continues from where it stopped.

Layout

The frame takes the full container width rather than the video's max-w-3xl: the clip renders a whole IDE at 16:9, and the extra ~250px is the difference between readable SQL and a thumbnail. Below md it swaps to the portrait clip (aspect-[430/960], capped at 460px, no border — the clip draws its own device frame), which is readable at 390px where the scaled-down desktop clip was not. Crossing the breakpoint live — a rotated tablet, a resized window — swaps the clip.

The markup carries the desktop src so it still renders without JS; the script swaps in the phone clip at parse time, well before a lazy iframe this far down the page starts fetching, so a phone never pulls the 439KB desktop bundle.

PromoVideo stays — /get-started still uses it.

Verified

• Desktop 1440px and mobile 390px, fresh load plus two scroll-away/return cycles each: one cursor on desktop, one tap ripple on mobile, both still advancing.
• Breakpoint swap confirmed in both directions.
• Gate clean: 0 errors, prettier clean, oxlint clean, knip clean, 75 tests pass. Build produces both bundles in dist/demo/.