Tube Type - 3D Text

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

🔧 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