"use client"
import { Camera, FileImage } from "lucide-react"
import { MagicWandContainer, MagicWandTile } from "@/components/ui/magic-wand"
export default function MagicWandDemo() {
return (
<div className="bg-[rgb(2,6,23)] h-screen overflow-hidden grid place-items-center">
<MagicWandContainer>
<MagicWandTile
image="https://cdn.21st.dev/assets/mirror/59/590cd32cbbbf1e93e76261b4a3494f896629c1438f5e36602ecbe7188aad929b.jpg"
icon={{
icon: Camera,
className: "text-[20vmin] text-white/20",
}}
className="rotate-3 z-[3]"
/>
<MagicWandTile
image="https://cdn.21st.dev/assets/mirror/01/015434ea33fd05fb89aaae647163c97fb24b88b5cbac7efd81530d7445327181.jpg"
icon={{
icon: FileImage,
className: "text-[12vmin] text-white/15",
}}
className="-rotate-2 z-[2] -ml-[10vmin]"
/>
<MagicWandTile
image="https://cdn.21st.dev/assets/mirror/77/770346b06915e3888822ee3fef0cbe8085171d29c40f96cbdf4102e3e93b04f1.jpg"
icon={{
className: "text-[20vmin] text-white/20",
}}
className="rotate-5 z-[1] -ml-[10vmin]"
/>
</MagicWandContainer>
</div>
)
}
Part of Voxlet UI — browse the full library on 21st.dev.