---
title: "Tube Carousel — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Hoshine · Carousels. 3D animated icons in a cylinder"
canonical: "https://framer.elliotli.dev/component/tube-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Tube Carousel

# Tube Carousel

3D animated icons in a cylinder

[View on Framer](https://framer.com/marketplace/components/tube-carousel/?via=elliot-li)

![Tube Carousel preview image 1](https://framer.elliotli.dev/og/component/tube-carousel/e9d113e449b597b9/1600x1200.jpg)

## Summary

3D animated icons in a cylinder

## Description

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u4zig0tz-7sTcn45W7x2Z6r8yhTLbCuh2TxGNu4)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u4zig0tz-LnOICtP70jrcuYblKL6p7foMcWYzYp)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u4zig0tz-Hqgh2k5GcYujZXZwfcWPmBtDRTJOZz)

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #4353

## Details

- **Author**: Hoshine
- **Price**: $12.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-24
- **Added**: 2026-05-30
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow