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

Open
Yeom-JinHo wants to merge 8 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6bc4de1
feat(magic-card): add orb mode with animated glow effect
Yeom-JinHo Jan 20, 2026
35c5cd0
refactor(magic-card): improve orb mode animation with spring-based op…
Yeom-JinHo Jan 20, 2026
336c883
feat(magic-card): add z-index layering and screen blend mode for orb …
Yeom-JinHo Jan 20, 2026
83491be
feat(magic-card): add theme-aware blend mode with SSR-safe theme dete…
Yeom-JinHo Jan 20, 2026
2c5a697
fix(magic-card): add suppressHydrationWarning and use background inst…
Yeom-JinHo Jan 20, 2026
72e9711
feat(magic-card): add orb mode example and update documentation
Yeom-JinHo Jan 20, 2026
ab792c7
docs(magic-card): improve props table formatting
Yeom-JinHo Jan 20, 2026
fc5e145
refactor(magic-card): use discriminated union for type-safe mode props
Yeom-JinHo Jan 20, 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 "@/registry/magicui/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
Loading