Star Cursor ⭐
Star Cursor ⭐ is a cursor effect in the UI HUB cursor effects collection. An ultra-premium cosmic star cursor rendered on a Canvas 2D layer. Features an 8-point glowing white star with long light rays, a pulsing bloom aura, and a particle system that spawns shooting-star trails on movement and a 24-particle radial burst on click. Expands and intensifies on hovering interactive elements.
The component is driven by 6 documented props (starSize, stiffness, damping, containerRef, hideDefaultCursor, className), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D rendering with requestAnimationFrame loop; Spring physics position smoothing (stiffness + damping); 8-point star drawn with drawStar helper (alternating outer/inner radius).
Preview the cursor effect in the browser above, copy the source, and paste it into your project. Cursor Effects components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Star Cursor ⭐?
Cinematic space star cursor with spring physics, particle trails, hover glow expansion, and click burst effects.
Star Cursor ⭐ at a glance
- Category
- Cursor Effects
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 6
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Star Cursor ⭐ works
An ultra-premium cosmic star cursor rendered on a Canvas 2D layer. Features an 8-point glowing white star with long light rays, a pulsing bloom aura, and a particle system that spawns shooting-star trails on movement and a 24-particle radial burst on click. Expands and intensifies on hovering interactive elements.
Technical information for Star Cursor ⭐
| Category | Cursor Effects |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | HTML canvas, blend modes, CSS gradients |
| State change | idle pulsing star to expanded hover glow + click cosmic burst |
| Props | 6 configurable |
| Usage example | Included on this page |
What Star Cursor ⭐ requires
- Canvas 2D rendering with requestAnimationFrame loop
- Spring physics position smoothing (stiffness + damping)
- 8-point star drawn with drawStar helper (alternating outer/inner radius)
- Long directional light rays via roundRect + linear gradients
- Diagonal rays at 45° offset
- Multi-layer radial gradient glow (outer halo + center core)
- Math.sin pulse animation for ambient glow breathing
- Particle system: trail particles on movement, 4-point mini-stars + glowing dots
- 24-particle radial click burst with randomized velocities and lifetimes
- Click flash decay ring animation
- Hover scale spring animation (targetStarScale 1.35x on interactive elements)
- ResizeObserver for canvas sizing
- Scoped container mode via containerRef
- Default cursor hiding via injected <style> tag
How to use Star Cursor ⭐
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <StarCursor /> in your page using that import path.
- Pass any of the 6 documented props to change colours, density, speed or behaviour.
Star Cursor ⭐ questions
What is Star Cursor ⭐?
Cinematic space star cursor with spring physics, particle trails, hover glow expansion, and click burst effects.
How does Star Cursor ⭐ work?
An ultra-premium cosmic star cursor rendered on a Canvas 2D layer. Features an 8-point glowing white star with long light rays, a pulsing bloom aura, and a particle system that spawns shooting-star trails on movement and a 24-particle radial burst on click. Expands and intensifies on hovering interactive elements.
Which category does Star Cursor ⭐ belong to?
Star Cursor ⭐ is listed under Cursor Effects in the UI HUB catalog. Custom cursor components that replace the system pointer with something branded: magnetic attraction, trail effects, target reticles, blend modes and blob followers. Each one is pointer-aware and responsive, and exposes props for colour, smoothing and activation zones. Best used on portfolio and agency sites where the cursor becomes part of the identity.
What does the starSize prop do in Star Cursor ⭐?
Size of the main star cursor in pixels. It defaults to 28.
What does the stiffness prop do in Star Cursor ⭐?
Spring stiffness for cursor following (0–1). Lower = more lag, higher = snappier. It defaults to 0.12.
Is Star Cursor ⭐ free to use?
Star Cursor ⭐ is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Star Cursor ⭐ use?
Star Cursor ⭐ uses React and is styled with Tailwind CSS.
What does Star Cursor ⭐ need to run?
Star Cursor ⭐ needs Canvas 2D rendering with requestAnimationFrame loop, Spring physics position smoothing (stiffness + damping), 8-point star drawn with drawStar helper (alternating outer/inner radius) and Long directional light rays via roundRect + linear gradients.