3D Scroll Text Tube: Free Typography Component by Frame Craft

Scroll Text Tube is a scroll driven 3D typography effect that wraps words around a cylindrical surface. As users scroll, the tube rotates smoothly, revealing text with depth and motion for immersive Framer website experiences.

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 appear 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 so text facing away from the viewer can 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.