BB2G · Motion

The lure standard,
as two lines.

A full-bleed looping hero, drift, ken burns and scroll reveals — with reduced motion, no-JS and background-tab failure already handled.

Drop it in

<script>document.documentElement.className+=' bbm-js';</script>
<link rel="stylesheet" href="https://motion.bornbetween2generals.com/motion.css">
<script defer src="https://motion.bornbetween2generals.com/motion.js"></script>

The inline line is load-bearing and must stay in <head>: it sets the flag before first paint, so the hidden-before-reveal state never applies when scripting is off. A deferred script is too late, and a blank page is a worse failure than no animation.

The hero markup

<section class="bbm-hero">
  <img   class="bbm-hero__still" src="hero.jpg" alt="">
  <video class="heroloop" muted loop playsinline preload="metadata"
         poster="hero.jpg" src="hero.mp4"></video>
  <div   class="bbm-hero__veil"></div>
  <div   class="bbm-hero__in"> …type… </div>
</section>

The <img> underneath is not optional. The watchdog removes a video that has not started after 4.5 s, and it would take a poster attribute with it — leaving the empty hero the watchdog existed to prevent.

Get the footage

node ~/bb2g-house/kit/hero.mjs hero.config.json

Reads PEXELS_API_KEY from ~/.secrets/keys.scratch, picks a long take, strips the expiring signed query string, transcodes to the 2.5 MB hero budget and writes a poster. Subject rule: rooms, objects, weather, hands, backs of heads — never identifiable faces, never children.

Do not reach for stock reflexively. Several apps print that their art is drawn rather than filmed. On those, stock footage would falsify a claim made on the work — cut the hero from the app's own plates instead.

Where the fleet stands

48

live apps with a real moving hero

95

live apps still static

122

with no reduced-motion guard

147

measured on 14 Aug 2026