Motion Hover RGB

Chromatic Aberration Hover Effect

Motion Hover RGB creates a stunning chromatic aberration effect that shifts color channels as the image follows the cursor, producing a glitch-like visual effect that captivates your visitors.

Features

RGB Shift Effect Creates chromatic aberration by separating the red, green, and blue color channels. As the cursor moves, the channels separate creating a dynamic, premium visual effect.

Strength Control Adjust the intensity of the RGB separation from subtle (0.1) to dramatic (1.0) to match your design aesthetic.

Full Customization Comprehensive styling controls for titles, subtitles, colors, fonts, padding, borders, shadows, and more.

Use Cases

Portfolio Showcases — Display project thumbnails with eye-catching hover reveals that highlight your creative work.

Product Galleries — Make e-commerce product images come alive with interactive hover effects.

Hero Sections — Create memorable landing page headers with dynamic, cursor-following imagery.

Creative Agency Sites — Add a modern, tech-forward aesthetic to your agency website.

How to Use

Installation

VIDEO PLACEHOLDER: Installation Tutorial

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Motion Hover RGB in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

The component offers extensive customization through grouped property controls:

Title Styles

• Font (extended controls for size, weight, line height, letter spacing, alignment)
• Color & Hover Color
• Background, Padding, Border, Radius, Shadow

Subtitle Styles

• Same comprehensive options as title styles

Image Settings

• Image source via ResponsiveImage
• Sizing mode: Cover, Contain, or Custom dimensions

Effect Settings

• Strength: Controls RGB separation intensity (0-1)

Quick Tips

Best Performance — The WebGL renderer uses canvas mode optimization for smooth performance in the Framer editor.

Image Quality — Use high-resolution images for best results, as color separation is more visible with detailed images.

Strength Settings — Start with 0.25 for subtle effect, increase to 0.5+ for more dramatic separation.

Custom Content — Use the Custom Items slot to replace default text with your own Framer components.

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Why Designers Love This

Motion Hover RGB transforms ordinary hover interactions into memorable experiences with its chromatic aberration effect. The Three.js-powered rendering ensures buttery-smooth animations while GSAP provides precise timing control.