Vance IngallsandClaude Sonnet 5.5
23e7a384b6
* feat(registry): echo-smear engine and math tests Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * feat(registry): echo-smear demo Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * feat(registry): register echo-smear Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear copies inherit visibility and record fast Final review fixes. Copies were forced visible and escaped a hidden scene. A selector matching earlier copies re-targeted them, and copies kept data-start and data-duration. A later attach re-drew every earlier copy at each recording sample. Tests now run the engine through a fake gsap and timeline, and catch five seam mutations. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear skips targets that are not out of flow Found testing on real blocks: transitions-push and blue-sweater animate static elements. Their copies stacked in normal flow and pushed the scene 64800px down, rendering black. The snippet now warns and skips a target that is not absolute or fixed. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear group keeps the target's z-index The wrapper group formed a new stacking context at z-index auto, so a target that sat above a sibling dropped below it (the cursor went under the card). Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear copies live in a sibling group, like motion-blur The target is no longer wrapped, so it keeps its parent, blend mode and pointer events. Static targets smear in place; the group mirrors the target's visibility and z-index. Copies carry resolved styles, media inside is inert, and an element is attached once. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear records resolved transforms and leaves callbacks alone Poses come from the resolved transform and opacity, so xPercent and any other transform survive. Travel is measured on the element's own box, so ancestor-only motion draws no copies. The recording sweep is quiet unless callbacks: true, survives a missing root, and releases its flag. Copies share one style rule per target and are built to the peak count. The demo is pinned to the snippet by a test. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear copies follow the box, root and look of their target Copies hidden at a box change never caught up, so a static target drew at the corner. A shadow-root target threw on every seek; its rules now live in its own root. Copies show the recorded filter, clip-path and individual transform properties. No ResizeObserver, so a frame no longer depends on the first frame a worker drew. Parent perspective, border-box sizing, media children and SVG children are handled. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * test(registry): echo-smear leaves real GSAP callbacks unfired at attach Covers the blocker from review: a call or onComplete on the timeline fired during attach. Runs against real GSAP 3.15 with a removal callback; it fails if the sweep seeks with events on. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear frames do not depend on the seek path Group visibility and the copies' box are recorded in the sweep, not read live in the update. A backward seek renders the update before the target, so the live read was stale. Individual translate, rotate and scale are folded into the measured transform. An element named twice in one call is attached once. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> * fix(registry): echo-smear resolves a percentage translate against the box A computed translate of 150% was read as 150px, so count and copy placement were wrong. Percentages are now a share of the element's own width and height; a scale percentage is a factor. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
echo-smear
A streak that follows speed. As an element moves faster, more time-offset copies of it trail behind; when it slows below a threshold they vanish. It is After Effects' Echo effect (Maximum operator) with the copy count and spacing driven by the element's own motion, so you animate the element and the smear follows without keyframes of its own.
attachEchoSmear(targets, timeline, options) records each target's real trajectory (position, rotation,
scale, opacity) once, with a forward sweep of the timeline, then draws the copies from that record. The
frame at time t is the same however you reach it: seeking, scrubbing and parallel render workers agree.
Mounting
Paste echo-smear.html into the composition, define every tween, then attach before registering the
timeline:
attachEchoSmear(".card", tl, { length: 100, threshold: 40 });
Targets are anything GSAP moves with a transform (not an element inside an <svg>; attach to the
<svg>). The header comment in the snippet documents every option and the limits.
Demo
demo.html shows a logo skimming under a word and kicking each letter up, then spiralling away. Letters
and logo both smear, and the spiral shows the streak following a curve.