Skip to content

Conversation

uixdimi
Copy link

@uixdimi uixdimi commented Oct 7, 2025

Hi there, first of all - amazing project!!

I used the Magic Card component and it's beautiful, but noticed slight deviation from the box of the normal card.

Digging deeper I realised the inset-px container messes up with the corner radius and the padding of the card. I'm attaching examples below. Blue is Card component rendered on top of red - which is Magic Card:

Another approach I randomly got from @kevin-powell and his video: https://youtu.be/8NfafU1BgaY?t=360 is using single-color gradients and it worked amazingly. It fixes the radius issue and the padding deviation.

Furthermore I added a few lines to the reset() function, which calculate where the exit was made and animate the glow so it exits from the same edge.

Current New
Screenshot 2025-10-07 at 11 40 12 Screenshot 2025-10-07 at 11 39 30
Group 17 Group 18
Untitled.2.mov
Untitled.mov

Copy link

vercel bot commented Oct 7, 2025

@uixdimi is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

@TheCoree
Copy link
Contributor

good work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants