Text Path Color Ani

Animated Multicolor Text Outlines

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

Animated Multicolor Text Outlines