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