Add a touch of motion to your site with this spinning text component. Circular Text creates an engaging focal point that draws attention without overwhelming your design. Whether you need a rotating "Contact Us" stamp, a "Scroll Down" indicator, or just a decorative typographic element, it delivers smooth, performant animation with rich interactive capabilities.
Features
Continuous Rotation: Smooth infinite loop with customizable speed and direction.
Deep Interactivity: Choose from 5 distinct hover effects including "Speed Up", "Slow Down", "Pause", and the chaotic "Go Bonkers".
Precise Control: Independent controls for Text Circle Radius (visual spread) and Hit Area Size (interactive hit-area).
Typography Support: Full control over Font Size, Weight, and Letter Spacing.
Responsive-Readiness: Works seamlessly with Framer's layout tools.
Customisation Options
Content:
Text: The message to display in the ring.
Color: Fully customizable text color.
Geometry:
Hit Area Size: Defines the interactive diameter for hover triggers.
Text Circle Radius: Controls how far the text sits from the center.
Direction: Spin Clockwise or Counter-Clockwise.
Typography:
Font Size & Weight: standard text controls.
Letter Spacing: Fine-tune the gap between characters.
Motion:
Spin Duration: Set the speed of the rotation loop.
Hover Effect: Select the interactive behavior on mouseover.
Set up
Drag the component onto your canvas.
Edit the Text property to your desired message.
Adjust Text Radius to set how wide the text ring should be.
Set the Circle Size to define the invisible hover area (usually slightly larger than your text ring).
Tweak Font Size and Letter Spacing until the reading rhythm is perfect.
Choose your Hover Effect and hit Preview!
MotionIQ Studio
