Added <PrismaticBurst /> Background

This commit is contained in:
Utkarsh-Singhal-26
2025-08-27 09:14:35 +05:30
parent 77674b74d3
commit 1342735eba
6 changed files with 655 additions and 4 deletions

View File

@@ -1,5 +1,5 @@
// Highlighted sidebar items
export const NEW = ['Gradient Blinds', 'Bubble Menu', '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 NEW = ['Gradient Blinds', 'Bubble Menu', 'Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Prismatic Burst'];
export const UPDATED = [];
// Used for main sidebar navigation
@@ -103,6 +103,7 @@ export const CATEGORIES = [
'Dark Veil',
'Dither',
'Gradient Blinds',
'Prismatic Burst',
'Dot Grid',
'Hyperspeed',
'Faulty Terminal',

View File

@@ -110,6 +110,7 @@ const backgrounds = {
'plasma': () => import('../demo/Backgrounds/PlasmaDemo.vue'),
'prism': () => import('../demo/Backgrounds/PrismDemo.vue'),
'gradient-blinds': () => import('../demo/Backgrounds/GradientBlindsDemo.vue'),
'prismatic-burst': () => import('../demo/Backgrounds/PrismaticBurstDemo.vue'),
};
export const componentMap = {

View File

@@ -0,0 +1,26 @@
import code from '@content/Backgrounds/PrismaticBurst/PrismaticBurst.vue?raw';
import { createCodeObject } from '../../../types/code';
export const prismaticBurst = createCodeObject(code, 'Backgrounds/PrismaticBurst', {
installation: `npm install ogl`,
usage: `<template>
<div style="width: 100%; height: 600px; position: relative;">
<PrismaticBurst
animationType="rotate3d"
:intensity="2"
:speed="0.5"
:distort="1.0"
:paused="false"
:offset="{ x: 0, y: 0 }"
:hoverDampness="0.25"
:rayCount="24"
mixBlendMode="lighten"
:colors="['#ff007a', '#4d3dff', '#ffffff']"
/>
</div>
</template>
<script setup lang="ts">
import PrismaticBurst from "./PrismaticBurst.vue";
</script>`
});