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
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
Trirong Phasukyued
