From 7733d7b7541bf618cc70be907d1747d4c3ff67ee Mon Sep 17 00:00:00 2001 From: kisfenyo Date: Mon, 12 Oct 2026 10:40:26 +0200 Subject: [PATCH] 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