admin 7733d7b754 website: prepare the moving laptop screen - the cut-out frame and the clip builder ...

The operator asked for the laptop's screen to show a few seconds of real apps
running. His decision: he records the raw clips, the assembly is built here. So no
Playwright and no new dependency - ffmpeg 7.1.5 is already on DooPlex.

NOT ON THE PAGE YET. The live hero still shows the still picture; this commit is the
two finished pieces plus the measurements behind the format choice.

scripts/make_hero_clip.py
  NN-appname.ext in -> scaled and centre-cropped to the screen's 1.626:1, crossfaded,
  out as mp4 (h264) + webm (VP9) + a webp poster. Runs on DooPlex; Windows has no
  ffmpeg. Not part of any build, gate or deploy: the site has no build step, so the
  output is committed like any other picture. Proven end to end against six
  placeholder scenes built from the repo's own app screenshots (21s loop -> mp4
  480 KB, webm 609 KB, poster 83 KB).

WHY NOT A GIF - measured, six crossfaded scenes:
    904x556   mp4 331 KB | webm 411 KB |            GIF 2676 KB for HALF the length
    1130x696  mp4 775 KB | webm 1196 KB | webp 2551 KB
  A GIF is ~11x the mp4 for the same seconds and dithers to 256 colours on a dark UI.

website/assets/hero-laptop-frame.webp
  The laptop render with its SCREEN CUT OUT to transparency, so a clip plays under the
  bezel with the glass reflection over it. The reflection is PAINTED: lifting the
  bright pixels out of the AI-drawn screen dragged a ghost of the drawn UI along.
  Hole: left 11.041% top 12.345% width 79.817% height 64.305%, ratio 1.626:1. Two
  pixels of slack - a tight rect showed the drawn sidebar's highlight, a loose one
  showed page background at the top left; both were seen in the browser.

The page will load it as <video muted loop playsinline preload="none"> with the first
frame as poster, started only on scroll-into-view and never under
prefers-reduced-motion. First paint: frame 59 KB + poster ~80 KB against today's single
57 KB still; the ~330 KB clip comes after, or never if the visitor does not scroll
there. No "loading" graphic needed - the poster IS the loading state.

The recording brief is in E:\felhom-video\README.txt (outside the repo: the raw files
are large and the repo is public).

2026-10-12 10:40:26 +02:00

60 KiB

1200x916px

Raw History