About Tube Carousel
Elevate your Framer website with a highly advanced 3D WebGL component. This interactive asset features a sleek, split cylinder with a realistic frosted glass center. Inside, a continuous stream of customizable 3D icons flows upward. Powered by Three.js and GSAP, it brings a premium, high-tech aesthetic to any landing page.
Key Features
Smart Auto-Theming: Simply pick your Environment Background and Master Accent color. The component automatically calculates the perfect harmonic lighting, including key lights, fill lights, and rim lights to match your site perfectly.
Cards or Coins: Choose between sleek rounded 3D cards or metallic coin shapes for your floating items.
Custom SVG Logos: Upload your own SVG files or use direct URLs to generate perfect 3D extruded logos for every single item in the stream.
Realistic Materials: Features advanced physical materials including frosted glass with controllable refraction (IOR), metallic cylinder surfaces, and custom Fresnel glow effects.
Dynamic Entrance Animations: Choose between a dramatic "Fly In" from the Z-axis or a smooth "Scale Up" entrance before the icons start flowing.
Live Framer Variables: Fully supports Framer's color token system for seamless integration with your existing design system.
Customization Options
Global Theme: Show Background, Environment Color, Accent Color.
Surface Materials: Full control over Cylinder Roughness and Metalness, Fresnel Strength and Rim Tint, Glass Opacity, Blur, Transmission, and Refraction.
Geometry Setup: Adjust the overall Radius, Height, Open Gap size, Wall Thickness, and Ring Thickness.
Transform & Distance: Pitch, Yaw, Roll, and Z-Distance controls to angle the tube exactly how you want it.
Animation & Flow: Entrance Style (Fly In or Scale Up) and Flow Speed.
Icons Setup: Toggle between Cards or Coins, set overall Scale, and adjust Item Spacing. Create up to 15 custom items with individual background and logo colors.
