---
title: "Motion Hover RGB"
canonical_url: "https://framerhub.io/components/motion-hover-rgb"
last_updated: "2026-06-15T14:46:30.214Z"
---

## 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.

![Motion Hover RGB Preview](/framerhub/img/components/control/motion-hover-rgb.jpg)

## 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.

---