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

> A 3D parallax image gallery hero for React: cards float around your headline, follow the cursor like a camera, lift and face you on hover, and open into a cinematic lightbox. Framer Motion, light/dark themes, keyboard, touch and reduced-motion support.

- Kind: Component (Dialogs / Modals)
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: dialog, card, gallery, hero, hero-section, image-gallery, 3d, parallax, lightbox, framer-motion, react, nextjs
- npm packages: motion
- Published: 2026-10-09
- Updated: 2026-10-09
- Page: https://upfork.dev/products/3d-parallax-image-gallery-react

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/3d-parallax-image-gallery-react
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

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`.