3D Flip Card

A 3D card stack with cool 3D hover effects. Make your stuff look cool.

Sunset landscape
Desert scene
Red building
Cactus close-up
Ocean view
Installation
npx @ayushmxxn/serenity-ui@latest add flipcard3d
Usage
import React from 'react';
import FlipCard3D from './components/ui/FlipCard3D'; 

function Page () {
  const images = [
    { src: "https://images.pexels.com/photos/4588065/pexels-photo-4588065.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Rabbit" },
    { src: "https://images.pexels.com/photos/321552/pexels-photo-321552.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Monkey" },
    { src: "https://images.pexels.com/photos/208821/pexels-photo-208821.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Donkey" },
    { src: "https://images.pexels.com/photos/33550/cows-curious-cattle-agriculture.jpg?auto=compress&cs=tinysrgb&w=600", alt: "Cow" },
    { src: "https://images.pexels.com/photos/70568/spotted-baumwaran-monitor-tree-monitor-lizard-70568.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", alt: "Chameleon" },
  ];

  return (
    <div>
      <FlipCard3D images={images} />
    </div>
  );
};

export default Page;

Props

Prop NameTypeDescription
srcstringURL or path to the image
altstringThe alternative text for the image
Built byAyushmaan Singh. The source code is available onGithub