Backgrounds & Gradients

Family B of the motion-graphics super-skill. Drop-in building blocks live in the shared library — from any skill in this plugin: ../motion-graphics/assets/motion.css + motion.js. Every effect scales by --R and is driven by logical time t, so it survives slow-clock capture (see smooth-render).

<link rel="stylesheet" href="../motion-graphics/assets/motion.css">
<script src="../motion-graphics/assets/motion.js"></script>

Moves

Rules that make these render-safe

• Never filter:blur() / backdrop-filter:blur() — headless Chromium/Edge software-rasterizes them and capture drops to ~5 fps. Softness is faked with radial-gradient falloff / translucent fills / directional text-shadow smears.
• Drive every time-based helper by your render clock's logical time t, never wall-clock.

Colour flow track + smooth fields

Family B's other moves change palette per scene — the gradient is one colour, then it is another. That works, but every change is a cut you can see. The alternative is to make the colour a continuous function of time and let the frame arrive at each chapter's colour before the chapter does.

The track. Author a piecewise-linear colour walk C(t) through [time, colour] pairs placed at the chapter midpoints, not at the boundaries — so each chapter is fully its own colour in the middle and is already becoming the next one at its end:

const TRACK = [[0,'#c4b5fd'],[46,'#a5c8ff'],[75,'#3b7bf0'],[98,'#c24fc0'],
               [117,'#e06ab8'],[158,'#8c57ff'],[192,'#2bb39a'],[206,'#c4b5fd']];
// C(t): find the pair after t, lerp the two colours per sRGB channel by the position between them

Three fields, one track — lead / current / lag. Do not paint the whole background C(t): that is still one colour, just smoothly changing, and it reads as a wash of nothing. Give the frame three soft fields and offset their sampling:

Drift each on its own long period (47/53/59 s on x, 61/67/71 s on y) so they never beat against each other. The change then reads as weather, not as a transition.

Falloff and blur — the rule that decides whether it looks expensive. A field built as a solid plateau with a hard stop (colour 0 55%, transparent 60%) plus a small blur looks like a patch: you can see exactly where it ends, and more blur only softens the seam. A field with a small solid core and a long falloff — radial-gradient(closest-side, c 0%, c 14%, transparent 76%) — reads as a wash even with no blur at all. Fix the falloff first; treat blur as the last 5 %, and remember it is software-rasterized in headless capture (see the blur rule above). If you do use it, go big (110–140 px at 2K) rather than tightening the gradient.

Ground options.

• Light: a pale lavender mist (#ece8f6) rather than white — pure white reads as an unfinished page, and the fields have nothing to sit on.
• Dark: a near-black brand ground (#07050f) plus a hero glow. Mid-saturation track colours go grey on black, so pull every field toward a deep violet (≈55 %) before painting it, and lighten the accent glows toward white (≈30 %) so they read as light sources rather than paint.

Strength. Treat the colour's share of the frame as a dial, not a constant: a 12 %-toward-white tint at the low end, pure colour at full opacity in the middle, and at the top a 25 % wider field with the gentle core above — bold enough that type sits on the colour rather than near it.

Implementation

The code for all of it — C(t), the three fields, light/dark grounds and the strength levels — is the mark-driven-ground skill (../mark-driven-ground/assets/ground.js, GROUND.colorAt(t)), which also couples the ground to an element travelling through the frame: rings along its flight path, a lit arc behind it, and a glow where it lands.

See also

The full menu across all 8 families (A–H, ~56 moves) is the motion-graphics master skill and its PLATTER.md. Ask for "the platter" to get the whole menu.