Text Path Color Ani

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