Migrate <Ribbons />

src/constants/Categories.ts

@@ -32,6 +32,7 @@ export const CATEGORIES = [
       'Animated Content',
       'Fade Content',
       'Pixel Transition',
+      'Ribbons',
       'Glare Hover',
       'Magnet Lines',
       'Count Up',

src/constants/Components.ts

@@ -5,6 +5,7 @@ const animations = {
   'glare-hover': () => import('../demo/Animations/GlareHoverDemo.vue'),
   'magnet-lines': () => import('../demo/Animations/MagnetLinesDemo.vue'),
   'click-spark': () => import('../demo/Animations/ClickSparkDemo.vue'),
+  'ribbons': () => import('../demo/Animations/RibbonsDemo.vue'),
   'metallic-paint': () => import('../demo/Animations/MetallicPaintDemo.vue'),
   'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
   'cubes': () => import('../demo/Animations/CubesDemo.vue'),

src/constants/code/Animations/ribbonsCode.ts

@@ -0,0 +1,28 @@
+import code from '@content/Animations/Ribbons/Ribbons.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const ribbons: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Ribbons`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <Ribbons
+    :colors="['#ff9346', '#7cff67', '#ffee51', '#5227FF']"
+    :base-spring="0.03"
+    :base-friction="0.9"
+    :base-thickness="30"
+    :offset-factor="0.05"
+    :max-age="500"
+    :point-count="50"
+    :speed-multiplier="0.6"
+    :enable-fade="false"
+    :enable-shader-effect="false"
+    :effect-amplitude="2"
+    :background-color="[0, 0, 0, 0]"
+  />
+</template>
+
+<script setup lang="ts">
+  import Ribbons from "./Ribbons.vue";
+</script>`,
+  code
+};