Animations3D Image Ring

3D Image Ring

A rotating ring of images that you can drag to spin, perfect for logos, avatars, or featured items.

Installation

$ npx @nehal712521/inprogress add 3d-image-ring

Requires: framer-motion

Preview

Usage

import { ThreeDImageRing } from "@/components/ui/ThreeDImageRing";

const logos = [
  "https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?auto=format&fit=crop&w=400&q=80",
  "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=400&q=80",
  "https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=400&q=80",
  "https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=400&q=80",
];

export default function Example() {
  return (
    <div className="relative h-64 bg-black">
      <ThreeDImageRing images={logos} backgroundColor="transparent" />
    </div>
  );
}