component
Rotating Text 3D
By Karim Saif

Details
- Karim SaifAuthor
- componentType
- $5.00Price
- 2026-07-24Published
- 2026-07-24Updated
- 2026-07-24Added
- TextCategories
Summary
High-performance 3D typography
Description
About Rotating Text is an interactive, high-performance 3D typography engine that wraps dynamic text along fully customisable spatial paths in real time. Featuring dual-pass depth occlusion, vector-crisp letter rendering, perspective-aware scale and opacity attenuation, and an integrated central media container, it brings immersive cinematic typography to modern web layouts and hero sections. Preview: What it does True 3D Geometry & Dual-Pass Depth: Splitting render trees into front and back depth layers allows text to dynamically orbit around any central media element, subject image, or 3D object without z-index clipping. Vector-Crisp Typography Engine: Renders sharp vector glyphs with exact DOM transformations rather than pixelated canvas textures, keeping letters crisp at all DPR scales. Multiple Path Engines & Curves: Offers full parametric control over 8 distinct geometric shapes—including Ellipses, Circles, Rounded Rectangles, Polygons, Infinity loops, and Custom SVG Path Data. What you can customize Everything is fully configurable directly from Framer’s right-hand property panel: Text & Typography: Customize input strings, text transformations ( uppercase, lowercase, capitalize ), font family, font weight, size, color, and character spacing. Path Geometry & Curves: Switch between 8 geometric path engines, adjust radii, aspect ratios, corner radii, polygon side counts, or paste any custom SVG path string. 3D Rotation & Perspective: Independently control 3D rotation along X, Y, and Z axes, adjust camera perspective depth, set minimum rear opacity, or toggle the "Face Camera" orientation mode. Animation & Motion: Tune rotation speed, reverse direction ( clockwise / counterclockwise ), adjust initial path offset, or toggle auto-scaling based on component bounds. Need help? Have questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0 .
Introduction
High-performance 3D typography
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #5241