---
title: "Wavy Text Marquee — Free Framer component · Best of Framer"
description: "Free Framer component · by Evixel Studio · Text. Kinetic wave text with 3D distortion"
canonical: "https://framer.elliotli.dev/component/wavy-text-marquee"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Wavy Text Marquee

# Wavy Text Marquee

Interactive wavy text marquee

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

![Wavy Text Marquee preview image 1](https://framer.elliotli.dev/og/component/wavy-text-marquee/75c10df278557464/1600x1200.jpg)

## Summary

Kinetic wave text with 3D distortion

## Description

Wavy Marquee is a Framer code component that turns text into a looping, per-character animated marquee. It scrolls horizontally while each glyph moves through a wave. Use it for hero headlines, tickers, dividers, and creative text sections.

-   **Key Features**
    
    -   Six wave types: Sine, Triangle, Smooth, Elastic, Bounce, Chaos.
        
    -   Per-character distortion: vertical, horizontal, scale, rotation, skew, 3D, opacity, color shift, blur.
        
    -   Scroll controls: speed, direction, hover pause/slow/reverse.
        
    -   Pointer interaction: repel or attract.
        
    -   Edge fade, separator, gap, padding, uppercase, auto-sizing, emoji-safe text.
        
    -   Accessible hidden text, static canvas/export rendering, reduced-motion support, offscreen pause.
        
    
    ### **Property Controls**
    
    -   **Text:** multiline string.
        
    -   **Font:** extended Framer font control.
        
    -   **Appearance:** text color, background, case, edge fade.
        
    -   **Layout:** gap, separator, padding Y, overflow (Contain/Bleed).
        
    -   **Scroll:** speed, direction, hover effect, hover speed, smoothing.
        
    -   **Wave:** type, amplitude, wavelength, speed, follows hover.
        
    -   **Distortion:** intensity + toggles for vertical, horizontal, scale, rotation, skew, 3D, opacity, color shift, blur.
        
    -   **Pointer:** effect (None/Repel/Attract), radius, strength.
        
    -   **Advanced:** respect reduced motion, pause offscreen.
        
    
    ### **Quick Start**
    
    1.  Add **Wavy Marquee** to the canvas, enter your text, and choose a font/color.
        
    2.  Set **Scroll** speed/direction, then choose a **Wave** type and tune amplitude/wavelength.
        
    3.  Optional: enable **Distortion** toggles, hover behavior, or **Pointer** repel/attract. Place full-width; height auto-adjusts.
        

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

-   All · #5808

## Details

- **Author**: Evixel Studio
- **Published**: 2026-01-27
- **Updated**: 2026-09-19
- **Added**: 2026-01-11
- **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