Type set around a circle, where the only thing an author writes is the words. Everything else is solved. A lap is one segment -- the phrase plus its separator -- repeated a whole number of times, so the glyphs total n times the segment and there are n times as many gaps between them; closing the ring means those two add up to the circumference, which makes the gap a closed form in the repeat count rather than something to search for. The count that fits the most repeats while still honouring the narrowest gap the author allows falls out in one step. That matters beyond elegance: the reference behaviour walks the count down until the gap is wide enough and then back up while it is too wide, re-measuring the whole repeated string on every pass, and it does that inside the render. Here it is arithmetic on numbers already in hand. The widths come from the font the browser will actually paint with -- the element's computed weight, size and full family stack, not a family name parsed out of a prop -- and the ring re-fits when the page's fonts finish loading and whenever the stage resizes, because a lap solved against the wrong metrics is a lap with a hole in it. Every glyph is one absolutely positioned span placed at its own angle and rotated to stand on the curve, so the text stays selectable, searchable and readable to a screen reader instead of being baked into a canvas. The turn is integrated from elapsed time rather than read off the clock, so a backgrounded tab resumes where it left off instead of jumping. The pointer response is a choice of four: wind the ring up to a faster turn, stop it dead, scale it, or ignore the pointer entirely -- and the scale is a real spring integrated in the same frame loop, not a CSS transition and not an animation library. Off-screen, in a hidden tab, or under a reduced-motion preference the loop stops entirely rather than turning a ring nobody is watching. Words, separator, ring size, type size, weight, narrowest gap, ink and background colour, seconds per turn, start delay, direction and the whole pointer response are editable, and the export is one self-contained HTML file that fetches nothing at all -- no script, no stylesheet and, deliberately, no font.
In collections: Text Animations & Kinetic Typography
Guide: Text Reveal Effects: Keep the Message Understandable Without Motion· Rotating Headline Text: Write a Sentence That Still Works When It Stops· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Effect · HTML / CSS / JS · All tools