About
A canvas-based custom cursor effect that trails bezier-curved wind streams behind mouse movement, thickens near clickable elements, and bursts into a multicolor radial gust on click.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wind Stream Cursor to your project and fits it to your theme.
Code
How Wind Stream Cursor is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import WindStreamCursor from "@/components/ui/wind-stream-cursor";
export default function WindStreamCursorDemo() {
const containerRef = React.useRef(null);
return (
<div
ref={containerRef}
className="relative w-full h-screen overflow-hidden bg-black text-white"
style={{ cursor: "none" }}
>
<WindStreamCursor
containerRef={containerRef}
config={{
hue: 200,
count: 2,
decay: 0.93,
minSpeed: 2.5,
pointerAnim: true,
pointerThickness: 6.5,
clickAnim: true,
}}
/>
<div className="flex h-full w-full items-center justify-center">
<p className="text-sm text-white/60">
Move your mouse to sculpt wind streams
</p>
</div>
</div>
);
}
More by felix-au
View all
Matrix Rain Cursor
4