Merge pull request #29 from sanjanamilind14/feat/chroma-grid

[ADDED: Chroma Grid]

src/constants/Categories.ts

@@ -68,7 +68,8 @@ export const CATEGORIES = [
       'Decay Card',
       'Flowing Menu',
       'Elastic Slider',
-      'Stack'
+      'Stack',
+      'Chroma Grid'
     ]
   },
   {

src/constants/Components.ts

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

src/constants/code/Components/chromaGridCode.ts

@@ -0,0 +1,44 @@
+import code from '@content/Components/ChromaGrid/ChromaGrid.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const chromaGrid: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ChromaGrid`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <div style="height: 600px; position: relative">
+    <ChromaGrid
+      :items="items"
+      :radius="300"
+      :damping="0.45"
+      :fadeOut="0.6"
+      ease="power3.out"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import ChromaGrid from "./ChromaGrid.vue";
+
+  const items = [
+  {
+    image: "https://i.pravatar.cc/300?img=1",
+    title: "Sarah Johnson",
+    subtitle: "Frontend Developer",
+    handle: "@sarahjohnson",
+    borderColor: "#3B82F6",
+    gradient: "linear-gradient(145deg, #3B82F6, #000)",
+    url: "https://github.com/sarahjohnson"
+  },
+  {
+    image: "https://i.pravatar.cc/300?img=2",
+    title: "Mike Chen",
+    subtitle: "Backend Engineer",
+    handle: "@mikechen",
+    borderColor: "#10B981",
+    gradient: "linear-gradient(180deg, #10B981, #000)",
+    url: "https://linkedin.com/in/mikechen"
+  }
+]
+</script>`,
+  code
+};