Glow trail
Light pours from the pointer, drifts up and cools as it fades.
- enhancer
- cursor
- pointer
- trail
- light
- 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
Glow trail example
Move the pointer, or tap
Move the pointer, or tap
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-glow-trail" data-motion="glow-trail"><p>Move the pointer, or tap</p></div>import { GlowTrail } from "./motion/react/GlowTrail";
<GlowTrail>Your content</GlowTrail><script setup lang="ts">
import GlowTrail from "./motion/vue/GlowTrail.vue";
</script>
<template>
<GlowTrail>Your content</GlowTrail>
</template>const el = document.querySelector("#title");
el.dataset.motion = "glow-trail";The wrappers: GlowTrail.tsx (React, TypeScript) and GlowTrail.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-colors | #fff4dc,#f6a04d,#ff6b8b,#8a7dff | the cooling ramp, hot to cold |
data-motion-size | 26 | the glow's radius in pixels |
data-motion-life | 1200 | milliseconds a glow lives |
data-motion-rate | 1 | how much light a move pours |
data-motion-drift | 1 | how fast it rises (0 = floats in place) |
Accessibility
The real pointer is never hidden; the light only follows it. One canvas over the box, with frames only while light is in the air. On light pages the light is drawn as soft color instead of added light, and the white stop is dropped. Touch: a tap gives a burst. Reduced motion: no light. Decorative: hidden from screen readers.
Size
glow-trail.js is 2.2 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.