Magic Wand

Galleries 43

About

Here is magic wand component

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

Code

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

Usage.tsx

"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>
    )
}