Glare sweep
A glossy streak of light sweeps across in the direction the pointer moves.
- enhancer
- hover
- pointer
- shine
- card
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Glare sweep example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<div class="m-glare-sweep" data-motion="glare-sweep"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b2a6b'/%3E%3Cstop offset='.55' stop-color='%23ff6b8b'/%3E%3Cstop offset='1' stop-color='%23ffb36b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='300' height='400' fill='url%28%23a%29'/%3E%3Ccircle cx='190' cy='238' r='44' fill='%23ffe2b0'/%3E%3Cpath d='M0 290 Q70 240 140 285 T300 270 V400 H0Z' fill='%238a3b6e'/%3E%3Cpath d='M0 330 Q90 290 170 330 T300 320 V400 H0Z' fill='%234a2152'/%3E%3Cpath d='M0 365 Q120 340 300 372 V400 H0Z' fill='%2324122e'/%3E%3C/svg%3E" alt="Evening hills under a low sun"></div>import { GlareSweep } from "./motion/react/GlareSweep";
<GlareSweep>Your content</GlareSweep><script setup lang="ts">
import GlareSweep from "./motion/vue/GlareSweep.vue";
</script>
<template>
<GlareSweep>Your content</GlareSweep>
</template>const el = document.querySelector("#title");
el.dataset.motion = "glare-sweep";The wrappers: GlareSweep.tsx (React, TypeScript) and GlareSweep.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-color | #ffffff | the streak's color |
data-motion-opacity | 0.6 | how strong the streak is, 0 to 1 |
data-motion-width | 22 | the streak's width, in percent of the element's diagonal |
data-motion-duration | 850 | milliseconds per sweep |
data-motion-back | true | sweep again, outward, when the pointer leaves |
Accessibility
The streak lives in its own clipped layer over the element and moves with a transform only, so nothing shifts. A keyboard focus ring on the element (or inside it) gets a sweep too; a tap sweeps once. Reduced motion: no streak at all. Decorative: the layer is hidden from screen readers.
Size
glare-sweep.js is 1.3 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.