Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-drift/llms.txt

Use this file to discover all available pages before exploring further.

CursorGlow overlays a soft, circular turquoise bloom that trails the mouse cursor across the page. It uses Framer Motion useMotionValue and useSpring to animate position so the glow lags behind slightly and eases to a stop rather than jumping to the exact cursor coordinate — creating an organic, liquid feel that complements the aurora background. The component is entirely self-contained: it registers and cleans up its own event listeners, and it silently renders nothing on touch and stylus devices where a cursor glow would be meaningless.

​
Usage

Place CursorGlow once at the root of your application, alongside AuroraBackground. Both components are fixed and do not affect document flow. 
// src/main.jsx  (or App.jsx)
import { AuroraBackground } from './components/AuroraBackground'
import { CursorGlow }       from './components/CursorGlow'

export default function App() {
  return (
    <>
      <AuroraBackground />
      <CursorGlow />          {/* ← add here, after AuroraBackground */}

      <RouterOutlet />
    </>
  )
}
CursorGlow checks window.matchMedia('(pointer: fine)') on mount. On touch screens and most stylus devices this media query returns false, so the component returns null immediately — no DOM node, no event listeners, no overhead.

​
Props

CursorGlow accepts no props. All visual and physics values are internal constants.

​
How it works

1

Pointer-fine gate

Inside useEffect, the component evaluates window.matchMedia('(pointer: fine)').matches. Only when this returns true does it set internal visible state to true and begin rendering the glow element.
2

Motion values initialised off-screen

Two useMotionValue instances, x and y, are created with an initial value of -100. This ensures the glow starts off the visible viewport so there is no flash on the first frame.
3

Spring wrapping

Both motion values are passed through useSpring with the configuration shown below. The spring outputs are bound to the element’s x and y style properties, providing the characteristic lag and ease-out as the cursor decelerates.
4

Cursor tracking

A mousemove listener on window calls x.set(clientX - 150) and y.set(clientY - 150). Subtracting 150 (half the 300 px element width/height) centres the circle precisely over the cursor hotspot.
5

Show / hide on document boundary

A mouseleave listener on document sets visible to false, removing the element from the DOM. A mouseenter listener restores it. This prevents a stale glow hanging in a corner when the cursor moves outside the browser window.

​
Spring configuration

ParameterValueEffect
damping25Controls resistance — lower = more oscillation
stiffness200Controls speed — higher = snappier follow
mass0.5Lighter mass amplifies stiffness; snappier than default
To make the glow feel heavier and more fluid, increase damping to 40–60 and lower stiffness to 100–150. For a near-instant magnetic snap, raise stiffness above 400 and set damping to 60+. Compare with AuroraBackground, which uses damping: 50, stiffness: 400 for a tighter parallax.

​
Visual specification

PropertyValue
Size300 × 300 px
Shapeborder-radius: 9999px (rounded-full)
z-index50 (z-50)
Blend modemix-blend-screen
Backgroundradial-gradient(circle, rgba(45,212,191,0.15) 0%, rgba(45,212,191,0) 70%)
Pointer eventsNone (pointer-events-none)
Positionfixed top-0 left-0; translated by spring x / y
The radial gradient starts at 15 % opacity at the centre and reaches full transparency by 70 % of the radius, producing a diffuse bloom rather than a hard disc.

​
Customisation

Edit the two rgba(45,212,191,...) values in the inline background style. 45,212,191 is the RGB triplet for Aurora Drift’s turquoise (#2DD4BF). Swap in any RGB colour to shift the tint.
Change the Tailwind classes w-[300px] h-[300px] and update the mouse offset in both set calls from clientX - 150 to clientX - (newSize / 2). The gradient’s 70% stop can also be tightened to 40% for a more focused hotspot.
Remove the window.matchMedia('(pointer: fine)').matches guard and set visible to true unconditionally in useEffect if you want the glow on coarse-pointer (touch) devices too.

Build docs developers (and LLMs) love

Get started for freeTalk to us