Components

Star Cursor

A star-shaped cursor with an offset outline, a glowing comet tail, and sparkle dust. Turns on only for a mouse and stays off when the visitor prefers reduced motion.

Move your mouse hereDrag your finger here

Customize

size25

strokeWidth2

offset2.5

starColor#ffffff

outlineColor#0b0e1a

tailColor#ffffff

tailLength30

tailWidth12

dust

Usage

Add StarCursor.tsx and color.ts to your project, then render it. The snippet updates with your Customize settings.

Example.tsx

import { StarCursor } from './StarCursor'

export default function Example() {
  return (
    <>
      <StarCursor />
      {/* your app */}
    </>
  )
}

Name	Type	Default	Description
`size`	`number`	`25`	Star width and height in px.
`strokeWidth`	`number`	`2`	Star outline width.
`offset`	`number`	`2.5`	Extra outline thickness on the bottom and right edges, like an offset shadow. 0 gives an even outline.
`starColor`	`string`	`'#ffffff'`	Star fill colour.
`outlineColor`	`string`	`'#0b0e1a'`	Star outline and offset colour.
`tailColor`	`string`	`'#ffffff'`	Colour of the comet tail and sparkle dust.
`tailLength`	`number`	`30`	Points in the tail. Longer tails trail further behind the pointer.
`tailWidth`	`number`	`12`	Tail width in px at the star, tapering to a point.
`dust`	`boolean`	`true`	Sparkle dust that falls from the tail when the pointer moves quickly.
`boundary`	`'window' \| 'parent'`	`'window'`	Follow the pointer across the whole window, or only inside the parent element. 'parent' needs a parent with position: relative.
`touch`	`boolean`	`false`	Also follow a finger or pen on touch screens. The star hides when the finger lifts.

Get Star Cursor

Buy this component on its own, or get all three in the Night Sky UI Kit.

Buy Star Cursor Buy the kit