About
An animated canvas cursor effect that scatters drifting star particles and draws glowing constellation lines between nearby stars and the mouse pointer.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Constellation Cursor to your project and fits it to your theme.
Code
How Constellation Cursor is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import ConstellationCursor from "@/components/ui/constellation-cursor";
import * as React from "react";
export default function ConstellationCursorDemo() {
const containerRef = React.useRef<HTMLDivElement>(null);
return (
<div
ref={containerRef}
className="relative w-full h-screen overflow-hidden bg-black"
style={{ cursor: "none" }}
>
<ConstellationCursor
containerRef={containerRef}
config={{
starCount: 90,
maxDist: 115,
cursorDist: 175,
starColor: "#c8c8ff",
pointerAnim: true,
pointerDistMult: 1.25,
clickAnim: true,
clickGlowIntensity: 1.5,
}}
/>
</div>
);
}
More by felix-au
View all
Matrix Rain Cursor
9
Wind Stream Cursor
2
Rainbow Comet Cursor
Clock Cursor