Rotating Arc Text for Framer renders crisp, dynamic circular text along customizable vector paths. Designed specifically for high-performance web builds, the component calculates individual character coordinates and tangent angles directly in SVG space—eliminating heavy WebGL dependencies, CSS keyframe bloat, or canvas artifacts.
Equipped with frame-delta motion smoothing, interactive hover behaviors (pause or speed boost), and built-in static renderer protection, it delivers fluid typography animation while remaining CPU-efficient and fully responsive across all screen sizes.
Key Features
Smooth Orbital Motion: Driven by a smooth requestAnimationFrame loop with delta-time calculations for fluid rotation across varying screen refresh rates.
Interactive Hover Dynamics: Toggle hover interactions to automatically pause rotation or apply configurable speed boosts (up to 300%).
Configurable Arc Geometry: Fine-tune radius (30px to 135px), arc sweep (1° to 360°), and start angles (-360° to 360°) to fit subtle curves or complete circles.
Pure SVG Precision: Renders individual <text> nodes tangent to the curve, ensuring crisp text rendering without transform distortion.
Complete Typographic Control: Customize font families, weights (300 to 900), font sizes, letter spacing (-10px to 40px), color, text casing, and path flipping.
Static Renderer Safety: Built-in SSR and static renderer detection automatically disables continuous animation loops during canvas editing and server static exports.
Ideal Use Cases
Spinning Brand Badges: Create continuous rotating seals, agency stamps, and circular hero section emblems.
Support & Feedback
Have questions, feature requests, or feedback? Reach out anytime:
Email: karimsaif010@gmail.com
X (Twitter): @Karim Saif
Rotating Arc Text for Framer renders crisp, dynamic circular text along customizable vector paths. Designed specifically for high-performance web builds, the component calculates individual character coordinates and tangent angles directly in SVG space—eliminating heavy WebGL dependencies, CSS keyframe bloat, or canvas artifacts.
Equipped with frame-delta motion smoothing, interactive hover behaviors (pause or speed boost), and built-in static renderer protection, it delivers fluid typography animation while remaining CPU-efficient and fully responsive across all screen sizes.
Key Features
Smooth Orbital Motion: Driven by a smooth requestAnimationFrame loop with delta-time calculations for fluid rotation across varying screen refresh rates.
Interactive Hover Dynamics: Toggle hover interactions to automatically pause rotation or apply configurable speed boosts (up to 300%).
Configurable Arc Geometry: Fine-tune radius (30px to 135px), arc sweep (1° to 360°), and start angles (-360° to 360°) to fit subtle curves or complete circles.
Pure SVG Precision: Renders individual <text> nodes tangent to the curve, ensuring crisp text rendering without transform distortion.
Complete Typographic Control: Customize font families, weights (300 to 900), font sizes, letter spacing (-10px to 40px), color, text casing, and path flipping.
Static Renderer Safety: Built-in SSR and static renderer detection automatically disables continuous animation loops during canvas editing and server static exports.
Ideal Use Cases
Spinning Brand Badges: Create continuous rotating seals, agency stamps, and circular hero section emblems.
Support & Feedback
Have questions, feature requests, or feedback? Reach out anytime:
Email: karimsaif010@gmail.com
X (Twitter): @Karim Saif
