- Neon NightsBrand Identity
- Aura StudioWeb Development
- Nova EcosystemUX/UI Design
- SynthwaveProduct Strategy
Overview
The HoverImagePreview is a hallmark of modern, award-winning agency and portfolio sites. Instead of a traditional grid of thumbnails, projects are listed in bold typography. When the user hovers over an item, a high-quality image preview instantly appears and smoothly tracks the cursor using spring physics.
Installation
npm install framer-motion
Usage
import { HoverImagePreview } from "@/components/creative/hover-image-preview"
export default function Projects() {
const items = [
{
id: "project-1",
label: "E-Commerce Rebrand",
subtext: "2024",
image: "/projects/1.jpg",
href: "/work/e-commerce"
},
{
id: "project-2",
label: "Fintech Dashboard",
subtext: "2023",
image: "/projects/2.jpg",
href: "/work/fintech"
}
]
return (
<section className="py-20">
<HoverImagePreview items={items} imageWidth={400} imageHeight={300} />
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { HoverImagePreview } from "@/components/creative/hover-image-preview";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { HoverImagePreview } from "@/components/creative/hover-image-preview";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<HoverImagePreview
items{/* value */}
imageWidth{10}
imageHeight{10}
/>
</div>
);
}