Aurora Trail
A luminous cursor trail that stretches into flowing ribbons and settles into a soft orb, with automatic drift and customizable glow.
Overview
About the Aurora Trail
A luminous cursor trail that stretches into flowing ribbons and settles into a soft orb, with automatic drift and customizable glow. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component uses inline styles and the browser Canvas API. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Atmospheric portfolio and creative landing page backgrounds.
- Interactive hero sections with a soft pointer-driven light effect.
What’s included
Files in the product ZIP
Aurora Trail source
components/aurora-trail.tsxEditable React and TypeScript component source.
Working example
examples/example.tsxA minimal import and render example that matches the packaged API.
Installation guide
README.mdManual ZIP installation, styling, compatibility, asset, and usage notes.
Usage
Import and render
Copy the packaged source to the documented path, then use the public API shown below.
import { AuroraTrail } from "@/components/aurora-trail";<AuroraTrail height={480} color="#7864ff" size={70} trail={0.65}>
<h1>Leave a little light.</h1>
</AuroraTrail>Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7864ff" | CSS glow color. |
| backgroundColor | string | "#08080e" | Container background; transparent is supported. |
| size | number | 70 | Glow radius in CSS pixels, clamped to 16–180. |
| trail | number | 0.65 | Trail persistence, clamped to 0.1–2. |
| intensity | number | 1 | Glow brightness, clamped to 0.1–2. |
| speed | number | 1 | Automatic drift speed, clamped to 0–3. |
| opacity | number | 1 | Overall glow opacity, clamped to 0–1. |
| mode | "auto" | "pointer" | "auto" | Auto drifts when the pointer leaves; pointer mode holds the last position. |
| paused | boolean | false | Stop continuous animation. |
| height | number | string | 480 | Container height; numbers are CSS pixels. |
| children | ReactNode | — | Content layered above the decorative canvas. |
| className / style | string / CSSProperties | — | Optional container styling. |
The effect stays within its container and preserves native scrolling and child interactions. Reduced motion renders a static glow; animation pauses offscreen and in hidden tabs.
Compatibility
Verified project setup
- ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
- This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
- Tailwind CSS is not required; the component uses inline styles and the browser Canvas API.
- Images
- No image files are included or required by the packaged component.
- Fonts
- No font files are included. The component uses system font fallbacks unless your app supplies a matching font.
Installation
Add it to your project
Download the Aurora Trail ZIP, place the source file at src/components/aurora-trail.tsx, and copy the example into your own page or feature folder.
Target path
src/components/aurora-trail.tsxNo additional npm runtime packages are required beyond the React host; follow the styling requirements below.
Styling requirements
- No additional npm dependencies are required.
- Provide a container height; pointer interactions stay local to the component.
- Reduced motion shows a static glow. Offscreen and hidden-page animation is paused.