Currency Carousel

Currency Carousel

About Currency Carousel

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.

How to Use

  1. Define Your Items: Add icons, logos, or coins to the "App Items" array in the property panel.

  2. Assign Assets: For each item, choose between a direct URL or a local SVG file upload and set individual base/logo colors.

  3. Refine Physics: Adjust the Flow Speed, Cylinder dimensions, and entrance animations to match your site's motion profile.

  4. 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.