← ClaudeAtlas

travelling-marklisted

Make one brand mark (logo, dot, glyph) TRAVEL through a film as a single rigid object: it lifts off the product's sidebar logo on a hard cut, flies into a title card on a named path (zip, drop, spiral, hops, orbit), lands beside the heading, rides the typed line as a cursor, breathes on the hold, and leaves along an exit (inflate, roll, dive) that also opens the next dashboard around the logo slot. Also covers the opening "round" (one arc-length-parametrised orbit into the sidebar) and the closing "mark as a hole" reveal. Use when a logo should carry the viewer from chapter to chapter, when a reference reel has a spark/dot that leads every cut, or when a client says the logo must never stretch, squash, split or morph while it moves. Triggers: "the logo travels between scenes", "logo flies into the title", "dot that jumps from card to card", "logo lands next to the heading", "logo becomes the cursor", "make the logo leave into the dashboard", "logo must stay rigid", "the plus/mark path", "logo hole reveal at t
JagZ999/explainer-video · ★ 2 · Web & Frontend · score 73
Install: claude install-skill JagZ999/explainer-video
# Travelling Mark One rigid mark carries the whole film. Every chapter opens the same way: the previous dashboard is still on screen, the mark **lifts off its sidebar logo** (measured live, so it starts exactly where the logo sits), **flies** a named path into a title card, **lands** at a fixed point beside the heading, the heading appears out of that point, the mark **holds** with a slow breath, and on the cut it **leaves** along an exit path straight into the logo slot of the next dashboard, which opens around it. Nothing on the mark ever changes shape; only its position, uniform size and, on one exit, its rotation. Drop-in maths in `assets/mark.js`; a standalone run in `assets/demo.html`. Pairs with **mark-driven-ground** (the background draws the same path as rings and lights the arc behind the mark) and **walkthrough-film** (the timing / render pipeline it lives in). ## The one hard rule **The mark is rigid.** The container is placed by `left/top/width/height` (always square) and may carry one whole-mark transform: uniform `scale()` and/or `rotate()`. The image inside is never transformed. No stretch on the streak, no squash on landing, no dot-morph, no petal split, no "pieces" entrance. Clients notice every one of those, and they read as cheap. If a path needs emphasis, use speed, arc height or a landing ring pulse (a separate element), never deformation. ## Anatomy of one chapter (times are scene-local, title cards are 2.4–3.2 s) | beat | when | what | |---|---|---