Vibeset

Orbiting text

A rotating badge or a wavy ribbon with the brand tagline. The text sits on an SVG path and moves along it in a loop. The hard part is making the seam invisible, and it is solved by measuring, not assuming: one copy of the text is measured and repeated until it fills the path, so another typeface or a longer phrase redoes the sums on its own. On the circle, the text is stretched to the circumference and the whole group rotates, because text on a closed path does not wrap by itself. On the wave the start of the text moves from 0 to one copy and back to 0, the same trick as the logo ribbon folded onto a curve (the curviness, from 0 to 20, sets how much it rises and falls: at 0 it is a straight ribbon). A single requestAnimationFrame drives it with the real time between frames, and it is an image with its aria-label so a reader reads it once, whole.

And the React Bits original: Text Loop

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Text Loop, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a rotating badge or a ribbon with the brand tagline. Short: one sentence, not a paragraph.

Watch out for

It depends on GSAP, which is not MIT but GreenSock's "Standard no charge" licence: free, but with conditions MIT does not have. Read it before putting it in a paid product.

Accessibility

Seven aria signals and reduced motion. Check what a screen reader announces when the text runs along a curve.