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