Cursor Animation
CursorAnimation enhances pointer interactions over designated containers with customizable animations, seamless dark mode support, and fluid responsive physics for all devices.Image Trail Cursor
- Use
variant"image-trail" - to spawn interactive image cards dynamically centered on pointer movement.
color- themes every variant — a named key (
primary,indigo,rose,emerald,zinc) or a hex string.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Cursor Animation
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Nothing beyond the shared setup — Cursor Animation needs only the cn helper and lucide-react, which the installation guide already put in place.
Examples
Glow Cursor
- Use
variant"glow" - for a blurred background glow that trails the pointer on smooth physics. It is the default.
Magnetic Target Cursor
- Use
variant"magnetic" - for a dashed target ring that rotates as the pointer moves.
Particle Trail Cursor
- Use
variant"trail" - for a trail of particles that fade out behind the cursor.
trailCount{6}- sets how many particles trail — only read by this variant.
Badge Label Cursor
- Use
variant"badge" - to float a pill label beside the pointer.
label"View Project"- is the pill text, defaulting to
Explore. Only read by this variant.
Spotlight Mask Cursor
- Use
variant"spotlight" - to mask the area in a radial spotlight, darkening everything the cursor is not on.
Expand Scaling Cursor
- Use
variant"expand" - for an inverted backdrop circle that scales up on hover and click.
Precision Crosshair Cursor
- Use
variant"crosshair" - to draw full-width and full-height guide lines through the pointer.
Smooth Ring Cursor
- Use
variant"ring" - for a minimal lerped ring that contracts on click.
Radial Pulse Cursor
- Use
variant"pulse" - for a radial aura that pulses around the pointer.
Sonar Wave Cursor
- Use
variant"sonar" - for two concentric rings sweeping outward in sync with movement.
Features
CursorAnimation block:10 Distinct Variants
Choose from glow, magnetic, particle trail, badge label, spotlight, crosshair, and 4 other fluid styles.
Fluid Physics & Lerp
Smooth linear interpolation (LERP) physics ensures natural inertia and responsive cursor tracking.
100% Full-Width Responsive
Adapts seamlessly to container boundaries across desktop, tablet, and mobile screens without breaking overflow.
Dark Mode Native
Pre-configured with zinc dark mode palettes matching site design tokens and contrast guidelines.
Best Practices & Guidelines
Usage Guidelines
Use CursorAnimation to highlight hero sections, portfolio cards, interactive canvas areas, or custom action areas. Ensure pointer-events are set correctly when layering over interactive text or buttons.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "glow" | "magnetic" | "trail" | "badge" | "spotlight" | "expand" | "crosshair" | "ring" | "pulse" | "sonar" | "glow" | Selects the active cursor animation style and interaction physics. |
label | string | "Explore" | Text displayed inside the floating badge pill when variant="badge". |
color | CursorColor | string | "primary" | Applies dynamic theme color palettes ("primary" | "indigo" | "rose" | "emerald" | "zinc" or custom hex). |
trailCount | number | 6 | Number of trailing particles rendered when variant="trail". |
className | string | "" | Custom Tailwind CSS classes applied to the root container. |
children | React.ReactNode | undefined | Custom interactive element content rendered inside the cursor hover zone. |