Animation

Infinity card swap

Interactive card stack

Client · GSAP

Live preview

Interact with the component below — same behavior as on the About page.

Loading preview…

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

Run the CLI to copy files into your project. Pick your language and styling below — the command updates automatically.

1. Add via CLI (recommended)

LanguageStylingInstall

npx @shashank-portfolio/cli add infinity-card-swap

npx @shashank-portfolio/cli add infinity-card-swap

2. Install dependencies

npm install gsap @gsap/react

npm install gsap @gsap/react

Required packages

gsap ^3.15.0
@gsap/react ^2.1.2 · useGSAP hook

3. Copy from repo

# Files in this portfolio repo:
packages/cli/registry/infinity-card-swap/

# Files in this portfolio repo:
packages/cli/registry/infinity-card-swap/

4. Use in your app

"use client";

import { InfinityCardSwap } from "@/components/components/infinity-card-swap";

export function HeroCardLoop() {
  return <InfinityCardSwap />;
}

"use client";

import { InfinityCardSwap } from "@/components/components/infinity-card-swap";

export function HeroCardLoop() {
  return <InfinityCardSwap />;
}

Add to your project

Loading install instructions…

Let’s connect

I’m always open to discussing new projects, creative ideas, or opportunities to be part of your visions. Just reach out!

See projects

By Love ❤️