Kinetic Ribbon Text

3D circular text with motion

Kinetic Ribbon arranges each character of your text evenly around a 3D cylinder, creating a fluid, looping ribbon effect. It works entirely in CSS 3D — no canvas, no WebGL — keeping it lightweight and fully composable inside any Framer layout. Features Three animation modes: auto-spin, scroll-scrub, or combined Spring-smoothed scroll with tunable damping and stiffness Global tilt controls on all three axes (X, Y, Z) for cinematic framing Möbius-style ribbon twist along the ring Optional glow effect with a custom glow color Backface visibility toggle — solid cylinder or see-through Styled backface mode with independent opacity and blur Performance-safe: pauses when scrolled offscreen, respects prefers-reduced-motion Supports single text, multiple words with a custom separator, and repeat count Property Controls Content — Single string or an array of words joined by a separator; control trailing separator and repeat count Typography — Full Framer font picker (extended controls), text color, glow toggle and glow color 3D Layout — Radius, perspective, twist, facing direction (inward/outward), per-axis tilt (X/Y/Z), hide backface, backface opacity and blur Animation — Play mode (in-view or always), in-view threshold and margin, trigger (auto / scroll / both), direction, spin speed, scrub speed, scroll damping and stiffness Quick Start Drop Kinetic Ribbon onto your canvas. Set your text under Content → Text (single mode) or switch to Multiple and add words. Adjust Radius to scale the cylinder to your layout. Pick an animation mode — Auto + Scroll is a good default. Tweak Tilt X/Y/Z to frame the ribbon at the angle you want. Enable Add Glow under Typography for a neon look. Tips Increase Repeat Count to fill gaps in the ribbon at smaller font sizes. Set Facing to Inward for a tunnel/portal effect. A Twist value between 0.5–1.5 creates an organic Möbius strip look. Use Scroll Scrub mode only on long pages for dramatic parallax storytelling.

3D circular text with motion