Magic Wand
An interactive Magic Wand effect that follows the cursor, animating a floating wand and revealing images within tiles as the cursor moves.
Installation
Install this component and its dependencies with a single command.
npx shadcn@latest add https://ui.voxletstudio.com//r/magic-wand.jsonOnce your project registers the @voxlet namespace, this also works: npx shadcn@latest add @voxlet/magic-wand
Props
MagicWandContainerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Elements that will be wrapped by the magic wand effect. |
| className | string | undefined | Custom class names for additional styling of the container. |
| wandClassName | string | undefined | Custom class names for additional styling of the floating wand. |
MagicWandTileProps
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | - | The source URL of the image to be revealed. |
| icon | LucideIcon | IconConfig | undefined | Lucide icon or an object with an icon and optional className. |
| className | string | undefined | Optional class names for styling the tile. |
IconConfig
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | LucideIcon | undefined | Lucide icon component. |
| className | string | undefined | Optional class names for styling the icon. |