Magic Card Effect
Magic Card Effect is a button in the UI HUB buttons collection. A card with a radial gradient spotlight that follows the mouse cursor. Creates a premium 'magic' lighting effect that reveals depth beneath the card surface.
The component is driven by 5 documented props (className, gradientSize, gradientColor, gradientOpacity, children), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: onMouseMove event with rect-relative coordinates; CSS radial-gradient positioned at mouse; Configurable gradient size and color.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Magic Card Effect?
Mouse-tracking spotlight card with premium depth effect. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Magic Card Effect at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Magic Card Effect works
A card with a radial gradient spotlight that follows the mouse cursor. Creates a premium 'magic' lighting effect that reveals depth beneath the card surface.
Technical information for Magic Card Effect
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | CSS gradients |
| State change | flat card to mouse-tracked radial light reveal |
| Props | 5 configurable |
| Usage example | Included on this page |
What Magic Card Effect requires
- onMouseMove event with rect-relative coordinates
- CSS radial-gradient positioned at mouse
- Configurable gradient size and color
- Smooth transition on mouse leave
How to use Magic Card Effect
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <MagicCardEffect /> in your page using that import path.
- Pass any of the 5 documented props to change colours, density, speed or behaviour.
Magic Card Effect questions
What is Magic Card Effect?
Mouse-tracking spotlight card with premium depth effect. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Magic Card Effect work?
A card with a radial gradient spotlight that follows the mouse cursor. Creates a premium 'magic' lighting effect that reveals depth beneath the card surface.
Which category does Magic Card Effect belong to?
Magic Card Effect is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the className prop do in Magic Card Effect?
Additional CSS classes for the card container. It defaults to "".
What does the gradientSize prop do in Magic Card Effect?
Size of the radial gradient spotlight in pixels. It defaults to 200.
Is Magic Card Effect free to use?
Magic Card Effect is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Magic Card Effect use?
Magic Card Effect uses Framer Motion and is styled with Tailwind CSS.
What does Magic Card Effect need to run?
Magic Card Effect needs onMouseMove event with rect-relative coordinates, CSS radial-gradient positioned at mouse, Configurable gradient size and color and Smooth transition on mouse leave.