component
Path Ticker
By Ipshita Chatterjee

Details
- Ipshita ChatterjeeAuthor
- componentType
- 2026-08-27Published
- 2026-08-27Updated
- 2026-08-27Added
- InteractionsCategories
Summary
Ticker that flows in the path
Description
Turn any curve into a moving marquee. This component takes your text and glues it to a custom SVG path, then animates it into a smooth, seamless scrolling ticker. No more static banners, just fluid motion that follows the exact shape you draw. WHAT IT DOES - Paste in any SVG path and your text follows its shape - Loops endlessly with no visible seam or jump - Repeats your phrase with a customizable separator and spacing - Adjustable speed and direction (forward or backward) - Toggle a background band with matching stroke width, styled to sit right along the path FULLY CUSTOMIZABLE - Font family, weight, size, letter spacing - Text and background color - Number of repeats and gap between them - Path visibility toggle, handy while you're positioning your own path GREAT FOR - Scrolling announcement banners - Wavy hero section text - Decorative badges and stickers - Footer or section dividers with motion HOW TO USE 1. Draw or paste your path (SVG path data) 2. Drop in your text 3. Tune speed, size, and colors from the sidebar 4. Resize the frame to fit your path's proportions
Introduction
Ticker that flows in the path
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1086