Components (13)

Background Gradient Cursor

NewMotion

Interactive ambient canvas surface featuring cursor-tracking radial mask, procedural dots, dynamic grid lines, and directional linear gradients.

$ pnpm dlx shadcn@latest add @byphongphan/background-gradient-cursor

Requires @byphongphan in components.json

background

background-gradient-cursor.tsx

Move your cursor across this surface

The radial mask tracks your cursor in real time with hardware-accelerated requestAnimationFrame easing, unveiling procedural grid layers and multi-stop directional gradients.

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/background-gradient-cursor

Requires @byphongphan in components.json

Anatomy

BackgroundGradientCursor (Relative/Absolute/Fixed canvas wrapper)├── <div (gradient)> (Directional linear background gradient with tilt)├── <div (lines)> (Repeating 45° angled architectural hatching lines)├── <div (grid)> (Procedural coordinate grid layout with customizable size)├── <div (dots)> (Radial dot matrix pattern with variable opacity)├── <div (mask)> (High-performance cursor-following radial spotlight mask)└── {children} (Optional overlaying content, badges, or interactive cards)

Usage

import { BackgroundGradientCursor } from "@/components/background-gradient-cursor"

export function HeroBackground() {  return (    <div className="relative min-h-[400px] w-full overflow-hidden rounded-xl border border-border bg-neutral-950 p-6">      <BackgroundGradientCursor        position="absolute"        gradient={{          display: true,          tilt: 135,          colorStart: "emerald-500",          colorEnd: "transparent",          opacity: 25,        }}        grid={{          display: true,          width: "32px",          height: "32px",          color: "white/10",        }}        dots={{          display: true,          size: 1.5,          color: "white",        }}        mask={{          cursor: true,          radius: 160,          color: "rgba(16, 185, 129, 0.4)",        }}      />      <div className="relative z-10">        <h3>Interactive Canvas Content</h3>      </div>    </div>  )}

Features

Hardware-Accelerated Cursor Tracking: Leverages requestAnimationFrame with exponential smoothing (easingFactor: 0.1) to ensure buttery smooth, lag-free cursor tracking without layout thrashing.
Layered Visual Stacking: Five independent, composable layers—linear gradient, diagonal lines, coordinate grid, dot matrix, and radial mask—can be toggled and configured individually.
Universal Color Token Support: Accepts standard CSS variable names (e.g. primary, emerald-500), direct variables (var(--...)), hex codes (#10b981), and modern color formats (oklch(...)).
Zero Heavy Runtime Dependencies: Pure React 19 implementation using native CSS gradients and transforms, requiring no external 3D or animation libraries.
Viewport & Element Boundary Awareness: Automatically switches between fixed full-page tracking and scoped container boundary tracking, cleanly hiding the spotlight when the cursor exits the element.

Examples

Cyberpunk Neon Grid

High-frequency cyan grid lines paired with a dual-tone cyan and fuchsia radial gradient mask.

background-gradient-cursor-cyberpunk.tsx

CYBERPUNK NEON

Neural Mesh Interface

Custom multi-stop radial gradient with dual-tone cyan & fuchsia projection tracking the pointer.

Technical Blueprint Matrix

Precision engineering aesthetic with 24px azure coordinate grid lines and high-contrast dot intersections.

background-gradient-cursor-blueprint.tsx

TECHNICAL BLUEPRINT

Precision Grid Matrix

Fine-pitched 24px grid layout paired with high-contrast dot intersections illuminated by a focused azure spotlight.

Warm Amber Spotlight

Soft golden radial spotlight with fine amber dot accents tailored for dark card surfaces.

background-gradient-cursor-card-spotlight.tsx

AMBER SPOTLIGHT

Warm Surface Reveal

Soft golden radial glow with fine amber dot accents that smoothly tracks the viewer without visual noise.

API Reference