Skip to content

feat(magicCard): extend with optional orb glow layer #880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yeom-JinHo merged 15 commits into from
Mar 11, 2026
Merged

feat(magicCard): extend with optional orb glow layer #880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3f3b46c
feat(magic-card): add orb mode with animated glow effect
Yeom-JinHo Jan 20, 2026
8868e7b
refactor(magic-card): improve orb mode animation with spring-based op…
Yeom-JinHo Jan 20, 2026
e4ac7a7
feat(magic-card): add z-index layering and screen blend mode for orb …
Yeom-JinHo Jan 20, 2026
b5ae7dd
feat(magic-card): add theme-aware blend mode with SSR-safe theme dete…
Yeom-JinHo Jan 20, 2026
9007acf
fix(magic-card): add suppressHydrationWarning and use background inst…
Yeom-JinHo Jan 20, 2026
513b925
feat(magic-card): add orb mode example and update documentation
Yeom-JinHo Jan 20, 2026
4c310a7
docs(magic-card): improve props table formatting
Yeom-JinHo Jan 20, 2026
b4e177b
refactor(magic-card): use discriminated union for type-safe mode props
Yeom-JinHo Jan 20, 2026
3c345c1
fix(registry): add missing next-themes dependency for magic-card
Yeom-JinHo Mar 2, 2026
a50109c
fix(magic-card): ensure orb glow layer is visible with valid z-index
Yeom-JinHo Mar 2, 2026
361c44e
fix(magic-card-demo2): use registry import for AvatarCircles
Yeom-JinHo Mar 3, 2026
98178a8
refactor(magic-card-demo2): replace Icons.gitHub with inline SVG
Yeom-JinHo Mar 3, 2026
59f8368
Merge branch 'main' of https://github.com/Yeom-JinHo/magicui into fea…
Yeom-JinHo Mar 4, 2026
0c553de
Merge branch 'main' of https://github.com/Yeom-JinHo/magicui into fea…
Yeom-JinHo Mar 6, 2026
7b9fa74
chore: regenerate registry build artifacts
Yeom-JinHo Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 23 additions & 10 deletions apps/www/content/docs/components/magic-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Magic Card
date: 2024-07-07
description: A spotlight effect that follows your mouse cursor and highlights borders on hover.
author: dillionverma
author: dillionverma, Yeom-JinHo
published: true
---

Expand Down Expand Up @@ -40,6 +40,12 @@ npx shadcn@latest add @magicui/magic-card

</Tabs>

## Examples

### Orb

<ComponentPreview name="magic-card-demo-2" />

## Usage

```tsx showLineNumbers
Expand All @@ -59,12 +65,19 @@ import { MagicCard } from "@/components/ui/magic-card"

### MagicCard

| Prop name | Type | Default | Description |
| ----------------- | ----------------- | --------- | ------------------------------------------- |
| `children` | `React.ReactNode` | `-` | The content to be rendered inside the card |
| `className` | `string` | `-` | Additional CSS classes to apply to the card |
| `gradientSize` | `number` | `200` | Size of the gradient effect |
| `gradientColor` | `string` | `#262626` | Color of the gradient effect |
| `gradientOpacity` | `number` | `0.8` | Opacity of the gradient effect |
| `gradientFrom` | `string` | `#9E7AFF` | Start color of the gradient border |
| `gradientTo` | `string` | `#FE8BBB` | End color of the gradient border |
| Prop name | Type | Default | Description |
| ----------------- | --------------------- | ------------ | -------------------------------------------------- |
| `children` | `React.ReactNode` | `-` | The content to be rendered inside the card |
| `className` | `string` | `-` | Additional CSS classes to apply to the card |
| `mode` | `"gradient" \| "orb"` | `"gradient"` | Display mode: gradient or orb effect |
| `gradientSize` | `number` | `200` | Size of the gradient effect |
| `gradientColor` | `string` | `#262626` | Color of the gradient effect |
| `gradientOpacity` | `number` | `0.8` | Opacity of the gradient effect |
| `gradientFrom` | `string` | `#9E7AFF` | Start color of the gradient border |
| `gradientTo` | `string` | `#FE8BBB` | End color of the gradient border |
| `glowFrom` | `string` | `#ee4f27` | Start color of the orb glow effect (orb mode only) |
| `glowTo` | `string` | `#6b21ef` | End color of the orb glow effect (orb mode only) |
| `glowAngle` | `number` | `90` | Angle of the orb glow gradient (orb mode only) |
| `glowSize` | `number` | `420` | Size of the orb glow effect (orb mode only) |
| `glowBlur` | `number` | `60` | Blur amount of the orb glow effect (orb mode only) |
| `glowOpacity` | `number` | `0.9` | Opacity of the orb glow effect (orb mode only) |
Loading