Design Engineering Tip
Make hover interactions respond to where the cursor actually comes from.
Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive.
const direction = getDirection(event, ref.current);
const variants = {
top: { y: 20 },
bottom: { y: -20 },
left: { x: 20 },
right: { x: -20 },
};
显示更多
