---
title: "Liquid ChromaText FX — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Munzir Kareem · Text. Pointer-driven chroma distortion"
canonical: "https://framer.elliotli.dev/component/liquid-chromatext-fx"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Liquid ChromaText FX

# Liquid ChromaText FX

Pointer-driven chroma distortion

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

![Liquid ChromaText FX preview image 1](https://framer.elliotli.dev/og/component/liquid-chromatext-fx/aa488f1cb451d0ff/1600x1200.jpg)

## Summary

Pointer-driven chroma distortion

## Description

Liquid Chroma Text FX turns your text into a fluid, reactive surface that warps and ripples as the cursor moves across it.

**How it works** Text near the pointer bends and displaces in smooth, wave-like motion, pulled along by your mouse's movement. A chromatic fringe rides along the distortion, splitting the edges into faint red/blue/green streaks as it stretches — then everything eases back into place once the cursor moves away.

**Controls**

-   Strength — how strongly the text bends and distorts around the pointer
    
-   Radius — how far the pointer's influence reaches
    
-   Chroma — amount of color separation around distorted edges
    
-   RGB Fringe — intensity of the RGB fringe effect
    
-   Smoothing — how fluidly the distortion follows pointer movement
    
-   Quality — rendering resolution (Auto / High / Medium / Low)
    
-   Layout — text alignment, sizing/fit mode, padding, and max lines
    
-   Hint — optional "Move across the text" prompt for users
    

**Behavior** The live WebGL effect runs in Preview and on your published site. In static/export contexts or if WebGL isn't available, it gracefully falls back to a clean rendered version of the text. Fully accessible with proper ARIA labeling and hidden screen-reader text.

**Refund Policy** This is a digital component, so all sales are final. Once delivered, it cannot be returned, exchanged, or refunded. Please review the details and demo before purchasing.

[Component Demo](https://youtu.be/CALTMF_Zmjo)

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

-   All · #6546

## Details

- **Author**: Munzir Kareem
- **Price**: $10.00
- **Published**: 2026-08-14
- **Updated**: 2026-08-14
- **Added**: 2026-08-14
- **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