Hover Glow

보통

마우스 위치를 따라 발광 효과가 나타나는 인터랙션

#hover#glow#mouse

라이브 데모

Hover Me

코드

HoverGlow.tsx

export const HoverGlow = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setPosition({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
    });
  };

  return (
    <div
      className="hover-glow-box"
      onMouseMove={handleMouseMove}
      style={{
        '--mouse-x': `${position.x}px`,
        '--mouse-y': `${position.y}px`,
      } as React.CSSProperties}
    >
      Hover Me
    </div>
  );
};

effects.css

.hover-glow-box::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.8) 0%, transparent 70%);
  left: var(--mouse-x);
  top: var(--mouse-y);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.hover-glow-box:hover::before {
  opacity: 1;
}