ChromaticTextEffect
Interactive text with chromatic RGB split effect. Mouse controls color channel separation. Features glitch animations, scanlines, and retro VHS aesthetic.
Make it with Workshop
Build your own component with AI
Interactive text with chromatic RGB split effect. Mouse controls color channel separation. Features glitch animations, scanlines, and retro VHS aesthetic.
Make it with Workshop
Build your own component with AI
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.
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.
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.
