Rotating Arc Text

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