fcd7c979df
Co-authored-by: Artur <145776561+arturict@users.noreply.github.com> Co-authored-by: arturict <arturict@users.noreply.github.com> Co-authored-by: Thomas <thomas@ajnart.fr> Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com> Co-authored-by: Danura30082 <danura30082+github@gmail.com> Co-authored-by: Kushie <122986913+kushiemoon-dev@users.noreply.github.com> Co-authored-by: ajnart <thomas@ajnart.fr> Co-authored-by: ajnart <thomas@ajnart.dev> Co-authored-by: chenjun <chenjun@foxmail.com> Co-authored-by: Wikibear <wikibear@users.noreply.github.com> Co-authored-by: Bergasha <bergasha@gmail.com> Co-authored-by: leafyelin <43306196+leafyelin@users.noreply.github.com> Co-authored-by: Lucas Araujo <lucas.lra@gmail.com> Co-authored-by: GreenMonito <86085570+GreenMonito@users.noreply.github.com> Co-authored-by: Nerdy-Technician <roffo@nerdy-technician.social> Co-authored-by: Jun <34545896+jcstrong@users.noreply.github.com> Co-authored-by: Edmond Abraham <54119952+gitedmond@users.noreply.github.com> Co-authored-by: thrawnx <tight.bulb9384@fastmail.com> Co-authored-by: Chris <58918656+nordada@users.noreply.github.com> Co-authored-by: yi111 <153097222+Yi-111-a@users.noreply.github.com> Co-authored-by: Yanis <naamaneyanis@gmail.com> Co-authored-by: Wikibear <me@sej.de> Co-authored-by: alessiottavo <93441886+alessiottavo@users.noreply.github.com>
Homarr motion reel
The Homarr 2.0 motion reel: the original feature reel, then everything new in v2. It renders two cuts:
homarr-motion-reel.mp4: the full reel (about 61 s).homarr-motion-reel-v2.mp4: the v2 part only, from the rotating 3D logo (about 44 s).
Every frame is a pure function of reel time, so any frame can be rendered on its own:
window.renderFrame(t) in reel.js lays out DOM, SVG, canvas and a three.js layer for reel time t. Headless
Chromium screenshots each frame and ffmpeg averages sub-frames into real motion blur. The music and sound effects are
synthesised in Python, so there are no audio assets.
Reel time is a dense 20-bar choreography at 128 BPM. make_warp.py maps output time to reel time so each shot slows
down once its content is on screen and every cut lands on a beat. Change pacing there, not in reel.js.
Requirements
Run pnpm install at the repository root first; the scripts use its Playwright, esbuild and @tabler/icons. You also
need Python 3 with numpy and scipy, ffmpeg, npm and network access for the first setup.
Render
Run everything from this directory.
python3 setup.py # fonts, icons and the three.js bundle into assets/
python3 make_warp.py # warp-a (original reel), warp-b (v2), warp-global and warp-v2cut
python3 score.py global && python3 score.py v2cut
WARP=warp-a.json OUT=chunks-a WORKERS=4 node render.mjs
WARP=warp-b.json OUT=chunks-b WORKERS=4 node render.mjs
./assemble.sh
Rendering is CPU-bound and takes about 20 minutes with eight workers (both halves at once). Chunks are resumable: stop the renderer at any
time and run it again. Delete a chunk directory after changing reel.js or the warp.
Use node preview.mjs <reel seconds...> to screenshot single frames into preview/ while you work. Scene start times
are listed in the scene headers in reel.js.
Files
| File | Purpose |
|---|---|
reel.js |
All scenes, transitions and overlays |
index.html |
Stage, fonts and blur filters |
three/ |
3D logo and wordmark rigs from the 3D logo lab, bundled by setup.py |
make_warp.py |
Shot lengths in beats and per-shot speed ramps |
synth.py |
Drum, bass, pad, bell and effect synthesis |
score.py |
Music arrangement and effects placed on reel events through the warp |
render.mjs |
Parallel Playwright renderer with motion blur |
assemble.sh |
Joins chunks, adds the soundtrack and the v2 cut's black pre-roll |