Rotating Arc Text

Rotating Arc Text for Framer renders crisp, dynamic circular text along customizable vector paths.

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 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

Animated Orbital Typography