Text Rings
Rings of curved text that spin open onto your page.
A Pro component: the live demo and the code come with Pro.
Settings
Pro- speed
- hoverBoost
- rings
- texts
- exitDuration
What it does
Text Rings is a page transition ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called circular text intro, ring text loader or orbit text enter.
Rings of curved capitals turn slowly in opposite directions around a small Enter disc. Hovering spins them faster; a click folds them inward one by one and the page fades in. The page stays readable by screen readers, and reduced motion keeps the rings still.
With Pro
The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.