mark-driven-groundlisted

A background that is built AROUND the element travelling through the frame — a logo, a dot, a cursor. Per-beat path rings centred on the landing point, the flight path drawn on the ground, a lit arc that follows the mark and collapses into the landing, a wide soft glow that blooms where it lands and settles for the rest of the chapter, and a colour TRACK that walks the whole frame from one chapter's colour to the next. Use when a background feels decorative rather than connected to the motion, when each section needs its own colour without a visible cut, or when a reference reel has a spark/dot that the background reacts to. Triggers: "background that follows the logo", "rings the dot travels along", "glow where it lands", "colour changes per chapter", "smooth flowing colour fields", "make the background react to the travelling element", "the background should know where the mark is", "spark-driven background".
JagZ999/explainer-video · ★ 2 · Web & Frontend · score 73

Install: claude install-skill JagZ999/explainer-video

# Mark-Driven Ground Family **B** of the **motion-graphics** super-skill, but a different idea from the rest of it: the other background moves are *ambient* — they drift whether or not anything else happens. This one is **coupled to a travelling element**. Everything on the ground is derived from where the mark starts, where it lands, and when. The result is that a title card stops being "text on a gradient" and becomes one event: a mark flies in, the ground draws the route it took, the light follows it, and where it stops the whole frame takes that section's colour and keeps it until the next mark lifts off. Drop-in: `assets/ground.js` + `assets/ground.css`. Standalone demo: `assets/demo.html` (open it directly, `file://` is fine; `?t=2.1`, `?theme=dark`). ```html <link rel="stylesheet" href="assets/ground.css"> <script src="assets/ground.js"></script> <script> GROUND.init({ stage: document.querySelector('#stage'), // the ground is inserted as its first child w: 2560, h: 1440, // the design space; all coordinates are px in this grid theme: 'light', // 'light' | 'dark' track: [[0,'#c4b5fd'],[46,'#a5c8ff'],[75,'#3b7bf0'],[117,'#e06ab8'],[158,'#8c57ff']], marks: { one: {S:{x:318,y:274}, LP:{x:557,y:764}, acc:'#3b7bf0', path:'zip', t0:46.2, dur:2.4, end:74.8}, two: {S:{x:318,y:274}, LP:{x:555,y:765}, acc:'#c24fc0', path:'drop', t0:74.8, dur:2.4, end:98.1} } }); </script> ``` Then, once per frame, fr