Flairspotlight

Spotlight

Radial light follows the cursor across a card.

move cursor

tap / hover to play

import { motion, useMotionValue, useMotionTemplate } from "framer-motion";

const mx = useMotionValue(50);
const my = useMotionValue(50);
const bg = useMotionTemplate`radial-gradient(160px circle at ${mx}% ${my}%, rgba(255,255,255,0.25), transparent 60%)`;

<motion.div
  onPointerMove={(e) => {
    const r = e.currentTarget.getBoundingClientRect();
    mx.set(((e.clientX - r.left) / r.width) * 100);
    my.set(((e.clientY - r.top) / r.height) * 100);
  }}
  style={{ backgroundImage: bg }}
/>