BB2G · Motion
A full-bleed looping hero, drift, ken burns and scroll reveals — with reduced motion, no-JS and background-tab failure already handled.
<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.
<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.
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.
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