Thanks sweep

When to use

Use when a closing line should arrive as one gesture, not a fade. A soft mask edge crosses the line left to right and an accent bar rides that edge; a second, smaller line follows 140 ms behind on the same sweep. The bar leaves the moment the edge passes the last letter, and a slow linear drift carries the finished lines to the last frame. Clip: thanks-sweep.mp4. Demo: demo/thanks-sweep.html.

Use once per film: the accent bar is a stock device (rule no-tells), never the idea.

The code

<div class="sweep big"><span class="t">Thanks for watching.</span><i class="bar"></i></div>
<style>
@property --p { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.sweep { position: relative; --p: 0%; }
.sweep .t { display: block; white-space: nowrap;
  mask-image: linear-gradient(90deg, #000 calc(var(--p) - 9%), transparent var(--p)); }
.bar { position: absolute; top: 8%; bottom: 8%; left: var(--p); width: 0.9vh; margin-left: -0.45vh; border-radius: 1vh; background: var(--accent); }
</style>
<script type="module">
import { EASE } from '../../core/motion/presets.js';
sweep.animate([{ '--p': '0%' }, { '--p': '112%' }], { duration: 950, easing: EASE.land, fill: 'both' });
bar.animate([{ opacity: 1 }, { opacity: 1, offset: 0.3 }, { opacity: 0, offset: 0.42 }, { opacity: 0 }], { duration: 950, easing: 'linear', fill: 'both' });
drift.animate([{ translate: '0 0' }, { translate: '-2.4vw 0' }], { duration: 1800, easing: EASE.glide, fill: 'both' });
</script>

Easing and timing

The clip runs 1.8 s. The look is paper.

The clip uses 2 named eases from core/motion/presets.js. Each is a pair of After Effects handles: influence is how far along the segment the handle reaches, and speed is how fast the value moves at the key, as a multiple of the segment's average speed. Motion in the docs explains both.

Notes

The mask edge and the bar read the same --p, so the bar is on the edge in every frame. The edge is a 9 percent gradient, not a hard clip, so no letter is sliced. The bar fades at offset 0.3 to 0.42 because the exponential curve reaches the end of the text at about a third of the time; a bar left at the end points at nothing (taste rule 4). The last keyframe needs its own opacity: 0; without it the browser adds an implicit end frame that brings the bar back. Put the bar on one line only: two bars are two focal points.

Looks (ground, type, radius, accent) live in demo/demo.css; this snippet keeps neutral tokens.

Sound

Sound: bloom at 0.00 s into the move, as the mask edge starts across the line (default gain).