Chromatic Aberration

Chromatic Aberration Text Effect

Transform your text into a stunning visual experience with the Chromatic Aberration component. This effect splits text into separate RGB color channels that animate independently, creating that iconic glitch-style look popular in modern web design.

Features

Animated RGB Channels Watch as the red, green, and blue color channels shift and separate in a smooth, continuous animation. The effect creates depth and visual interest that draws the eye.

Customizable Animation Control the offset distance (how far channels separate) and duration (animation speed) to achieve exactly the look you want—from subtle shifts to dramatic separations.

Full Typography Control Use extended font controls to customize every aspect of your text: family, size, weight, alignment, line height, letter spacing, and more.

Custom Channel Colors Go beyond traditional RGB. Customize each of the three color channels to match your brand or create unique color combinations.

Use Cases

Hero Headlines — Create impactful landing page headlines that immediately grab attention.

Gaming & Tech Sites — Perfect for esports, gaming, and technology websites looking for that edgy, digital aesthetic.

Event Promotions — Add excitement to music festival, concert, or tech conference promotions.

Creative Portfolios — Stand out with eye-catching typography that showcases your design sensibility.

How to Use

Installation

1. Copy the component URL
2. Open your Framer project
3. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

Content Settings

• Text: Enter your headline or text content
• Font: Full typography controls including family, size, weight, and alignment

Animation Settings

• Offset: Control how far the RGB channels separate (0-50px)
• Duration: Set the animation cycle speed (0.1-10 seconds)

Color Settings

• Channel 1: First color layer (default: red)
• Channel 2: Center color layer (default: green)
• Channel 3: Third color layer (default: blue)

Quick Tips

Best Performance — Keep offset values between 2-10 for smooth, readable text. Higher values create more dramatic but harder-to-read effects.

Color Harmony — While RGB is classic, try complementary colors or your brand palette for unique results.

Background Matters — Dark backgrounds make the screen blend mode pop. Light backgrounds may require adjusting colors.

Static Preview — The canvas shows a static offset preview. Use Preview mode to see the full animation.

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

The Chromatic Aberration effect instantly adds a premium, modern feel to any project. It's the perfect way to make headlines stand out without complex animation setups—just drop it in, customize, and go.