Kinetic UI | The Creative Motion Component Library

3D Cylinder Marquee

Framer Motion

Animation library

Tailwind CSS

Utility-first styling

React

Server Components

Layouts

Responsive design

TypeScript

Type safety

3D CSS

Hardware accelerated

Next.js

App Router

Performance

Lightning fast

Clean Code

Maintainable

Installation

npx kinetic-ui-cli@latest add cylinder-marquee

Usage

import { CylinderMarquee } from "@/components/creative/cylinder-marquee";

export default function Page() {
  const cards = [
    <div key="1" className="bg-zinc-900 p-8 rounded-xl text-white">Item 1</div>,
    <div key="2" className="bg-zinc-900 p-8 rounded-xl text-white">Item 2</div>,
    // Add enough items to form a ring (usually 6-12)
  ];

  return (
    <div style={{ perspective: "1000px" }}>
      <CylinderMarquee 
        items={cards}
        itemWidth={250}
        itemHeight={300}
        speed={20}
      />
    </div>
  );
}

How it works

This component relies entirely on native CSS 3D transforms (transform-style: preserve-3d) and avoids heavy JavaScript frame loops.

Math Calculation: It automatically calculates the correct translateZ distance needed to push items outward into a perfect circle based on the itemWidth and the total number of items: radius = (width / 2) / tan(π / count).
Radial Distribution: Each item is rotated around the Y-axis (rotateY) by a fraction of 360 degrees (e.g., if there are 10 items, they are rotated by 0°, 36°, 72°, etc).
Carousel Rotation: The parent container uses Framer Motion to continuously animate its own rotateY from 0 to 360 degrees over time, causing the entire rigid 3D structure to spin like a Ferris wheel.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CylinderMarquee } from "@/components/creative/cylinder-marquee";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CylinderMarquee } from "@/components/creative/cylinder-marquee";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CylinderMarquee
        items{/* value */}
        itemWidth{10}
        itemHeight{10}
      />
    </div>
  );
}

Frequently Used With