style(magic-card): Better corner radius handling & exit animations #819
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.Untitled.2.mov
Untitled.mov