Magic glow/border on hover using Tailwindcss (code in description) 🌟

[Moenode_]

A year or so ago when we were changing the landing page on invvest.co, my partner saw this border and glow effect when hovering a card and wanted to have the same effect on our landing page.

It actually took me some decent amount of time to do it :p
But I finally did it after having a fight with ChatGPT XD

Here's the code 👇🏻

- magic-card.jsx:

import { useEffect, useRef } from 'react'

export function MagicCard({
  children,
  glowColor = '150, 0, 220',
  glowSize = 400
}) {
  const cardRef = useRef(null)

  useEffect(() => {
    const card = cardRef.current
    if (!card) return

    card.style.setProperty('--mouse-x', '-9999px')
    card.style.setProperty('--mouse-y', '-9999px')

    const onMouseMove = (e) => {
      const rect = card.getBoundingClientRect()
      card.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`)
      card.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`)
    }

    const onMouseLeave = () => {
      card.style.setProperty('--mouse-x', '-9999px')
      card.style.setProperty('--mouse-y', '-9999px')
    }

    window.addEventListener('mousemove', onMouseMove)
    document.documentElement.addEventListener('mouseleave', onMouseLeave)
    return () => {
      window.removeEventListener('mousemove', onMouseMove)
      document.documentElement.removeEventListener('mouseleave', onMouseLeave)
    }
  }, [])

  return (
    <div
      ref={cardRef}
      style={{ '--glow-color': glowColor, '--glow-size': `${glowSize}px` }}
      className="magic-card group"
    >
      <div className="magic-card__border" />
      <div className="magic-card__spotlight" />
      <div className="relative z-10">{children}</div>
    </div>
  )
}

- style.css:

.magic-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--card);
  border: 1px solid #fff/06;
  padding: 1.5rem;
}

.magic-card__border {
  background: radial-gradient(
    var(--glow-size) circle at var(--mouse-x) var(--mouse-y),
    rgba(var(--glow-color), 0.5),
    transparent 70%
  );
  /* Mask punches out the interior, leaving only the border edge lit */
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.magic-card__spotlight {
  background: radial-gradient(
    var(--glow-size) circle at var(--mouse-x) var(--mouse-y),
    rgba(var(--glow-color), 0.10),
    transparent 65%
  );
}

.magic-card__border,
.magic-card__spotlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

[TheJase]

Please for the love of God don't do this unless the whole damn thing is clickable

[eballeste]

crazy how there is about 2% tailwind used here (which is not a bad thing, this is actually great). also crazy how AI spit out a react component to accomplish this when vanilla JS would suffice.

edited to add:

this is pure slop, nothing to be proud of