#305
Shine sweep
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.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Shine sweep" pattern (@codeatlasdev/ui demo #305, motion/text) in my app.
Call get_demo({ ids: ["#305"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Hero and pricing headlines, a highlighted keyword, a premium badge or a loading title that needs a single glint of attention.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage from "@codeatlasdev/ui"
Behaviour to keep:
- `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 `<button` with `onpointermove={onMove}` and `onkeydown={onKey}` that steer `--x`, the manual takeover (`.shine__title--manual` reads `background-position: var(--x) 0`)
- `@media (forced-colors: active)` falls back to `color: CanvasText`, so the heading stays readable
Exact motion (do not approximate):
- background-position (a light band across text-clipped gradient): 2200ms, cubic-bezier(0.4, 0, 0.2, 1)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `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 `<button` with `onpointermove={onMove}` and `onkeydown={onKey}` that steer `--x`, the manual takeover (`.shine__title--manual` reads `background-position: var(--x) 0`)
- `@media (forced-colors: active)` falls back to `color: CanvasText`, so the heading stays readable
Related
Loading source.