Follow Cursor

Colorful, fluid cursor trails that respond to mouse movement

Hover Me.

Installation

npx scrollx-ui@latest add followcursor

Usage

import Followcursor from "@/components/ui/followcursor";
<Followcursor
  className="my-custom-class"
  style={{ height: "400px" }}
  colors={["#FF6B6B", "#4ECDC4", "#3A86FF"]}
  thickness={{ min: 20, max: 80 }}
  count={{ min: 10, max: 20 }}
  bgColor="rgba(10, 10, 20, 0.9)"
/>

API Reference

FollowCursor

The FollowCursor component creates beautiful, fluid lines that follow the user's cursor with smooth animation. It uses WebGL for high-performance rendering and provides a visually engaging interactive element.

  • className – Optional CSS class name to apply to the container div.

  • style – Optional inline styles to apply to the container div.

  • colors – An array of color strings in hex format to use for the lines.
    Default: A preset array of 10 vibrant colors.

  • thickness – An object defining the range for the thickness of the lines.
    Default: { min: 30, max: 100 }

  • count – An object defining the range for the number of points per line.
    Default: { min: 15, max: 25 }

  • bgColor – Background color of the canvas.
    Default: "rgba(26, 26, 38, 1)"