CircularText renders any string as a continuously rotating ring of letters — a design pattern common in portfolios, hero sections, product pages, and branded UI elements. The component is built for designers who want full control without touching code.
🔄 Rotation & speed Set the rotation speed in seconds per full revolution. Lower values spin faster. The component starts automatically and loops indefinitely.
🖱️ Hover interactions Choose from five on-hover behaviors: speed up, slow down, pause, or reverse the rotation — or leave it unchanged. For Speed up and Slow down, a separate Amount field appears (e.g. 2.5×) so you can dial in exactly how dramatic the effect is.
✋ Drag & Spin with physics Enable Drag & Spin and the component becomes fully interactive. Click and hold to take manual control, then drag in any direction to spin it. The rotation follows the angle of your cursor relative to the center — not just horizontal movement — so it feels natural whether you drag left, right, up, or in circles. 💫 Flick it fast and it carries that momentum forward, with exponential deceleration that gradually eases back to the configured base speed. Works on touch devices too.
🔤 Typography Uses Framer's native Font panel — pick any font, weight, and size the same way you would on a native text layer. No manual font name entry needed.
⚙️ Customization
💬 Text: any string, use characters like * or • as separators
📐 Size: overall diameter of the component
🎨 Color: single color for all letters
🔤 Font: family, weight, and size via native Framer font picker
⏱️ Speed: rotation duration in seconds
🖱️ On Hover: Nothing / Speed up / Slow down / Pause / Reverse
✖️ Amount: multiplier for speed-based hover effects (e.g. 2.5×)
✋ Drag & Spin: toggle physics-based manual interaction on or off
💡 Use cases Rotating badges and stamps , hero section decorations , "scroll down" or "available for work" rings , product labels, nav accents, loading indicators with personality and anywhere a looping text element adds motion without distraction.
