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