Glow Trail
A free cursor glow effect for React that drifts after the pointer.
Everything on the shelf was blown in one shift
The furnace holds 1,140°C from Tuesday to Saturday, and a piece has about four minutes between the bench and the annealer. Nothing here is cast, and nothing is finished the following day.
Seconds go out on Saturday mornings at half price: usually a bubble in the wrong place, occasionally a colour that misbehaved in the reheat.
Customise
Code
<CursorGlowTrail>
{/* your content */}
</CursorGlowTrail>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 on an eased curve 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.
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, written once per frame with no React re-renders, and nothing runs once the glow settles; 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.