Cylinders

An interactive isometric illustration of a database as three stacked disks, where moving the pointer up and down parts the stack and highlights the picked disk.

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

import Cylinders from "@/components/ui/cylinders";

export default function CylindersDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <Cylinders intensity={0.6} className="w-full max-w-md" />
    </div>
  );
}