# REPORT — 07-sticker-explainer
### 粗描边贴纸人科普 MG / Bold-outline sticker explainer · 「一部手机里，藏着多少种元素？」

## Concept (two sentences)
A single unbroken camera flight crosses one enormous canvas, peeling a phone apart into
sticker-ised components, lighting up the 62 elements hiding inside it, charting what they
weigh, and following six of them back to the mines they came from — before pulling all the
way out to one number: **62**.

It is the PaperClip / 林超 knowledge-video grammar executed straight: cut-out objects with
a fat white keyline, a calm blue-grey field, exact charts, and a camera that never stops.

## Beat sheet (timecodes)

| t | beat | picture | sound |
|---|---|---|---|
| 0.00–1.30 | **Hook** | Phone slams down on the left with an elastic settle; kicker chip「游标研究所 · 硬核拆解」; the question「拆开一部手机，能数出多少种元素？」types on in two lines; accent rule swipes; camera pushes in to 1.07x | sub + kick on the slam, blip on the chip, ticks on each line, whoosh on the rule |
| 1.42–3.40 | **Explode** | Camera pulls out and travels to the exploded station; the phone shatters at 1.82 into six stickers (frame / board / battery / camera / speaker / screen) that fly to a 3x2 grid with a 2–4 frame stagger and elastic settle. A dashed ghost of the assembled phone and dashed flight paths mark where each part came from. Six labels grow along orthogonal leader lines | impact + noise burst + boing on the shatter; six clicks for the six labels |
| 3.70–4.76 | **Elements** | Camera crosses to the periodic table (already standing in the world, so it is revealed, not popped). 126 faint cells; **62** tiles light up in a wave, hero elements in accent; the counter on the left counts 0 to 62 against a progress rail, landing on「占全部 118 种元素的 52%」 | whoosh + riser on arrival, a 28-tick rattle during the count, bell on 62 |
| 5.16–6.10 | **Chart** | Seven bars grow to exact scale (32/22/14/9/8/6/9 = 100), values count up, the largest in accent, the 其他 bucket hatched, a gridline/tick axis, a slow band of light scans the plot | whoosh + seven rising blips + a soft sub per bar |
| 6.40–7.76 | **HERO — supply chain** | Camera lands on a world map with a white flash. Six routes draw themselves as great-circle arcs (智利→铜, 刚果（金）→钴, 南非→铂, 印尼→锡, 澳大利亚→锂, 中国→稀土) converging on a sticker phone marked 组装, each with a pulsing node dot and a label led out over open ocean. Travelling dots keep looping along every finished route | whoosh + riser + the film's biggest impact; a tick and a blip per route |
| 8.20–9.10 | **Title card** | Pull out to the end card: 14 element chips drifting in a loose cloud, kicker, a giant **62** that slams in with squash-and-stretch,「种元素」baseline-locked to it, an accent rule with a travelling highlight,「一部手机，来自整个地球。」 | whoosh + riser on the pull-out, impact + sub + two bells on the slam |
| 9.10–10.00 | **Composed hold** | The calmest stretch of the film — and deliberately alive: chips drift and rotate, the 62 breathes, the rule's highlight travels, the kicker and caption breathe their tracking, the background blobs drift, the camera keeps creeping | everything drops away to a pad tail and a soft bell |

**Cue sheet** — one list, `CUE` in `parts/data.mjs`, is read by both the picture and
`audio.py` (mirrored in a comment at the top of that file). Every visual landing has an
audio onset at the same timestamp.

## How each signature feature is realised

| signature | where / how |
|---|---|
| **照片贴纸化（粗白描边）** cut-out stickers with a fat white keyline | Every object goes through one brush, `sticker()`: a thick white stroke of the path *then* the interior fill, so a ~10 px white keyline (held constant in *screen* px by dividing by the camera zoom) plus a soft drop shadow wraps the object. Used on the phone, all six exploded parts, every label plate, the hub phone and the element chips. |
| **蓝灰/米白冷静底色** calm blue-grey off-white field | `#E9EEF2` ground, `#F5F8FA` paper plates, slate `#1E2A38` / `#57697A` type and flat shapes, and exactly one accent `#FF5A36`. Nothing else is coloured. |
| **扁平图标 + 精确数据图表** flat icons + exact charts | Hand-drawn flat parts (SoC board, battery with its charge bar, triple-lens camera, speaker magnet). Charts are exact: bar heights are `v / max` x plot height, values count up to the same numbers, and 32+22+14+9+8+6+9 = 100 is stated on screen; 62 of 118 = 52% is consistent. |
| **大画布镜头平移缩放** one unbroken camera move over a huge canvas | One world ~12 300 x 1 400 units with six stations laid out along X. A single 16-key camera path pans and zooms between them on `expoInOut` eases and never cuts. Elements slide off and the next station slides in — no crossfade anywhere. The camera also never fully locks off: a slow low-frequency drift keeps every hold alive. |
| **信息密度极高的节拍化叙事** dense, beat-driven information | Seven beats in ten seconds, each introducing a new visual object; labels, counts, tick marks, graticule, ghost outlines and dashed leaders keep the frames full. Every beat is either busy or deliberately, visibly calm — never empty. |
| 柱状图生长 / 数字滚动 / 路径描边生长 | Bars grow on `easeOutQuart` with per-bar stagger; the element counter and bar values count up; supply routes are drawn by sampling the quadratic to an eased length; the coastlines and the accent rule grow as strokes. |
| 克制配色 + 等线字体 | Two greys + one accent + white; one CJK sans stack and one Latin stack at few sizes, with weight contrast and manual tracking. |

## Tech route
A single 1920x1080 canvas in a headless-Chrome page exposing `window.renderAt(t)`; the
harness screenshots 300 frames and muxes with ffmpeg.

- **World + camera.** Content lives in world coordinates; `renderAt` sets a
  translate/scale transform from a 16-keyframe camera path and culls stations outside the
  view. Stations are spaced >= 2 200 units apart so two are never framed at once.
- **Determinism.** Every frame is a pure function of `t`. No `Math.random`
  (`mulberry32(20260707)` for the drifting chips), no `Date.now()`, no CSS transitions, no
  rAF, no per-call accumulation. All randomness is precomputed at load.
- **Performance.** Background light blobs and the vignette are precomputed once into
  offscreen canvases and blitted; text widths are memoised; the shared grain is tile-based.
  Measured ~0.26 s per frame including the CDP screenshot round-trip.
- **Grain for bitrate.** Coarse (3 px cell), light (0.09 overlay) and drifting at only 3 %
  of real time, so H.264 can predict it: the film lands at **8.5 Mbps**.
- **Sound.** Pure synthesis via `shared/audio.py` — a 120 bpm bed (detuned saw pads on a
  five-bar F-minor progression, eighth-note sub pulses, a kick-and-hat pulse that only
  opens up after the shatter) plus UI sound design. One static `loudnorm` pass to -14 LUFS.

## Check numbers
| spec | value |
|---|---|
| duration | **10.000 s** (300 frames) |
| resolution | **1920 x 1080** |
| fps | **30** |
| video | H.264, yuv420p, **8.5 Mbps**, 10.7 MB |
| audio | AAC stereo, **48 000 Hz**, 194 kbps |
| integrated loudness | **-13.9 LUFS** |
| true peak | **-2.0 dBTP** |
| black frames | 0 |
| console errors / 404s | 0 |
| rhythm dead spans | **none** (calmest window 9–9.53 s at 0.43 % moved — the composed hold) |

## Honest top-3 weaknesses
1. **The world map is a coarse vector approximation.** The coastlines are hand-authored
   polylines; Africa and Eurasia are recognisable but read as a stylised map rather than a
   projected one, the Black Sea and Caspian are absent, and the Mediterranean is thinner
   than reality. With more time I would drive it from a real public-domain low-poly
   coastline dataset.
2. **The camera path is a lateral sweep with a few zooms, not a composed multi-axis move.**
   It is one continuous shot as the style demands, but the stations sit on a straight line,
   so the move is essentially a dolly — a richer path (arcs, a whip pan, one deliberate
   handheld beat) would read more like the reference films.
3. **The soundtrack bed is functional rather than memorable.** It is clean, on-genre and
   well locked to the picture, but the harmonic content is a simple four-chord pad and the
   mix leans on the SFX; there is no real melodic hook. The same cue sheet with a written
   motif would lift the whole film.

Secondary: the phone screen art is a flat illustrated landscape rather than a photographic
cut-out, so the "photo sticker" effect is convincing as a graphic object but not literally
photographic; and the frame pair at t=3.73 s is the quietest in the film (delta 0.036,
above the stuck-frame threshold but worth noting).

## Self-scores (1-10)
| dimension | score |
|---|---|
| style fidelity | 8.5 |
| concept wow | 7.5 |
| motion craft | 8.0 |
| design & typography | 8.0 |
| finish & texture | 8.0 |
| sound & sync | 7.5 |
| technical | 9.0 |