It replaces the default browser cursor with a smooth animated follower that tracks the user’s mouse movement across the page.
The cursor reacts to hover interactions and can display contextual text such as View, Open, Explore, Play, or Contact when hovering selected elements.
This interaction pattern is commonly used on modern agency websites, creative portfolios, product pages, and interactive landing pages to guide user interaction and improve engagement.
The component automatically loads the required scripts and activates only in Preview and Live mode, keeping the Framer canvas clean while designing.
Cursor effects are also automatically disabled on mobile devices, ensuring better performance and usability on touch screens.
Features
Replaces the default browser cursor with a smooth animated follower.
The cursor moves with adjustable follow speed and motion smoothing to create a fluid interaction experience.
Display contextual text inside the cursor when hovering over selected elements.
Includes five customizable hover text options:
• View• Open• Explore• Play• Contact
Each label can be renamed directly from the property panel.
Cursor movement uses motion smoothing to create a natural tracking effect.
You can adjust:
• Follow speed• Motion smoothing• Cursor scaling on hover
These controls allow you to fine-tune the interaction feel.
Customize the cursor directly inside Framer:
• Cursor size• Cursor color• Hover text color• Hover scale amount
These styling options make it easy to match the cursor with any website design.
Cursor Follower Pro includes five hover text overrides that can be applied to elements.
Each override triggers a different text label inside the cursor.
Examples of elements you can apply them to:
• Buttons• Links• Images• Cards• Videos
This helps communicate the action users can perform.
The custom cursor automatically disables on screens smaller than 768px, allowing mobile users to interact normally using touch gestures.
This ensures optimal performance across devices.
Property Controls
Cursor Follower Pro includes several adjustable properties inside the Framer property panel.
Controls the diameter of the cursor follower.
Sets the background color of the cursor.
Controls how quickly the cursor catches up with the mouse pointer.
Adjusts how fluid the follower movement feels.
Determines how large the cursor grows when displaying hover text.
Sets the color of the text displayed inside the cursor.
Five customizable text fields that control the text shown during hover interactions.
How to Use
Copy the component and paste it directly into your Framer project canvas.
Framer will automatically import the component into your project.
To enable custom hover text interactions, first unlink the Cursor Follower Pro component in your project.
Unlinking unlocks the override controls required for hover text interactions.
Select any layer where you want the cursor to display text.
Apply one of the available overrides:
• Custom Text 1• Custom Text 2• Custom Text 3• Custom Text 4• Custom Text 5
Each override corresponds to the custom text fields defined in the main component.
Place the Cursor Follower Pro component at the top of your layer stack, just below the Body layer.
This ensures the cursor follower renders above all other elements.
Use the property controls to customize:
• cursor size• cursor colors• hover text• motion speed• hover scale
This allows you to match the interaction to your website’s visual style.
Ideal Use Cases
Cursor Follower Pro works well for:
• portfolio websites• agency websites• landing pages• product showcase pages• creative studio websites• interactive web experiences
It helps create a more engaging browsing experience by giving users clear visual feedback when hovering important elements.
Daniyal Habib
