Great UI Image Hover Reveal

Component 27

About

A dual-image avatar surface implementing directional hover reveals and cursor coordinate tracking spring slices.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Great UI Image Hover Reveal to your project and fits it to your theme.

Code

How Great UI Image Hover Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import ImageHoverReveal from "@/components/ui/great-ui-image-hover-reveal"

export default function ImageHoverRevealPreview() {
  const sharedSrc = "https://cdn.21st.dev/assets/mirror/fe/fe35b7d136fb965eddcc4606ac25c55bf19bb5cd90ef573c049537b449836b0b.jpg"
  const ghibliOverlay = "https://cdn.21st.dev/assets/mirror/a4/a49f72de98a9669357bdacf19331c9a48ea75a2ffa2f9e353358c2dd7ea11114.jpg"
  return (
    <div className="flex flex-col items-center justify-center gap-12 p-8 select-none md:flex-row">
      <div className="flex flex-col items-center gap-3">
        <span className="font-mono text-[10px] tracking-widest text-neutral-400 uppercase dark:text-neutral-500">Directional Hover</span>
        <ImageHoverReveal variant="directional" src={sharedSrc} overlaySrc={ghibliOverlay} alt="Ghibli Directional Hover" className="h-56 w-56 rounded-3xl border border-neutral-200 bg-neutral-950 shadow-lg dark:border-neutral-800/80" />
      </div>
      <div className="flex flex-col items-center gap-3">
        <span className="font-mono text-[10px] tracking-widest text-neutral-400 uppercase dark:text-neutral-500">Mouse Track Slot</span>
        <ImageHoverReveal variant="slice" src={sharedSrc} overlaySrc={ghibliOverlay} alt="Ghibli Mouse Track Slot" className="h-56 w-56 rounded-3xl border border-neutral-200 bg-neutral-950 shadow-lg dark:border-neutral-800/80" />
      </div>
    </div>
  )
}