Cursor Follower Pro

Cursor Follower Pro is a fully dynamic cursor system built for Framer. It enhances the default pointer by adding a smooth animated follower that reacts to user interaction, hover states, and motion in real time.

The component uses GSAP for precise motion control, easing, and performance. It supports text, images, magnetic interactions, and blend modes, all configurable directly from the property panel.

It runs only in Preview and Live mode, keeping your canvas clean while designing. On smaller screens, the cursor follower disables automatically to maintain usability and performance.

Features

Cursor Follower System

• Smooth Cursor Follower — Adds a fluid animated follower that tracks the default cursor• Optional Cursor Replacement — Hide the system cursor and use only the custom follower when needed• Motion Engine — Powered by GSAP with adjustable speed and easing• Skew-Based Motion — Adds directional stretch based on cursor velocity

Smart Hover Interactions

• Dynamic Text Labels — Show contextual text on hover• Image Support — Display images inside the cursor on hover• Per-Target Styling — Unique colors, scale, and behavior for each element• Instant Variant Detection — Updates cursor instantly on interaction changes

Advanced Interaction Modes

• Magnetic Effect — Elements subtly move toward the cursor• Difference Blend Mode — Inverts colors for high contrast interactions• Behind Mode — Push cursor behind elements for layered effects

Visibility Controls

• Hide on Idle — Automatically hides cursor after inactivity• Hide on Leave — Hides when cursor exits the window• Wake-Up Sync — Prevents jump glitches when cursor reappears

Performance and Responsiveness

• GSAP Optimized Rendering — Smooth and efficient updates• Auto Script Injection — Loads GSAP only when needed• Mobile Safe — Disables on smaller screens automatically

Property Controls

Core Settings

Size — Controls the base size of the cursorCursor Color — Sets the default cursor background colorDifference Blend — Toggles global blend mode behaviorText Color — Sets default text color inside cursorReplace Default Cursor — Hides the system cursor and uses only the custom follower

Typography

Text Font — Full font control including family, weight, size, and spacing

Targets

Targets — Define interactive elements by layer name and customize their behaviorLayer — Exact layer name to targetText — Hover text contentImg — Optional image inside cursorW — Image widthH — Image heightMagnet — Enables magnetic interactionDiff — Enables blend mode for this targetBehind — Places cursor behind the elementBg — Cursor color for this targetColor — Text color for this targetScale — Hover scale for this target

Motion and Feel

Follow Feel — Controls animation timing and easingSkew — Adds directional distortion based on speedHover Scale — Controls cursor scaling on hover

Media Styling

Image Radius — Controls border radius of images inside cursor

Visibility

Hide on Leave — Hides cursor when leaving windowHide on Idle — Enables idle hidingIdle Timeout — Time before cursor hides when idle

Responsive

Mobile Cutoff — Screen size where cursor disables

How to Use

Setup

1. After copying the component, paste it on to your canvas.

2. Put the components on every page, on top of all the layer (Recommended: Put this component in a "Layout Template" so every page inherit it naturally without manually pasting in each page)

3. In the properties panel of "CursorFollowerPro" change the settings to your liking.

Hover Interaction Setup

Important: for the hover effects to work, name the layer that you want to apply the effect on. Then in the "Targets" property add that item with the exact layer name and tweek the hover effect to your liking.

Final Step

Enjoy an awards winning cursor in your framer website!

For any confusion or feature request, contact daniyalhundred@gmail.com, I usually respond within 10 minutes

Ideal Use Cases

Best for

• Portfolio websites with strong visual identity• Agency and studio websites• Product showcase and landing pages• Interactive storytelling experiences• Creative developer portfolios

Cursor Follower Pro helps guide user attention, improve interaction clarity, and add a refined layer of motion to your Framer projects.