Welcome to Funky Cursors

A collection of unique, customizable cursor trail effects for your project.

npm i funky-cursor

Features & Benefits

Customizable Effects

Tailor each cursor effect to match your website’s style with adjustable props like color, size, speed, and more.

Easy Integration

Just a few lines of code are all you need to integrate any of the effects into your project.

Responsive & Lightweight

Optimized for performance and responsive on all screen sizes, ensuring a smooth user experience.

Multiple Effects

Choose from a wide range of cursor effects including bubbles, stars, concentric lines, and more!

How It Works

Integrating any of these cursor effects into your project is simple. Here’s a basic example and a guide to props you can use:

import { BubblesTrailCursor } from 'funky-cursor';

const MyComponent = () => (
  <div>
    <BubblesTrailCursor 
      color="blue"  // Customize the color of the bubbles
      size={10}     // Adjust the size of the bubbles
      speed={1.5}   // Control the speed of the trail effect
    />
  </div>
);

Props:

  • color: Sets the color of the effect (e.g., "red", "blue").
  • size: Adjusts the size of the effect (e.g., 10, 20).
  • speed: Controls the speed of the trail animation (e.g., 1.5, 2.0).
  • lifespan: Determines how long the trail lasts before disappearing.
  • dampening: Adjusts the effect’s responsiveness to cursor movement.

Available Cursor Effects

Bubbles Trail Cursor

A bubble effect follows the cursor. Fun and playful for interactive experiences.

Read Documentation

Glow Trail Cursor

Creates a glowing trail behind the cursor, adding a modern and dynamic effect.

Read Documentation

Ripple Trail Cursor

Adds a ripple effect as the cursor moves, giving a calming water-like feel.

Read Documentation