DocsComponents
Star us
Docs

Swap Card

When button is toggle card swipes up and down

requires interactiontoggle

Installation

Install dependencies

This uses Filpcard for the text. Install it by following the instructions here. You can use simple text only if you don't want to use WaveReveal.

This uses WaveReveal for the text. Install it by following the instructions here. You can use simple text only if you don't want to use WaveReveal.

npm install lucide-react

Run the following command

It will create a new file called swap-card.tsx inside the components/animata/card directory.

mkdir -p components/animata/card && touch components/animata/card/swap-card.tsx

Paste the code

Open the newly created file and paste the following code:

"use client";
import { useState } from "react";
import { LaptopMinimal, LocateOff } from "lucide-react";
 
import FlipCard from "@/animata/card/flip-card";
import WaveReveal from "@/animata/text/wave-reveal";
import { cn } from "@/lib/utils";
 
interface SwapCardProps {
  firstImage?: string;
  secondImage?: string;
  firstImageClass?: string;
  secondImageClass?: string;
  firsttitle?: string;
  secondtitle?: string;
  firstdescription?: string;
  seconddescritpion?: string;
  story?: string;
}
 
export default function SwapCard({
  firstImage = "",
  secondImage = "",
  firstImageClass,
  secondImageClass,
  firstdescription = "first description",
  seconddescritpion = "second description",
  firsttitle = "first title",
  secondtitle = "second title",
  story = "Story",
}: SwapCardProps) {
  const [isFirstBoxVisible, setIsFirstBoxVisible] = useState(true);
 
  const handleSwap = () => {
    setIsFirstBoxVisible(!isFirstBoxVisible);
  };
 
  return (
    <div className="h-[50%] w-96 rounded-md bg-gray-100 p-4">
      <div className="flex h-full w-full gap-4 overflow-hidden">
        <button onClick={handleSwap} className="m-auto h-12 w-14 border-2 p-3">
          {isFirstBoxVisible ? <LaptopMinimal color="black" /> : <LocateOff color="black" />}
        </button>
        <div className="relative h-80 w-80 overflow-hidden bg-none transition-transform duration-700 ease-in-out">
          <div
            className={cn(
              "absolute flex h-full w-full items-center justify-center transition-transform duration-700 ease-in-out",
              isFirstBoxVisible ? "translate-y-0 transform" : "-translate-y-full transform",
              firstImageClass,
            )}
          >
            <FlipCard
              className="h-72"
              title={firsttitle}
              description={firstdescription}
              image={firstImage}
            />
          </div>
          <div
            className={cn(
              "bg-unset absolute flex h-full w-full items-center justify-center transition-transform duration-700 ease-in-out",
              isFirstBoxVisible ? "translate-y-full transform" : "translate-y-0 transform",
              secondImageClass,
            )}
          >
            <FlipCard
              className="h-72"
              title={secondtitle}
              description={seconddescritpion}
              image={secondImage}
            />
          </div>
        </div>
      </div>
      <div className="mt-4 font-bold text-black">
        <WaveReveal text={story} className="md:text-md text-md" />
      </div>
    </div>
  );
}

Credits

Built by Sumin Gurung

Edit this page on GitHub
Staggered CardSwap Text Card