Components
Fox Cursor
Geometric fox face cursor. Customizable color, size, stroke width, glow, and fill opacity.
npx neonblade add fox-cursorInteractive Preview — move mouse inside the box
Move cursor here
cyan
Color Variants
Cyan
Pink
Green
Size Variants
Small (36px)
Default (64px)
Large (96px)
Glow Intensity
none
low
medium
high
Fill Opacity
No fill
Subtle fill
Full fill
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
color | "cyan" | "pink" | "green" | string | "cyan" | Stroke color of the fox face. Use a preset name or any CSS color value (e.g. "#ff4400"). |
size | number | 64 | Overall pixel size of the fox face SVG (width and height). |
strokeWidth | number | 2 | Stroke thickness of the fox face lines in SVG units. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon drop-shadow glow intensity around the fox face. |
fillOpacity | number | 0 | Opacity of the translucent fill inside the face and nose shapes (0 = outline only, 1 = full fill). |
hideNativeCursor | boolean | true | When true, hides the native OS cursor while the component is mounted. |
disabled | boolean | false | Completely disables the custom cursor and renders nothing. |
containerRef | React.RefObject<HTMLElement | null> | undefined | When provided, scopes the cursor to that element (absolute positioning, hides on mouse leave). The container must have position: relative and overflow: hidden. |