website: prepare the moving laptop screen - the cut-out frame and the clip builder
gates / gates (push) Failing after 14m28s
gates / gates (push) Failing after 14m28s
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).
This commit is contained in:
@@ -1,3 +1,23 @@
|
||||
## 2026-10-12 (evening) — make_hero_clip.py: the home page's laptop clip
|
||||
|
||||
- `scripts/make_hero_clip.py` assembles the hero clip from the operator's raw app recordings:
|
||||
`NN-appname.ext` in, scaled and centre-cropped to the laptop screen's 1.626:1, crossfaded, out as
|
||||
**mp4 (h264) + webm (VP9) + a webp poster**. Runs on DooPlex; Windows has no ffmpeg. It is not part
|
||||
of any build, gate or deploy — the site has no build step, so its output is committed like any
|
||||
other picture.
|
||||
- **Why mp4+webm and not a GIF**, measured on DooPlex 2026-10-12 with six crossfaded scenes:
|
||||
|
||||
| | 11.4s @ 904×556 | 11.4s @ 1130×696 |
|
||||
|---|---:|---:|
|
||||
| mp4 (h264 crf30) | **331 KB** | 775 KB |
|
||||
| webm (VP9 crf44) | 411 KB | 1 196 KB |
|
||||
| animated webp | — | 2 551 KB |
|
||||
| GIF | **2 676 KB for 6s** | — |
|
||||
|
||||
A GIF is ~11× the mp4 for the same seconds, and dithers to 256 colours on a dark UI.
|
||||
- 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.
|
||||
|
||||
## 2026-10-12 (afternoon) — gate 22 also refuses an unscoped bare element rule
|
||||
|
||||
- `site_gates.py` gate 22 gains a second half: a rule in `site.css` whose selector starts with a bare
|
||||
|
||||
Reference in New Issue
Block a user