Tube Type - 3D Text — 3D looping tube animation for text

Tube Type turns any text into a looping 3D tube animation made with Framer Motion. Each letter is duplicated in multiple lines and animated in depth to create a cylindrical “tube” effect, as if your text were rotating in 3D space. Ideal for bold hero titles, kinetic typography, and experimental layouts.

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

• Duration and stagger between letters for smooth or snappy motion

• Tube radius and number of lines to define how “thick” the tube looks

• Custom font, size, and color to match your project

• Preview toggle to freeze the animation while designing on the canvas

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

🔧 Props / Controls

• Text: Set your custom text content

• 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 canvasUse cases

• Hero section headlines

• Dynamic logo treatments

• Experimental typography sections

• Interactive landing page text