---
title: "Kinetic Ribbon Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Evixel Studio · Text. 3D circular text with motion"
canonical: "https://framer.elliotli.dev/component/kinetic-ribbon-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Kinetic Ribbon Text

# Kinetic Ribbon Text

Kinetic 3D circular text ribbon

[View on Framer](https://framer.com/marketplace/components/kinetic-ribbon-text/?via=elliot-li)

![Kinetic Ribbon Text preview image 1](https://framer.elliotli.dev/og/component/kinetic-ribbon-text/f5877cb12addf5ec/1600x1200.jpg)

## Summary

3D circular text with motion

## Description

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

1.  Drop Kinetic Ribbon onto your canvas.
    
2.  Set your text under **Content → Text** (single mode) or switch to **Multiple** and add words.
    
3.  Adjust **Radius** to scale the cylinder to your layout.
    
4.  Pick an animation mode — _Auto + Scroll_ is a good default.
    
5.  Tweak **Tilt X/Y/Z** to frame the ribbon at the angle you want.
    
6.  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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7299

## Details

- **Author**: Evixel Studio
- **Price**: $5.00
- **Published**: 2026-05-26
- **Updated**: 2026-09-19
- **Added**: 2026-05-16
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing