# 14-liquid-motion — 「液态创世 / FLUX」

## Concept
Deep plum dark; a single glossy droplet of candy liquid falls, splashes and feeds a growing
pool that flings out strands of itself, then a wave of liquid floods the whole screen and
withdraws to the right — leaving the wordmark **FLUX** behind, as if the liquid had been
wiped off the letters. Drips fall from the finished logo into a still pool below; the end
frame is held with the sheen, the rings and the whole mark still breathing.

The idea is literal: *the type is made of the liquid, and the transition is the liquid
leaving.* Nothing is a cross-fade — every change of image is carried by a moving body of liquid.

## Beat sheet (timecodes)
| t | beat | sound |
|---|---|---|
| 0.00 | hook: a fat droplet already in frame above a small glossy pool (never an empty open) | bed starts, sub pulse |
| 0.50 | drop 1 lands centre — squash, ring, four secondary droplets follow 2–3 frames late | splash + gloop + pop |
| 1.00 / 1.35 | drops 2 & 3 land left / right, each with its own squash and secondary spray | splash + gloop |
| 1.75 / 2.05 | drops 4 & 5; the pool bounces and settles between hits | splash + gloop |
| 2.42–3.02 | **strand**: a lobe is flung up-left, a neck thins from 30 px to nothing, snaps, both ends rebound ~3 frames | pop + blip at the snap |
| 3.10–3.68 | the same to the upper right | pop + blip |
| 3.55–4.15 | anticipation: the pool stretches wide and thin, gathering itself | riser 3.35 |
| 4.00–4.85 | **the flood**: a wave with 3–5 phase-offset bulges sweeps left → right and covers the frame | whoosh 3.92, break 4.55 |
| 4.72 | the wave completes and breaks over the top | impact + bell + sub |
| 4.85–7.15 | the liquid withdraws to the right with a wavy trailing edge (5–9 bulges) | bed opens up, hats in |
| 5.60 | the trailing edge has passed the **F** — the first letter is revealed | — |
| 5.9 → 6.4 | L, U, X are revealed in turn as the edge sweeps past each one; each locks with a rim flash and a 3-frame rebound | bells rising |
| 6.35 | **hero moment** — the wordmark FLUX is complete and flashes | impact + stab + 4 bells |
| 7.06 / 7.56 / 8.06 / 8.42 | four drips form on the logo, thin to a neck, detach, fall into the pool below and ripple | pops, drips, splashes |
| 7.95 | tagline 以液为墨，流动成字 settles up into place, tracking breathing | soft bell |
| 9.10 | last drip lands — the biggest ring | splash + gloop |
| 9.1–10.0 | composed hold: mark floats ±4 px, surface shimmer, sheen drifting, pool rings, tagline tracking breathing | pad tail, fade |

## Signature features — where each one lives
- **波浪边缘转场 / 一泼颜料漫过屏幕** (4.0–7.2 s). The transition is one moving body of liquid.
  Its leading edge is `waveEdge(y)`: three phase-offset harmonics (0.62·sin + 0.42·sin +
  0.26·sin) so the front carries 3–5 separate bulges, never a straight line. The trailing
  edge uses the same function with a second, drifting phase. The letters are revealed by the
  *trailing* edge sweeping past them (`reveal_i = smoothstep(gx_i−170, gx_i+95, backX)`), so
  the wordmark is literally uncovered by liquid draining off it.
- **拉丝与滴落** (2.42–3.68 s and 7.06–9.10 s). Strands are capsule primitives smooth-min'd
  into the pool whose radius is driven from 30 px to 1.6 px over the flight; at the snap the
  satellite is switched to a projectile with an outward rebound velocity and falls back into
  the mass. The end drips repeat the same construction vertically off the letters.
- **metaball 融合** (0.4–4.0 s). Every primitive (circle, capsule, slab, and each letter's
  distance channel) is combined with a polynomial smooth-min, so a falling drop grows a neck
  into the pool as it approaches and secondary droplets visibly *stick and merge* rather than
  overlap. A fake-3D dome profile (`h = sqrt(2·uThick·inside − inside²)`) is derived from the
  field, and the surface normal comes from its finite-difference gradient — that is what makes
  the merging read as one body of thick liquid instead of flat discs.
- **次级液滴跟随 (follow-through)** (0.5 s onward). Each landing spawns four droplets delayed
  0.065–0.20 s (≈2–6 frames) after the main hit, launched on ballistic arcs with the direction
  of travel stretched into their capsules.
- **缓动前快后慢 cubic-bezier(0.22,1,0.36,1) / 液体只会被甩出去**. `EASE.swift` is that exact
  curve and drives every flung motion (strand flight, the flood front, the trailing edge, the
  reveal, each drip's fall). Gravity falls use `u^1.65`, landings use damped cosine bounces,
  and each letter's lock adds a `−16·e^(−5t)·sin(27t)` rebound. There is no linear motion
  anywhere except the sub-bass pulse grid.
- **有机曲线永不直线**. Every edge is either a smooth-min union of round primitives or a
  three-harmonic sine. The pool is seven overlapping droplets rather than a rectangle; the
  only straight-ish edge in the film is the underside of the shallow pool at the bottom, which
  is a resting puddle on a floor.
- **squash & stretch ≈10 %**. Drops are drawn as capsules whose half-length grows 58 px and
  whose radius shrinks 26 % with speed; on landing the pool flattens (radius −26 %, length
  +26 % for ~0.8 s via a damped cosine from each impact).

## Tech route
HTML + WebGL2 fragment shader (the suggested route, kept because it is the only way to get
real normal-lit 3D liquid read). One full-screen triangle evaluates a 2D signed-distance field
composed of the moving circles, capsules, the wavy flood slab, and **four distance channels of
the wordmark packed into a single RGBA32F texture** — one channel per letter, so the letters can
be eroded/offset independently (the sweep-reveal) while the field stays a single continuous smin
with no mask seams. Each channel is an exact Euclidean distance field
(Felzenszwalb–Huttenlocher) computed at load from a system-font raster, lightly blurred to kill
the transform's stair-stepping. Lighting is a dome profile from the field, finite-difference
normals, Blinn-Phong specular, fresnel rim, a moving low-frequency normal perturbation
(surface ripple / caustic life) and a travelling sheen band. A 2D overlay pass adds the
elliptical pool ripples, the Chinese tagline and coarse drifting film grain plus a vignette.
No third-party libraries; the page draws any `t` in closed form.

Numbers measured on this render:
- CPU cost of `renderAt` ~ 0.1 ms; **GPU-synchronised frame ~ 3.5 ms median, 5.6 ms p95**
  (one 91 ms first frame while the shader compiles) — far inside the 250 ms budget.
- Full capture path (CDP screenshot + PNG encode + x264) ~ 0.36 s/frame, i.e. the renderer,
  not the page, is the bottleneck.

## Check numbers
| spec | value |
|---|---|
| duration | 10.000 s (300 frames) |
| resolution | 1920 x 1080 |
| fps | 30 |
| video | H.264, yuv420p, 11.5 Mbps, 14.4 MB |
| audio | AAC 48 kHz stereo, 194 kbps |
| integrated loudness | -14.3 LUFS |
| true peak | -1.0 dBTP |
| black frames | 0 |
| frozen frames | 0 |
| console errors | 0 |
| dead spans (rhythm.mjs, 0.5 s) | none |
| calmest window | 0-0.53 s, 0.67 % of pixels moving (a drop is falling) |

## Honest top-3 weaknesses
1. **The letterforms are the least bespoke part.** They are a system rounded grotesque turned
   into a distance field, so the wordmark reads as a very good liquid treatment of a stock face
   rather than a purpose-drawn logo. A custom-drawn glyph set (or an OFL display face with more
   character) would raise the identity a full point.
2. **The full-flood window (~4.85-5.35 s) is the weakest half-second.** For a moment the screen
   is one flat field of liquid; the caustics, the ripple normals and the passing sheen keep it
   alive, but it is structurally emptier than the rest of the film, and the colour there skews
   violet rather than the full candy ramp.
3. **The very first 0.5 s is calm.** The hook is a single droplet falling over a small pool —
   correct for the story and above the dead-span threshold, but it is the lowest-energy window in
   the film; a bolder open (a bigger body of liquid already mid-motion) would grip harder.

Also worth stating plainly: the mix was checked numerically, not by ear. The cue sheet is
aligned frame-exactly and the levels are verified, but the balance between sub, impacts and bed
has not been auditioned.

## Self-score
| axis | score | note |
|---|---|---|
| style fidelity | 9 | every signature technique present and executed with real smooth-min fusion, strands and squash |
| concept wow | 8 | "the liquid drains off and leaves the wordmark" is the strongest idea in it; the open is the soft spot |
| motion craft | 9 | flung easing throughout, staggered follow-through, three-phase entrances, per-letter rebound, element-carried transitions |
| design & type | 8 | strong composition, controlled palette, correct CJK punctuation and safe margins; the face itself is stock |
| finish & texture | 8.5 | glow/vignette/grain all deliberate, no banding, no aliasing on thin strokes; gentle grain keeps bitrate at 11.5 Mbps |
| sound & sync | 8 | genre-correct and locked to the cue sheet, mastered to spec — but unheard by the author |
| technical | 9.5 | deterministic, console-clean, 3.5 ms/frame, exact spec, no dead spans, 11.5 Mbps |