Perspective Cards — 3D Parallax Image Gallery Hero for React & Framer Motion

Perspective Cards turns a collection into a scene. Your image cards float in 3D around the headline, each one turned toward it, and the whole scene moves with the cursor like a camera: near cards travel more than far ones while the headline drifts gently the other way. Click a card and that exact card grows into a cinematic lightbox, then flies back into its place when you close it.

What it does

• Cards that feel physical. On hover a card lifts toward you and turns to face you, a highlight follows the pointer across it, its shadow deepens and its caption reveals a one-line description. Idle cards breathe gently; the two farthest sit softly out of focus.
• An entrance that deals the cards. On first view the cards are dealt outward from the headline, nearest first, and land with a spring.
• A cinematic lightbox. Arrow keys, Home and End, swipe to browse and swipe down to close, thumbnails, a counter, neighbours preloaded and page scroll locked without a jump.
• Three layouts. Orbit (the default), scatter and arc, each deterministic for a seed, with captions kept clear of other cards.
• Every screen size. A two-row arc under the headline on tablets; a fanned deck over a snap-scrolling strip on phones, with tilt-to-move after a tap on "Enable motion".
• Light, dark or auto. Auto follows your site's .dark class or the system setting. Any accent colour; six CSS variables to re-theme.
• Accessible. Real buttons in reading order, keyboard focus that lifts a card like hover, a proper modal dialog with a focus trap and screen-reader announcements, and full reduced-motion support.

Fast by design

Pointer movement, idle float, hover and scroll all run on motion values, so React never re-renders while anything moves, and only transform and opacity change. The main bundle is under 12 kB gzipped; the lightbox and the phone layout load as small separate chunks. Our demo scores 98+ for performance and 100 for accessibility, best practices and SEO in Lighthouse (desktop), with zero layout shift.

What's included

• The PerspectiveCards component in TypeScript, with its own stylesheet
• Reusable pieces: PerspectiveLightbox, PerspectiveCard, usePointerParallax and the pure layout functions
• Three demos: orbit (follows your theme), scatter (dark with a warm accent) and arc
• Ten demo photos from Unsplash, ready to swap for your own

Stack and requirements

• React 18 or 19, TypeScript
• motion (Framer Motion) is the only dependency
• Works in the Next.js App Router and in Vite; Tailwind CSS is optional because the styles ship with the component
• Use next/image through the renderImage prop

Make it yours

Pass your own items (image, title, alt text, size, and an optional description and link), headline, call to action and accent colour. Tune depth, parallax and tilt, or try another composition with seed.