Text Loop

A phrase riding a curve forever, on a ribbon you can shape, colour and slow down.

About this tool

Type set on a path and walked along it forever, the way a brand mark loops on a hoodie sleeve or a launch page footer. The seam is the whole problem: one run of text sliding along a curve leaves a gap behind it that crosses the frame once per lap, so a second copy is held exactly one path length away and fills it -- the loop has no start and no end to catch the eye on. How many copies it takes is measured, not guessed: the phrase is laid out in the same face, at the same size and tracking, and the answer is remeasured when a web font lands, because a count assumed from character length is wrong by whatever the fallback face differs by. Five curves ship -- wave, circle, infinity, arch and line -- each generated from its own equation and sized so the ribbon it is stroked on stays inside the frame instead of being clipped by the edge, with the open ones deliberately overhanging so their stroke caps fall out of shot. One dial bends all five without changing what they are: the wave gains amplitude, never extra crests. Or hand it an SVG path of your own. Every control is paint or an attribute -- the type, the colours and the ribbon all travel as custom properties -- so nothing you drag rebuilds the mark or restarts the lap, and a re-measure rescales the phase instead of snapping the text back to the top of the curve. Pause on hover, run it in reverse, or set the speed to zero for a static lockup; reduced motion stops it outright. Edit it, then export one self-contained HTML file with no dependencies.

In collections: Text Animations & Kinetic Typography

Guide: Rotating Headline Text: Write a Sentence That Still Works When It Stops Text Reveal Effects: Keep the Message Understandable Without Motion HTML Marquee Is Deprecated: How to Build a Modern Marquee

UI/UX · HTML / CSS All tools

Curve

Curviness %

Custom path

Ribbon

Show ribbon

Ribbon colour

#ffffff

Ribbon width px

Type

Phrase

Separator

Uppercase

Font size px

Font weight

Letter spacing px

Text colour

#ffffff

Motion

Speed /s

Direction

forward reverse

Pause on hover

Stage

Stage colour

#ffffff