3D Cylinder Scroll — A 3D cylinder-shaped infinite scroll

A 3D cylinder-shaped infinite card scroll component powered by Three.js.It includes smooth scrolling and supports links on both images and videos.For detailed specifications, please refer to the Customizable Properties section.

Customizable Properties

1. Mode

   • Touch / MouseOptimized performance for both desktop and touch-based devices.

2. Theme

   • Dark / LightChoose between Dark and Light themes based on lighting conditions.

3. Items (Array)

   Add multiple items and assign links

   • Media Type: Image / Video

   • Poster Image for Video

   • Link

   • Open in New Tab

4. Aspect Ratio

   • 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 16:9, 9:16

5. 3D Scene

   • PerspectiveControls camera depth and perspective. Adjust scale via zoom in/out.

   • ColumnsNumber of items displayed per row.

   • GapSpacing between items.

6. Animation

   • Auto Rotation: Enabled / Disabled

   • Auto Rotation Speed

   • Preview in Editor: Enabled / Disabled

7. Interaction

   • Scroll Shader (Noise): Enabled / Disabled

   • Hover Shader (Noise): Enabled / Disabled

   • Hover Shader (Noise) Amount

8. Smooth Scrolling

   • Use Lenis: Enabled / Disabled

   • Amount