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.
• 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
• 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
• 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
• 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
• GSAP Optimized Rendering — Smooth and efficient updates• Auto Script Injection — Loads GSAP only when needed• Mobile Safe — Disables on smaller screens automatically
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
Text Font — Full font control including family, weight, size, and spacing
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
Follow Feel — Controls animation timing and easingSkew — Adds directional distortion based on speedHover Scale — Controls cursor scaling on hover
Image Radius — Controls border radius of images inside cursor
Hide on Leave — Hides cursor when leaving windowHide on Idle — Enables idle hidingIdle Timeout — Time before cursor hides when idle
Mobile Cutoff — Screen size where cursor disables
After copying the component, paste it on to your canvas.
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)
In the properties panel of "CursorFollowerPro" change the settings to your liking.
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.
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
• 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.
Daniyal Habib
