Create <BounceCards /> component

src/constants/Categories.ts

@@ -80,7 +80,8 @@ export const CATEGORIES = [
       'Flowing Menu',
       'Elastic Slider',
       'Stack',
-      'Chroma Grid'
+      'Chroma Grid',
+      'Bounce Cards'
     ]
   },
   {

src/constants/Components.ts

@@ -69,6 +69,7 @@ const components = {
   'tilted-card': () => import('../demo/Components/TiltedCardDemo.vue'),
   'stack': () => import('../demo/Components/StackDemo.vue'),
   'chroma-grid': () => import('../demo/Components/ChromaGridDemo.vue'),
+  'bounce-cards': () => import('../demo/Components/BounceCardsDemo.vue'),
 };
 
 const backgrounds = {

src/constants/code/Components/bounceCardsCode.ts

@@ -0,0 +1,39 @@
+import code from '@content/Components/BounceCards/BounceCards.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const bounceCards = createCodeObject(code, 'Components/BounceCards', {
+  installation: `npm install gsap`,
+  usage: `<template>
+  <BounceCards
+    :images="images"
+    :container-width="500"
+    :container-height="250"
+    :animation-delay="0.5"
+    :animation-stagger="0.06"
+    ease-type="elastic.out(1, 0.8)"
+    :transform-styles="transformStyles"
+    :enable-hover="true"
+    class="custom-bounce-cards"
+  />
+</template>
+
+<script setup lang="ts">
+  import BounceCards from "./BounceCards.vue";
+
+  const images = [
+    'https://picsum.photos/400/400?grayscale',
+    'https://picsum.photos/500/500?grayscale',
+    'https://picsum.photos/600/600?grayscale',
+    'https://picsum.photos/700/700?grayscale',
+    'https://picsum.photos/300/300?grayscale'
+  ];
+
+  const transformStyles = [
+    'rotate(5deg) translate(-150px)',
+    'rotate(0deg) translate(-70px)',
+    'rotate(-5deg)',
+    'rotate(5deg) translate(70px)',
+    'rotate(-5deg) translate(150px)'
+  ];
+</script>`
+});