---
title: "CylinderTextStack — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Heyuhm · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/cylindertextstack"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/CylinderTextStack

# CylinderTextStack

3D Kinetic Cylinder Text

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

![CylinderTextStack preview image 1](https://framer.elliotli.dev/og/component/cylindertextstack/b11089840719138f/1600x1200.jpg)

## Summary

3D Kinetic Cylinder Text

## Description

### Overview

The Cylinder Text Stack is a visually striking 3D typographic component that creates a "rotating drum" effect. By breaking text into individual characters and mapping them onto a 3D cylinder, it ensures a seamless, tear-free loop that responds to user interaction with smooth spring-based physics.

### Key Features

-   **True 3D Perspective:** Built with preserve-3d for a realistic vanishing point and spatial depth.
    
-   **Multi-Band Stacking:** Create up to 5 independent bands, each with its own radius, speed, and direction.
    
-   **Tear-Free Character Mapping:** Each character is rendered individually to prevent the slicing/clipping bugs common in standard 3D CSS transforms.
    
-   **Interactive Hover:** Smoothly pauses on hover and resumes movement using Framer Motion’s spring physics.
    
-   **Dynamic Backgrounds:** High-fidelity background cylinders (72 faces) that provide solid backdrops for your text.
    

### How to Use

1.  **Texts & Bands:** Input your strings in the Texts array. Use Band Count to determine how many rows are visible.
    
2.  **Radii & Speeds:** Adjust the Radii to create stepped or tapered looks. Use negative values in Speeds to make bands rotate in opposite directions.
    
3.  **Layout Tuning:** Use Rotate X/Y/Z and Perspective to set the viewing angle of the entire stack.
    
4.  **Styling:** Customize fonts and colors for each band individually through the property controls.
    

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

-   All · #7065

## Details

- **Author**: Heyuhm
- **Price**: $5.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-26
- **Added**: 2026-05-15
- **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