Hover Reveal Nav

Navigation links are usually plain text, but with a little motion design we can make them far more engaging. In this effect, hovering over each nav item reveals a floating image that smoothly follows your cursor.

Core Idea

• Each nav item has a label (text) and a corresponding image.
• When the user hovers over a label, we show its image near the cursor.
• Using `framer-motion`, the image follows the cursor smoothly instead of sticking rigidly.

Steps to Build It

• Set up a list of nav items with labels and images.
• Track hover state with `useState` and cursor position with `useMotionValue`.
• Apply `useSpring` to motion values for smooth image movement.
• Render the hovered image using `AnimatePresence` for clean mounting/unmounting animations.
• Style it with Tailwind to keep the layout centered and minimal.

Key Code Snippet

const [hovered, setHovered] = useState(null)
const x = useMotionValue(0)
const y = useMotionValue(0)
const springX = useSpring(x, { stiffness: 200, damping: 40 })
const springY = useSpring(y, { stiffness: 200, damping: 40 })

<motion.img
  src={navItems[hovered].img}
  style={{ x: springX, y: springY, translateX: '-100%', translateY: '-100%' }}
  initial={{ scale: 0.8, rotate: hovered % 2 === 0 ? -12 : 12 }}
  animate={{ scale: 1, rotate: 0 }}
  exit={{ opacity: 0, scale: 0.6 }}
/>

Result

Now you have an interactive nav with images that appear on hover and elegantly follow the cursor. A small detail like this adds personality and memorability to your UI.