Element: #305 Shine sweep (motion/text) What it shows: A heading painted with a brand gradient and a light band that sweeps across it in 2200ms. Once you move the pointer or press arrow keys the band follows you. When to use: Hero and pricing headlines, a highlighted keyword, a premium badge or a loading title that needs a single glint of attention. Spec: - `MotionStage` from `@codeatlasdev/ui` with `label="Shine sweep: a highlight glides across a gradient heading"` and `loop={3200}` - `background-size: 250% 100%` with `background-clip: text` makes the gradient show through the letters - `animation: shine-sweep 2200ms cubic-bezier(0.4, 0, 0.2, 1) both` on the heading while `m.playing && !m.reduced` - Keyframes: `from { background-position: 100% 0; }` to `to { background-position: 0% 0; }` - The heading holds a real ` import { MotionStage } from '@codeatlasdev/ui'; // Takeover: the pointer (or arrow keys on the focused heading) steers the highlight, 0-100%. let x = $state(50); function onMove(e: PointerEvent) { const r = (e.currentTarget as HTMLElement).getBoundingClientRect(); x = Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100)); } function onKey(e: KeyboardEvent) { if (e.key === 'ArrowRight') x = Math.min(100, x + 10); else if (e.key === 'ArrowLeft') x = Math.max(0, x - 10); } {#snippet children(m)}

Move the pointer, or focus the heading and use the arrow keys.

{/snippet}