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.
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
Hero section headlines
Dynamic logo treatments
Experimental typography sections
Interactive landing page text
