---
title: "Tube Type - 3D Text  — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Quentin Hocdé · Text. 3D looping tube animation for text"
canonical: "https://framer.elliotli.dev/component/tube-type-3d-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Tube Type - 3D Text

# Tube Type - 3D Text

3D looping tube animation for text

[View on Framer](https://framer.com/marketplace/components/tube-type-3d-text/?via=elliot-li)

![Tube Type - 3D Text  preview image 1](https://framer.elliotli.dev/og/component/tube-type-3d-text/f4368ab04d3071ae/1600x1200.jpg)

## Summary

3D looping tube animation for text

## Description

Tube Type turns any text into a looping 3D tube animation powered by Framer Motion. Each character is duplicated across multiple lines and animated in depth to create a cylindrical tube effect, as if your text were rotating in 3D space. Perfect for bold hero titles, kinetic typography, and experimental layouts.

**You can fully control the animation timing and look directly from the right panel ✨**

And now you can also drive the animation with scroll, using Framer’s scroll‑driven animations for even more immersive layouts.

### Key Features

-   **Looping 3D Tube Effect** – Duplicates each character in depth to form a continuous rotating tube of text.
    
-   **Scroll‑Driven Motion** – Sync the tube animation with scroll position to create interactive, narrative sections.
    
-   **Fine-Tuned Animation Controls** – Adjust duration, stagger, tube radius, line count, and direction right from the props.
    
-   **Accessible, Selectable Text** – Renders as a simple text, so content stays readable, copy-pastable, and SEO‑friendly.
    
-   **Design-Friendly Preview Mode** – Freeze the animation while you design so you can position and align your layout precisely.
    
-   **Flexible Typography System** – Use any font from your project with custom size and color to match your visual identity.
    

Drop it into your page, type your copy, tweak the props, and you get a unique, eye‑catching text effect in seconds—no extra code needed._All components settings_

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ojncpts0-zgd3V3O0nKh5XxAI3ucORwfpCl1ILr)

🔧 Props / Controls

-   Text: Set your custom text content
    
-   Reverse: Toggle to invert the tube animation direction (false : bottom to top, true : top to bottom)
    
-   Scroll Driven: Enable scroll‑driven animation so the tube reacts to the user’s scroll position
    
-   Duration: Control the loop speed of the tube animation
    
-   Stagger: Offset the animation between each character
    
-   Tube Radius: Adjust the depth and curvature of the tube
    
-   Lines Count: Number of layered lines that build the tube
    
-   Font: Use any font from your project
    
-   Color: Text color
    
-   Preview: Freeze animation for easier placement on the canvas
    

### Best For

-   Hero section headlines
    
-   Dynamic logo treatments
    
-   Experimental typography sections
    
-   Interactive landing page text
    

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

-   All · #9118

## Details

- **Author**: Quentin Hocdé
- **Price**: $5.00
- **Published**: 2026-02-16
- **Updated**: 2026-03-12
- **Added**: 2026-02-08
- **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