From c47b76badb3d62e2ad2d309cbee5346d1430c03f Mon Sep 17 00:00:00 2001 From: duyetbot Date: Thu, 2 Jul 2026 11:22:39 +0000 Subject: [PATCH 1/2] =?UTF-8?q?feat(v0.3):=20redesign=20launch=20film=20?= =?UTF-8?q?=E2=80=94=20editorial=20style,=20new=20features,=20original=20s?= =?UTF-8?q?core?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Redesign the v0.3 launch film to a flat "instrument / editorial" language and fold in the newest features, replacing the previous look and the stock score. Style (cut the AI-slop tells): - flat measurement-grid ground (no breathing radial glow / vignette) - numbered cues, ruled kickers, mask-revealed display titles - flat monospace "spec" tags instead of glass pills - hairline product window with a live-refresh arc (no traffic-light chrome) - persistent film rail (index · progress · domain); confident easeOutExpo motion - removed the Lottie pulse-ring dependency Content / new features: - new Alerts scene (fully rendered browser-notification cards, no screenshot) - SQL Console reframed (multi-query, database tree, dependency graph) - expensive-queries elevated in the montage; trusted-proxy auth in deploy scene - count-up intro stats; fixed the pre-rebrand end-card URL Runtime / build: - data-driven timeline (buildCues) — durations + total derived, exposed as window.__duration; render.mjs reads it and takes Chrome from $CHROME - self-contained: React / ReactDOM / Babel 7 vendored under src/vendor, fonts under src/fonts — renders fully offline, no CDN - original deterministic synth score generator (see v0.3 README § Music) Source only: the re-rendered chmonitor-v03-design-launch.mp4 and src/music.mp3 (both Git LFS) are not included here because this environment's egress policy blocks lfs.github.com, so new LFS objects cannot be uploaded. The film is fully reproducible from this source — `CHROME=... node render.mjs` + the ffmpeg command in v0.3/README.md regenerate the exact MP4 and score. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_013cRjpwtrRQiy1cdyPo3zq6 --- CLAUDE.md | 25 +- README.md | 2 +- index.html | 6 +- v0.3/README.md | 116 +- v0.3/src/animations.jsx | 1804 +++++----------- .../V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2 | Bin 0 -> 22288 bytes v0.3/src/fonts/fonts.css | 59 + ...BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2 | Bin 0 -> 31432 bytes v0.3/src/index.html | 1814 +++++------------ v0.3/src/render.mjs | 29 +- v0.3/src/vendor/babel.min.js | 4 + v0.3/src/vendor/react-dom.production.min.js | 267 +++ v0.3/src/vendor/react.production.min.js | 31 + 13 files changed, 1532 insertions(+), 2625 deletions(-) create mode 100644 v0.3/src/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2 create mode 100644 v0.3/src/fonts/fonts.css create mode 100644 v0.3/src/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2 create mode 100644 v0.3/src/vendor/babel.min.js create mode 100644 v0.3/src/vendor/react-dom.production.min.js create mode 100644 v0.3/src/vendor/react.production.min.js diff --git a/CLAUDE.md b/CLAUDE.md index 5b950de..56355a6 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -274,7 +274,24 @@ Auto-deployed on every push to `main` via `.github/workflows/pages.yml`. To add a new release to the landing page, copy the `.vcard` block in `index.html` and update `data-src`, `href`, version chip, title, and description. -## Known outstanding items (v0.3) - -- End card reads `github.com/duyet/clickhouse-monitoring` (pre-rebrand). Fix in `EndScene` in `v0.3/src/index.html` before next render. -- AI Agent and Topology scenes use static screenshots — replace with live recordings when `agent.mov` and `topology.mov` are available. +## Redesign notes (v0.3, current cut) + +The v0.3 film was redesigned to a flat "instrument / editorial" language — grid +ground (no breathing glow), numbered cues with ruled kickers + mask-revealed +titles, flat monospace "spec" tags (`Tag`) instead of glass pills, a hairline +product window (`Window`, no traffic-light chrome), a persistent `FilmRail`, and +an original synthesized score. Durable changes worth knowing before the next cut: + +- **Self-contained runtime, no CDN.** React / ReactDOM / Babel are vendored under + `v0.3/src/vendor/`, fonts under `v0.3/src/fonts/`. The render is fully offline. + Babel **7** standalone is required (Babel 8 broke the in-browser `text/babel` + runner). The Lottie pulse-ring dependency was removed. +- **Data-driven timeline.** Scene order/durations live in `buildCues()`; start/end + times and the total are derived (0.15s overlaps), exposed as `window.__duration`. + `render.mjs` reads it and takes the Chrome path from `$CHROME`. +- **Original score.** `music.mp3` is synthesized deterministically (no stock/AI + track). Regenerate with the Node synth described in `v0.3/README.md` § Music. +- End card now reads `github.com/chmonitor/chmonitor` (pre-rebrand URL fixed). +- Most feature scenes use static screenshots (`Frame`); Alerts is a fully-rendered + card (no screenshot). Replace AI Agent / Topology stills with live recordings + when `agent.mov` / `topology.mov` are available. diff --git a/README.md b/README.md index c15b090..9ec29b2 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ source needed to re-render or edit them. | Version | Folder | Highlights | |---------|--------|------------| -| v0.3 | [`v0.3/`](v0.3/) | Full rebuild launch film — TanStack Start dashboard, AI agent, query monitoring, data explorer, topology & health, self-host. | +| v0.3 | [`v0.3/`](v0.3/) | Full rebuild launch film (redesigned cut) — TanStack Start, AI agent, query monitoring, SQL console, AI insights, alerts, topology & health, self-host. Editorial redesign + original score. | ## Conventions diff --git a/index.html b/index.html index 67b0749..32a248e 100644 --- a/index.html +++ b/index.html @@ -201,13 +201,13 @@
v0.3
-
0:28
+
0:31