Glow Trail
A free cursor glow effect for React that drifts after the pointer.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Glow Trail is a free cursor glow effect for Next.js and React, styled with Tailwind, that wraps any section and lets a soft radial highlight drift after the pointer. The glow follows through GSAP quickTo with a configurable lag, so the light always settles a beat behind the cursor, and it fades in when the pointer enters the section and out when it leaves.
The layer sits underneath your content with its opacity capped at 0.5, so headings and body text keep AA contrast even at the brightest point of the glow. It is purely decorative: aria-hidden, pointer-events none, the operating system cursor is never hidden, and on touch devices or under reduced motion no listeners attach and the section renders as a plain wrapper.
Light follows wherever you read
Move your pointer across this section and a soft glow drifts after it, always settling a beat behind. The highlight sits underneath the text, so everything here stays readable while the light passes below it.
On touch screens and under reduced motion the glow never appears and this section behaves like a plain wrapper.
Customise
Component settings update the preview and generated code together.
Appearance
Motion
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/cursor-glow-trailUsage
import { CursorGlowTrail } from "@/components/cursor-glow-trail";
export default function Page() {
return (
<CursorGlowTrail
size={320}
lag={0.5}
className="rounded-xl border border-border"
>
<section className="space-y-4 p-10">
<h2 className="text-2xl font-semibold">Read under the light</h2>
<p>The glow drifts behind the pointer while you read.</p>
<a href="/pricing" className="underline underline-offset-4">
See pricing
</a>
</section>
</CursorGlowTrail>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Section content the glow plays under. |
| size | number | 320 | Glow diameter in px. |
| lag | number | 0.5 | Follow duration in seconds. |
| className | string | undefined | Merged onto the section wrapper. |
Customisation
Two Tier 3 CSS variables control the light itself: --cursor-glow-color sets the gradient colour and defaults to the accent token, and --cursor-glow-blur sets the blur radius. Override them on :root or any ancestor to retheme without touching the component. Use the size prop for the diameter and lag for how far the glow trails behind.
:root {
--cursor-glow-color: var(--color-brand-400);
--cursor-glow-blur: 64px;
}Frequently asked questions
- Is Glow Trail free for commercial use?
- Yes. Glow Trail is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Glow Trail accessible and performant?
- Yes. The glow layer is aria-hidden and pointer-events none, its opacity is capped at 0.5 so text above it keeps AA contrast, and the operating system cursor is never hidden. Movement is transform-only through two persistent GSAP quickTo tweens with no React re-renders, and on touch devices or under reduced motion no listeners attach at all.
- How do I customise the Glow Trail?
- Use the size prop for the glow diameter and lag for the follow duration in seconds: higher values drift further behind the pointer. The colour and softness come from the --cursor-glow-color and --cursor-glow-blur CSS variables, which default to the accent token and 40px.