Added <ElectricBorder /> Animation

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Electric Border'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -41,6 +41,7 @@ export const CATEGORIES = [
       'Logo Loop',
       'Pixel Transition',
       'Target Cursor',
+      'Electric Border',
       'Sticker Peel',
       'Ribbons',
       'Glare Hover',

src/constants/Components.ts

@@ -21,6 +21,7 @@ const animations = {
   'target-cursor': () => import('../demo/Animations/TargetCursorDemo.vue'),
   'crosshair': () => import('../demo/Animations/CrosshairDemo.vue'),
   'sticker-peel': () => import('../demo/Animations/StickerPeelDemo.vue'),
+  'electric-border': () => import('../demo/Animations/ElectricBorderDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/electricBorderCode.ts

@@ -0,0 +1,28 @@
+import code from '@/content/Animations/ElectricBorder/ElectricBorder.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const electricBorder = createCodeObject(code, 'Animations/ElectricBorder', {
+  usage: `// CREDIT
+// Component inspired by @BalintFerenczy on X
+// https://codepen.io/BalintFerenczy/pen/KwdoyEN
+
+<template>
+  <ElectricBorder
+    :color="'#7df9ff'"
+    :speed="1"
+    :chaos="0.5"
+    :thickness="2"
+    :style="{ borderRadius: '16px' }"
+  >
+    <div>
+      <p :style="{ margin: '6px 0 0', opacity: 0.8 }">
+        A glowing, animated border wrapper.
+      </p>
+    </div>
+  </ElectricBorder>
+</template>
+
+<script setup lang="ts">
+  import ElectricBorder from "./ElectricBorder.vue";
+</script>`
+});