About CMS Cursor Hover

Powerful cursor-following hover component with 6 animation effects (Float, Tilt 3D, Scale, Magnetic, Elastic), dual image+video display, multiple trigger behaviors, and extensive customization options.

About this Component

A professional hover effect component for Framer that displays media following your cursor. Connect CMS images and videos directly, display them simultaneously with dual tile mode, and choose from multiple interaction behaviors. Perfect for portfolios, product showcases, and interactive galleries.

Key Features

Media Support

Direct CMS image connection
Video files (mp4, webm, mov)
Video links (YouTube, Vimeo, Google Drive)
Automatic embed conversion

4 Trigger Behaviors

Hover: Show on mouse enter, hide on leave
Click/Drag: Show while clicking and dragging
Hover + Click Lock: Hover to show, click to lock position
Click & Lock: Click to display at fixed position

Dual Display Mode

Show image + video simultaneously
Independent tile ratios (0.1x to 5x)
Custom offset, rotation, and scale for second tile
Choose which media appears in front

6 Hover Effects

None: Static following
Float: Rotation based on cursor position
Tilt 3D: Perspective rotation on both axes
Scale: Size variation based on distance from center
Magnetic: Subtle pull toward container center
Elastic: Bouncy trailing motion

Dimensions

Keep Ratio mode preserves aspect ratios
Configurable width and height
Independent ratios for each tile in dual mode

Echo/Trail Effect

Ghosting trail behind main tile
Adjustable trail length (2-15)
Smooth fade animation

Customization

Border radius, width, style, and color
Native Framer shadow control
Cursor hiding option
Configurable Z-Index (-10 to 10)
Fade in/out timing control
X/Y offset positioning

Video Settings

Muted/unmuted playback
Loop control
Autoplay on hover

How to Use

Add the component inside a CMS Collection List item
Position it absolutely over your card/content
Connect Image Hover to your CMS image field
Optionally connect Video Hover (file or link)
Choose your Behavior mode
Select a Hover Effect
Configure Dimensions and Dual Display settings
Customize appearance (shadow, border, etc.)

Refund Policy

Due to the digital nature of this product, all sales are final. Please review the demo and documentation carefully before purchasing. If you encounter any technical issues, contact us at framermaster@gmail.com — we're happy to help!