---
title: "ChromaticTextEffect — Free Framer component · Best of Framer"
description: "Free Framer component · by Souhayb kamal dine · Text. ChromaticTextEffect, an interactive Framer component that simulates authentic chromatic aberration and retro glitch visuals.Move…"
canonical: "https://framer.elliotli.dev/component/chromatictexteffect"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ChromaticTextEffect

# ChromaticTextEffect

[View on Framer](https://framer.com/marketplace/components/chromatictexteffect/?via=elliot-li)

![ChromaticTextEffect preview image 1](https://framer.elliotli.dev/og/component/chromatictexteffect/f27d584930b0e066/1600x1200.jpg)

## Summary

ChromaticTextEffect, an interactive Framer component that simulates authentic chromatic aberration and retro glitch visuals.Move your mouse or tap on mobile to watch red, green,…

## Description

## Chromatic Text Effect – Interactive RGB Split & Glitch Typography

Bring your typography to life with **ChromaticTextEffect**, an interactive Framer component that simulates authentic **chromatic aberration** and **retro glitch visuals**.Move your mouse or tap on mobile to watch red, green, and blue color channels split, shift, and animate dynamically, creating a cyberpunk-style text effect inspired by **VHS distortion** and **digital art aesthetics**.

## 🎨 Key Features

-   **RGB Channel Split:** Real-time red, green, and blue separation that reacts to cursor or touch movement.
    
-   **Glitch Pulses:** Randomized jitter bursts mimic authentic screen distortion.
    
-   **Scanlines & Vignette:** Optional CRT-style overlays for a true retro display look.
    
-   **Trail Motion:** Adds smooth echo trails behind movement for cinematic depth.
    
-   **Idle Animation Mode:** Subtle automatic motion even when idle, perfect for hero sections.
    
-   **Reset Animation:** Smooth easing when the cursor leaves the area.
    

## ⚙️ Customization Controls (20+)

-   Font, size, weight, and letter spacing.
    
-   Split intensity (0–50px) and individual RGB channel multipliers.
    
-   Toggle glitch, scanlines, vignette, and trails.
    
-   Adjust glitch frequency, vignette strength, and scanline opacity.
    
-   Background color + text color for full contrast control.
    

🧠 How It Works

The component calculates normalized cursor position (–1 to +1) relative to the text center.Each RGB layer shifts independently using CSS transforms and mix-blend-mode: screen, creating natural additive color blending.Glitch pulses and optional trails add extra energy and realism, all rendered at 60 fps via requestAnimationFrame.

🚀 Perfect For

-   **Gaming & Esports** brands
    
-   **Tech startups, AI & SaaS** landing pages
    
-   **Music & digital art** portfolios
    
-   **Cyberpunk / synthwave** designs
    
-   **Hero headers & creative typography**
    

💡 Why You’ll Love It

-   Instantly draws attention with authentic RGB splitting.
    
-   Works seamlessly on desktop and touch devices.
    
-   Fully customizable, from subtle color offsets to extreme glitch art.
    
-   Optimized for performance, accessibility, and Framer canvas detection.
    
-   Zero coding required, just drag, tweak, and publish.
    

✨ Turn any heading into a living piece of digital art with **ChromaticTextEffect** , where retro glitch meets modern web design.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7570

## Details

- **Author**: Souhayb kamal dine
- **Published**: 2025-10-22
- **Updated**: 2025-10-22
- **Added**: 2025-10-13
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing