Link to the plugin page: [ZQ link]
Introduction
The Cursor Effects Plugin is designed to add engaging and interactive cursor effects to your Framer projects. This plugin contains two powerful components that create stunning visual experiences as users move their cursor across your website. The plugin includes a WebGL-powered fluid dynamics simulation (Splash Cursor) and a collection of various animated cursor effects (Cursor Effects) that can transform any ordinary cursor interaction into an engaging visual experience.
How to setup
To use the Cursor Effects Plugin in your Framer project:
- Install the plugin from the Framer plugin library
- Open your Framer project
- Access the plugin through the plugins panel
- Click “Add Splash Cursor” or “Add Cursor Effects” to insert the desired component
- Customize the component properties in the properties panel
- Preview and publish your project
The plugin will automatically handle the cursor effects across your entire project once the components are added.
Plugin Element Properties
The plugin contains two main visual elements that should be used on your pages.
Splash Cursor
Interactive fluid dynamics cursor effect with WebGL-powered particle simulation that creates colorful, flowing trails following mouse movement.
Fields:
Title | Description | Type |
Color Mode | Choose color generation mode: Default (Random), Single Color, or Black & White | Enum |
Base Color | Base color used when Single Color mode is selected | Color |
Simulation Resolution | Grid resolution for fluid simulation (32-512) | Number |
Dye Resolution | Texture resolution for dye rendering (256-2048) | Number |
Capture Resolution | Texture resolution for capture (256-1024) | Number |
Density Dissipation | How quickly the dye fades (0.1-10) | Number |
Velocity Dissipation | How quickly velocity decreases (0.1-10) | Number |
Pressure | Pressure strength (0.01-1) | Number |
Pressure Iterations | Number of pressure calculation iterations (1-50) | Number |
Curl | Vorticity strength for swirling effects (0-50) | Number |
Splat Radius | Size of splat effect (0.05-1) | Number |
Splat Force | Force of splat effect (1000-20000) | Number |
Shading | Enable shading effects for depth | Boolean |
Color Update Speed | How fast colors change (1-100) | Number |
Cursor Effects
Collection of animated cursor effects including fairy dust, rainbow trails, emoji rain, and various particle systems.
Fields:
Title | Description | Type |
Effect Type | Type of cursor effect: Fairy Dust, Rainbow Trail, Emoji Rain, Ghost Following, Trailing Cursor, Text Flag, Following Dot, Bubble Particles, Snowflake, Clock Cursor, Character Cursor | Enum |
Colors | Array of colors for the effect (max 10 colors) | Color Array |
Emojis/Snowflakes | Array of emoji or snowflake characters (max 20) | Text Array |
Characters | Array of characters for character cursor or text flag (max 20) | Text Array |
Size | Size of effect elements (1-20) | Number |
Length/Particles | Trail length or number of particles (5-100) | Number |
Rate | Particle generation rate (1-20) | Number |
Life Span | How long characters live in milliseconds (50-1000) | Number |
Rotate Characters | Enable character rotation and movement | Boolean |
Target Element | CSS selector to limit effect to specific element | Text |
Element Actions
The plugin provides simple actions to add cursor effect components to your Framer project:
1. Add Splash Cursor
Adds the Splash Cursor component with fluid dynamics effects to your project.
Title | Description | Type |
Component URL | Pre-configured URL for the Splash Cursor component | Text |
Attributes | Empty object for component attributes | Object |
2. Add Cursor Effects
Adds the Cursor Effects component with various animated cursor options to your project.
Title | Description | Type |
Component URL | Pre-configured URL for the Cursor Effects component | Text |
Attributes | Empty object for component attributes | Object |
Exposed states
Not applicable for this Framer plugin as it operates independently without exposing internal states.
Element Events
Name | Description |
Mouse Move | Triggered when cursor moves, activating the visual effects |
Mouse Down | Triggered when mouse is pressed, creating splat effects (Splash Cursor) |
Touch Start | Triggered when touch begins on mobile devices |
Touch Move | Triggered during touch movement on mobile devices |
Touch End | Triggered when touch ends on mobile devices |
Plugin Data/Action Calls (API Calls only)
This section is not applicable for the Cursor Effects Plugin as it is a visual effects plugin for Framer that does not make external API calls.
Workflow example
Here’s how to get started with the Cursor Effects Plugin:
Basic Setup Workflow
- Install and Access Plugin
- Install the Cursor Effects Plugin from Framer’s plugin library
- Open your Framer project
- Navigate to the plugins panel
- Add Splash Cursor Effect
- Click “Add Splash Cursor” button in the plugin interface
- The component will be automatically added to your project
- Customize the fluid simulation properties in the properties panel
- Adjust color mode, resolution, and physics parameters as needed
- Add Cursor Effects
- Click “Add Cursor Effects” button in the plugin interface
- Select your preferred effect type (Fairy Dust, Rainbow Trail, etc.)
- Configure colors, particles, and animation properties
- Set target elements if you want to limit effects to specific areas
- Test and Optimize
- Preview your project to see the cursor effects in action
- Adjust settings for optimal performance and visual appeal
- Publish your project with enhanced cursor interactions
BANNER_SUBSCRIBE.png