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.
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.
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.
Copy the component URL
Open your Framer project
Paste the component anywhere on your canvas (Cmd/Ctrl + V)
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)
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.
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
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!
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.
FramerHub.io 
