---
title: "Disco Shadow Text — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Karim Saif · Text. RGB typography effect"
canonical: "https://framer.elliotli.dev/component/disco-shadow-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Disco Shadow Text

# Disco Shadow Text

RGB typography effect

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

![Disco Shadow Text preview image 1](https://framer.elliotli.dev/og/component/disco-shadow-text/59b0468bdf33c72c/1600x1044.jpg)

## Summary

RGB typography effect

## Description

**Disco Shadow** is an interactive RGB typography effect that reacts to your cursor movement. Move faster and the red, green, and blue channels split apart, creating a vibrant chromatic shadow that feels inspired by disco lights, CRT displays, and digital motion graphics.

### ✨ Preview

[https://discoshadowtext.framer.website/](https://discoshadowtext.framer.website/)

## Great For

Disco Shadow works especially well for:

-   Hero headlines
    
-   Creative portfolios
    
-   Digital agency websites
    
-   Music and entertainment websites
    
-   Fashion and editorial websites
    
-   Experimental landing pages
    
-   Interactive typography
    
-   Art and design portfolios
    
-   Posters and campaign pages
    
-   Tech and futuristic interfaces
    
-   Cursor-reactive experiences
    

Use it on a single headline for a subtle effect, or push the settings further for a bold psychedelic RGB distortion.

## ⚡ Features

-   🪩 Cursor-reactive RGB shadows
    
-   🎨 Independent Red, Green, and Blue colors
    
-   🖱 Velocity-based movement
    
-   💨 Smooth motion and inertia
    
-   📐 Adjustable RGB separation
    
-   🚀 Maximum separation control
    
-   ✨ Velocity-driven glow
    
-   🌫 Adjustable glow blur
    
-   🎚 Custom opacity
    
-   🔤 Native Framer Font controls
    
-   📏 Font size and weight controls
    
-   ✍ Letter spacing control
    
-   ↕ Line-height control
    
-   ↔ Text alignment control
    
-   🎨 Custom text color
    
-   🖼 Optional background color and opacity
    
-   📱 Touch-safe interaction
    
-   ♿ Reduced-motion support
    
-   👁 IntersectionObserver optimization
    
-   📐 ResizeObserver support
    
-   🖥 DPR-aware canvas rendering
    
-   ⚡ Performance-conscious animation
    
-   🧩 No external dependencies
    

## 🛠 Support

Need help using Disco Shadow or found an issue?

**X:** @karimsaif [https://x.com/karimsaif0](https://x.com/karimsaif0)

**Email:** [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com)

Feel free to reach out for questions, bug reports, or feedback.

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

-   All · #6284

## Details

- **Author**: Karim Saif
- **Price**: $6.00
- **Published**: 2026-09-08
- **Updated**: 2026-09-16
- **Added**: 2026-09-08
- **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