Merge branch 'main' into feat/electric-border

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', 'Electric Border'];
+export const NEW = ['Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -96,6 +96,7 @@ export const CATEGORIES = [
   {
     name: 'Backgrounds',
     subcategories: [
+      'Prism',
       'Aurora',
       'Beams',
       'Dark Veil',
@@ -103,6 +104,7 @@ export const CATEGORIES = [
       'Dot Grid',
       'Hyperspeed',
       'Faulty Terminal',
+      'Plasma',
       'Ripple Grid',
       'Silk',
       'Lightning',

src/constants/Components.ts

@@ -106,6 +106,8 @@ const backgrounds = {
   'galaxy': () => import('../demo/Backgrounds/GalaxyDemo.vue'),
   'faulty-terminal': () => import('../demo/Backgrounds/FaultyTerminalDemo.vue'),
   'light-rays': () => import('../demo/Backgrounds/LightRaysDemo.vue'),
+  'plasma': () => import('../demo/Backgrounds/PlasmaDemo.vue'),
+  'prism': () => import('../demo/Backgrounds/PrismDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/plasmaCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Plasma/Plasma.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const plasma = createCodeObject(code, 'Backgrounds/Plasma', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <Plasma
+      color="#ff6b35"
+      :speed="0.6"
+      direction="forward"
+      :scale="1.1"
+      :opacity="0.8"
+      :mouseInteractive="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Plasma from "./Plasma.vue";
+</script>`
+});

src/constants/code/Backgrounds/prismCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/Backgrounds/Prism/Prism.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const prism = createCodeObject(code, 'Backgrounds/Prism', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <Prism
+      animation-type="rotate"
+      :time-scale="0.5"
+      :height="3.5"
+      :base-width="5.5"
+      :scale="3.6"
+      :hue-shift="0"
+      :color-frequency="1"
+      :noise="0.5"
+      :glow="1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Prism from "./Prism.vue";
+</script>`
+});