Components
Crosshair
Animated crosshair cursor with two counter-rotating partial rings and a center crosshair. Fully customizable colors, sizes, ring thickness, arc gap, speed, and glow.
npx neonblade add crosshairInteractive Preview — move mouse inside the box
Move cursor here
cyan
Color Variants
Cyan
Pink
Green
Size Variants
Small
Default
Large
Arc Gap
10% gap
30% gap (default)
50% gap
Glow Intensity
none
low
medium
high
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
color | "cyan" | "pink" | "green" | string | "cyan" | Ring and crosshair accent color. Use a preset name or any CSS color value (e.g. "#ff4400"). |
outerSize | number | 44 | Outer ring diameter in pixels. |
innerSize | number | 26 | Inner ring diameter in pixels. |
outerThickness | number | 2 | Outer ring stroke thickness in pixels. |
innerThickness | number | 1.5 | Inner ring stroke thickness in pixels. |
arcGap | number | 0.3 | Fraction of each ring that is invisible (the gap). 0 = full circle, 0.3 = 70% arc, 0.5 = semicircle. |
outerSpeed | number | 3 | Outer ring rotation period in seconds per full revolution. Smaller = faster. |
innerSpeed | number | 2 | Inner ring rotation period in seconds per full revolution. Smaller = faster. |
crosshairSize | number | 7 | Length of each crosshair arm in pixels. |
crosshairGap | number | 3 | Gap between the crosshair center and the start of each arm in pixels. |
crosshairThickness | number | 1 | Crosshair line stroke thickness in pixels. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon glow intensity (drop-shadow) around the rings and crosshair. |
hideNativeCursor | boolean | true | When true, hides the native OS cursor while the component is mounted (sets body cursor: none). |
disabled | boolean | false | Completely disables the custom cursor and renders nothing. |