Following Cursor

What is Follow Cursor?

Follow Cursor is a cursor-tracking component for Framer. It supports multiple reaction modes—eyes with natural blinking, floating badges, and animated emojis—with smooth spring animations and idle drift. Use it to add subtle interactivity to landing pages, portfolios, and product showcases.

Core Features

Multiple Reaction Modes:

• Eyes Mode: One or two eyes that track the cursor with natural blinking. Three shape presets (round, oval, narrow).

• Badge Mode: Floating badge with gradient background, hover scale, and dynamic shadows.

• Emoji Mode: Animated emoji with hover effects, rotation, and glow.

Smooth Motion System:

• Spring-based animations with adjustable smoothing (0.02–0.3).

• Idle drift animation when the cursor is inactive or off-screen.

Follow Triggers:

• Always: Tracks cursor globally across the page.

• Hover Area: Only responds when hovering over the component.

Natural Eye Behavior:

• Automatic blinking with random intervals (3.5–8 seconds).

• Three eye shapes: round, oval, narrow.

• Customizable eye and pupil colors, sizes, and spacing.

Controls Inside Framer

All settings are exposed as property controls.

Mode & Behavior:

• Reaction mode (Eyes, Badge, Emoji).

• Follow trigger (Always, Hover Area).

• Smoothing (motion lag/speed).

• Idle animation toggle and speed.

Eyes Mode:

• Shape preset (Round, Oval, Narrow).

• Count (Single, Pair).

• Size, eye color, pupil color.

• Blinking toggle.

Badge Mode:

• Label text, padding, corner radius.

• Background color, text color, font size.

Emoji Mode:

• Emoji character, size.

Styling:

• Shadow strength, background color.

Best Use Cases

• Landing Pages & Hero Sections

• Portfolio & Showcase Sites

• Product Launches & Marketing

• Creative & Experimental Projects

Drop Follow Cursor onto your canvas, choose a mode, and customize in the property panel. Works as a standalone element or as an overlay wrapper for existing content.