Elevate your Framer website with an advanced, high-performance 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.
Description
The Tube Carousel is a professional-grade 3D WebGL component designed to capture attention. By combining custom GLSL shaders for glass refraction with a smooth, infinite particle-flow animation, it transforms static logos or icons into an immersive 3D experience. It is fully responsive and integrates directly with Framer’s native design tools.
Key Features
Smart Auto-Theming: Simply pick your Environment Background and Master Accent color. The component automatically calculates the perfect harmonic lighting—including key, fill, and rim lights—to match your brand identity perfectly.
Dual Display Modes: Choose between sleek rounded 3D cards or classic 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 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 icon stream begins.
Live Framer Variables: Fully supports Framer's color token system for seamless integration with your existing design system.
When to Use
Hero Sections: Make an unforgettable, premium first impression on your landing page.
Feature Showcases: Animate logos of your partners, crypto tokens, or product features in a unique, spatial layout.
Agency Portfolios: Demonstrate high-end WebGL capabilities to potential clients.
Web3 & Fintech Apps: Create an eye-catching visual experience that fits the modern crypto and finance aesthetic.
How to Use
Define Your Items: Add icons, logos, or coins to the "App Items" array in the property panel.
Assign Assets: For each item, choose between a direct URL or a local SVG file upload and set individual base/logo colors.
Refine Physics: Adjust the Flow Speed, Cylinder dimensions, and entrance animations to match your site's motion profile.
Theme It: Use the Global Theme controls to sync the 3D environment with your site’s primary accent color.
Customization Options
Global Theme: Show/Hide Background, Environment Color, and Master Accent color.
Surface Materials: Full control over cylinder roughness, metalness, Fresnel glow strength, glass opacity, blur, and refraction (IOR).
Geometry Setup: Adjust the radius, total height, center gap size, and wall thickness.
Transform Controls: Fine-tune the Pitch, Yaw, Roll, and Z-Distance to position the cylinder perfectly in your frame.
Animation & Flow: Toggle between "Fly In" or "Scale Up" entrance styles and precise flow speed control.
Icon Setup: Toggle between Card or Coin styles, adjust the scale of icons, and set the vertical item spacing.
Hoshine
