---
title: "Text Path Color Ani — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Trirong Phasukyued · Text. Animated Multicolor Text Outlines"
canonical: "https://framer.elliotli.dev/component/text-path-color-ani"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Path Color Ani

# Text Path Color Ani

Animated Multicolor Text Outlines

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

![Text Path Color Ani preview image 1](https://framer.elliotli.dev/og/component/text-path-color-ani/308bf5cc20196ab0/1600x1200.jpg)

## Summary

Animated Multicolor Text Outlines

## Description

Turn a plain headline into kinetic type. **Text Path Color** renders your word as a stack of stroke-only outlines — one per color — and animates the dash offset so a train of colored segments **chases around the letterforms**. The SVG measures your text and auto-fits it to the frame you draw, so it looks identical on the Framer canvas, in preview, and when published — at any size. Type your word, pick a palette (up to 12 colors), tune the dash pattern, speed and direction, and it just works. Self-contained: pure SVG + CSS, nothing to host, no packages to add.

**Features:**

-   Animated **multicolor stroke outlines** — colored dashes travel around the glyphs
    
-   **Auto-fit sizing** — the text scales to whatever frame you draw (canvas = preview = published), so no fiddly font-size guessing
    
-   Editable **palette of up to 12 colors** — each color is one moving dash; add/remove colors to change the rhythm
    
-   Full control over the **dash pattern** (trail + gap), **speed**, and **direction** (forward / reverse), plus a **Paused** toggle for a still poster
    
-   Optional **neon glow** — a soft per-color glow that chases along with the dashes; set one glow color or let each color glow in its own hue
    
-   **Native Framer font picker** (family + weight) + **stroke width / padding / background** controls
    
-   Respects \*prefers-reduced-motion\*\* — colored outlines render statically for visitors who ask for reduced motion
    
-   **Multi-instance safe** — each copy scopes its own keyframe (no collisions)
    
-   Screen-reader friendly role="img" + aria-label)
    
-   Self-contained — only framer + react, no libraries, nothing to install
    
-   16 property controls — designed for non-coders
    

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

-   All · #9446

## Details

- **Author**: Trirong Phasukyued
- **Price**: $10.00
- **Published**: 2026-07-03
- **Updated**: 2026-07-03
- **Added**: 2026-07-03
- **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