CylinderTextStack

3D Kinetic Cylinder Text

Overview 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. Key Features 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. How to Use 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.

3D Kinetic Cylinder Text