Memories Card

A premium, interactive card stack component featuring real-time 3D tilt physics, a dynamic "fan" background spread, and smooth swipe-to-next gestures. Perfect for showcasing travel memories, feature highlights, or curated photo galleries.

Hover the front card for interactive 3D tilt physics, or drag/swipe it to send it to the back of the deck. This component supports full card metadata (badges, locations, dates, descriptions), minimalist image-only layouts by omitting optional fields, and real-time active index tracking via onCardChange to sync external captions, counters, or analytics.

Tracking the active card

items: Array of MemoryItem objects. Each item can take: id (required), title (required), image (required), tag (optional badge), location (optional pin text), date (optional timestamp), and description (optional subtext).
onCardChange: fires with the new front index (number) on every swipe — wire it to a caption, counter or analytics call.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install Memories Card

npx shadcn@latest add @algorize-ui/memories-card

components/custom/blocks/MemoriesCardBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Memories Card to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Features

Discover the key capabilities that make this component an excellent choice for modern, animated user interfaces.

Fluid Animations

Hardware-accelerated transitions that ensure smooth 60fps performance across devices.

Highly Customizable

Exposes intuitive props for tailoring colors, sizes, and animation speeds to fit your brand.

Responsive Design

Automatically adapts to mobile, tablet, and desktop viewports without horizontal scrolling issues.

Accessible

Built with semantic HTML and ARIA labels where necessary to support screen readers and keyboard navigation.

Best Practices & Guidelines

Animation Performance

Avoid placing too many heavy animated components on a single screen to prevent layout thrashing and maintain 60fps performance. Use intersection observers to pause off-screen animations.

State Management

When triggering animations via state changes, ensure you wrap state updates in startTransition or use lightweight stores to prevent React rendering bottlenecks during the animation tick.

Props Reference

Component / Interface	Prop	Type	Default	Description
`MemoriesCard`	`items`	`MemoryItem[]`	Required	An array of data objects defining the images, titles, locations, and badges for the card stack.
`MemoriesCard`	`onCardChange`	`(index: number) => void`	`undefined`	Callback function triggered on every card swipe gesture. It receives the new active card index (`number`), allowing you to dynamically sync external captions, counter indicators, or trigger custom analytics events.
`MemoriesCard`	`className`	`string`	`undefined`	Custom Tailwind CSS classes to apply to the outermost perspective wrapper container.
`MemoryItem`	`id`	`string`	Required	A unique identifier string required for safe React list rendering and for tracking each card as the deck reorders.
`MemoryItem`	`title`	`string`	Required	Primary headline text prominently displayed at the bottom of the card.
`MemoryItem`	`image`	`string`	Required	The URL to the high-resolution background image for the card.
`MemoryItem`	`tag`	`string`	`undefined`	Optional badge label displayed in the top-left corner (e.g., "Highlight", "Expedition").
`MemoryItem`	`location`	`string`	`undefined`	Optional geographical string displayed with a map pin icon above the headline.
`MemoryItem`	`date`	`string`	`undefined`	Optional date or timestamp string displayed with a calendar icon above the headline.
`MemoryItem`	`description`	`string`	`undefined`	Optional supporting paragraph text explaining the memory. Automatically clamped to 2 lines.