RibbonFlow 3D Text

RibbonFlow 3D Text renders your text as a continuous ribbon looping through 3D space.

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.

Animated 3D text ribbon