CylinderTextStack
The Cylinder Text Stack is a visually striking 3D typographic component that creates a "rotating drum" effect. By breaking text into individual characters and mapping them onto a 3D cylinder, it ensures a seamless, tear-free loop that responds to user interaction with smooth spring-based physics.
True 3D Perspective: Built with preserve-3d for a realistic vanishing point and spatial depth.
Multi-Band Stacking: Create up to 5 independent bands, each with its own radius, speed, and direction.
Tear-Free Character Mapping: Each character is rendered individually to prevent the slicing/clipping bugs common in standard 3D CSS transforms.
Interactive Hover: Smoothly pauses on hover and resumes movement using Framer Motion’s spring physics.
Dynamic Backgrounds: High-fidelity background cylinders (72 faces) that provide solid backdrops for your text.
Texts & Bands: Input your strings in the Texts array. Use Band Count to determine how many rows are visible.
Radii & Speeds: Adjust the Radii to create stepped or tapered looks. Use negative values in Speeds to make bands rotate in opposite directions.
Layout Tuning: Use Rotate X/Y/Z and Perspective to set the viewing angle of the entire stack.
Styling: Customize fonts and colors for each band individually through the property controls.
Heyuhm
