3D Scroll Text Tube
Scroll Text Tube is an interactive 3D typography component that wraps words around a cylindrical surface and animates them with scroll-driven motion. As users scroll through the page, the tube rotates smoothly, revealing different words along the curved surface.
Instead of traditional static headings, this component transforms text into a dynamic visual element that feels immersive and futuristic. Words are arranged around a circular tube, creating depth and motion as the cylinder rotates in response to scroll.
Built using WebGL-powered rendering with Three.js, the component ensures smooth animation and crisp typography across different screen sizes. Text is rendered as high-resolution textures to maintain visual clarity while rotating in 3D space.
Designers can customize the tube radius, spacing between words, word width scaling, text tracking, and scroll speed to create different visual styles. The component also supports adjustable back-side opacity, allowing text facing away from the viewer to appear subtly visible or completely hidden.
For performance optimization, animation can optionally be disabled on mobile devices, rendering a static frame to reduce GPU usage while preserving the design.
Key Features
- Scroll-driven 3D text tube animation
- Words wrapped around a cylindrical surface
- Smooth scroll-based rotation with inertia
- High-quality WebGL rendering with Three.js
- Customizable tube radius and word spacing
- Adjustable letter spacing and word width scaling
- Control over back-side text opacity
- High-resolution text texture rendering
- Optional mobile performance optimization
- Fully customizable via Framer property controls
Where to Use
- Hero sections for creative websites
- AI or technology landing pages
- Experimental typography layouts
- Interactive brand storytelling
- Product launch pages
- Design portfolio showcases
Best For
- Designers building immersive Framer websites
- Creative studios exploring 3D typography
- Tech startups creating futuristic interfaces
- Interactive landing pages requiring scroll-driven visuals
- Websites focused on modern motion design
Refund Policy:
Due to the digital nature of my products, all sales are final, and refunds will not be issued. Please review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.
š ļø Support
If you have any issues, feel free to reach out:
š§ Email: framecraftlab@gmail.com
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.