About RibbonFlow 3D Text
RibbonFlow 3D Text renders your text as a continuous ribbon looping through 3D space. Built with SVG and Framer Motion, it runs smooth 60fps animations with zero external dependencies beyond what Framer already includes.
Features
Single or multiple text mode with a custom separator and repeat count
Auto-spin, scroll-scrub, in-view trigger, or combined animation modes
Twist control morphs the ribbon from a flat ring into a torus knot shape
Depth fade and depth scale give a genuine 3D perspective to each character
Responsive — works in fixed, fill, and relative Framer layout modes
Property Controls
Content — mode (single/multiple), text input, separator, trailing separator toggle, repeat count
Font — full Framer font picker.
Text Color — color picker
Background — toggle on/off; when on, exposes BG color and BG radius
Ribbon Shape — radius (10–100%), tube size, twist amount, perspective depth
Appearance — depth fade, depth scale, min opacity, glow toggle and glow size
Animation — trigger mode, direction, spin speed, scrub speed, scroll damping and stiffness
Quick Start
Drag RibbonFlow 3D Text Component onto your canvas — it drops in at 600×600.
Open the Content panel and type your text.
Adjust Radius and Tube Size under Ribbon Shape to fit your layout.
Set Animation trigger to "In View" for scroll-aware pages, or "Always Play" for hero sections.
