Travel Photography
Click any image to expand the lightbox gallery.
View
View
View
View
View
View
Overview
The GalleryLightbox component is the gold standard for modern image viewing on portfolio and photography sites. Instead of a jarring layout jump when clicking a thumbnail, this component uses Framer Motion's layoutId to morph the image out of its grid cell and into the center of the screen while blurring the background.
It handles everything you expect from a premium modal: keyboard navigation (Escape, Left/Right arrows), background scrolling locks, and fluid layout animations.
Usage
import { GalleryLightbox } from "@/components/creative/gallery-lightbox"
export default function Portfolio() {
const images = [
{
id: 1,
src: "/images/project-1.jpg",
alt: "Project 1 Overview",
caption: "Brand Identity Concept"
},
// ...
]
return (
<section className="py-20 max-w-7xl mx-auto">
<GalleryLightbox
images={images}
aspectRatio="square"
gridClassName="gap-8 md:grid-cols-4"
/>
</section>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { GalleryLightbox } from "@/components/creative/gallery-lightbox";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { GalleryLightbox } from "@/components/creative/gallery-lightbox";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<GalleryLightbox
images{/* value */}
gridClassName="example"
aspectRatio{/* value */}
/>
</div>
);
}