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