Animation
Infinity card swap
Interactive card stack
Client · GSAP
Live preview
Interact with the component below — same behavior as on the About page.
Summary
An interaction-driven card swap animation based on the provided Figma node. Four rounded image cards sit in a compact perspective stack with a progressive layer blur; when users click, tap, or press Enter, the front card fades out briefly while the rear cards advance. Built with GSAP and scoped cleanup via @gsap/react.
- Matches the Figma card proportions, radius, border, and layered blur
- Swaps on click, tap, and keyboard interaction
- Click interaction automatically advances the card order
- Respects prefers-reduced-motion
Add to your project
Install peer dependencies, then add the files with the CLI or copy them manually from this repo. Follow the usage example below for imports and markup.
1. Install dependencies
npm install gsap @gsap/reactRequired packages
- gsap ^3.15.0
- @gsap/react ^2.1.2 · useGSAP hook
2. Copy from repo
# Files in this portfolio repo:
components/components/infinity-card-swap.tsx
public/components/infinity-card-swap/3. Use in your app
"use client";
import { InfinityCardSwap } from "@/components/components/infinity-card-swap";
export function HeroCardLoop() {
return <InfinityCardSwap />;
}Let’s connect
I’m always open to discussing new projects, creative ideas, or opportunities to be part of your visions. Just reach out!
