Cylinder3D Ring

Component 24

About

Interactive 3D cylindrical image ring with smooth GSAP inertial tilt and continuous rotation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cylinder3D Ring to your project and fits it to your theme.

Code

How Cylinder3D Ring is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Cylinder3DRing from "@/components/ui/cylinder3-d-ring";

export default function Page() {
    return (
        <main className="min-h-screen w-full flex items-center justify-center bg-stone-100 dark:bg-stone-950 p-4 sm:p-6 md:p-8 transition-colors duration-300">
            <div className="w-full max-w-3xl">
                <Cylinder3DRing />
            </div>
        </main>
    );
}