Component Boom

src/constants/code/Backgrounds/auroraCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/Aurora/Aurora.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const aurora: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Aurora`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="aurora-container">
+    <Aurora
+      :color-stops="['#7cff67', '#171D22', '#7cff67']"
+      :amplitude="1.0"
+      :blend="0.5"
+      :speed="1.0"
+      :intensity="1.0"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Aurora from "./Aurora.vue";
+</script>
+
+<style scoped>
+  .aurora-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/iridescenceCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Iridescence/Iridescence.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const iridescence: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Iridescence`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="w-full h-[400px]">
+    <Iridescence 
+      :color="[1, 1, 1]"
+      :speed="1.0"
+      :amplitude="0.1"
+      :mouseReact="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Iridescence from "./Iridescence.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/letterGlitchCode.ts

@@ -0,0 +1,32 @@
+import code from '@content/Backgrounds/LetterGlitch/LetterGlitch.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const letterGlitch: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LetterGlitch`,
+  usage: `<template>
+  <div class="letter-glitch-container">
+    <LetterGlitch
+      :glitch-colors="['#2b4539', '#61dca3', '#61b3dc']"
+      :glitch-speed="50"
+      :center-vignette="false"
+      :outer-vignette="false"
+      :smooth="true"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import LetterGlitch from "./LetterGlitch.vue";
+</script>
+
+<style scoped>
+  .letter-glitch-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/lightningCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/Lightning/Lightning.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const lightning: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Lightning`,
+  installation: `No additional dependencies required`,
+  usage: `<template>
+  <div class="lightning-container">
+    <Lightning
+      :hue="230"
+      :x-offset="0"
+      :speed="1"
+      :intensity="1"
+      :size="1"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Lightning from "./Lightning.vue";
+</script>
+
+<style scoped>
+  .lightning-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/particlesCode.ts

@@ -0,0 +1,39 @@
+import code from '@content/Backgrounds/Particles/Particles.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const particles: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Particles`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="particles-container">
+    <Particles
+      :particle-count="200"
+      :particle-spread="10"
+      :speed="0.1"
+      :particle-colors="['#ffffff']"
+      :move-particles-on-hover="false"
+      :particle-hover-factor="1"
+      :alpha-particles="false"
+      :particle-base-size="100"
+      :size-randomness="1"
+      :camera-distance="20"
+      :disable-rotation="false"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Particles from "./Particles.vue";
+</script>
+
+<style scoped>
+  .particles-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/silkCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/Silk/Silk.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const silk: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Silk`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="silk-container">
+    <Silk
+      :speed="5"
+      :scale="1"
+      :color="'#7B7481'"
+      :noise-intensity="1.5"
+      :rotation="0"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Silk from "./Silk.vue";
+</script>
+
+<style scoped>
+  .silk-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/squaresCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Squares/Squares.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const squares: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Squares`,
+  usage: `<template>
+  <div class="w-full h-[400px]">
+    <Squares 
+      direction="diagonal"
+      :speed="1"
+      :squareSize="40"
+      borderColor="#999"
+      hoverFillColor="#222"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Squares from "./Squares.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/threadsCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Threads/Threads.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const threads: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Threads`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="w-full h-[400px]">
+    <Threads 
+      :color="[1, 1, 1]"
+      :amplitude="1"
+      :distance="0"
+      :enableMouseInteraction="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Threads from "./Threads.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/wavesCode.ts

@@ -0,0 +1,38 @@
+import code from '@content/Backgrounds/Waves/Waves.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const waves: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Waves`,
+  usage: `<template>
+  <div class="waves-container">
+    <Waves
+      line-color="black"
+      background-color="transparent"
+      :wave-speed-x="0.0125"
+      :wave-speed-y="0.005"
+      :wave-amp-x="32"
+      :wave-amp-y="16"
+      :x-gap="10"
+      :y-gap="32"
+      :friction="0.925"
+      :tension="0.005"
+      :max-cursor-move="100"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Waves from "./Waves.vue";
+</script>
+
+<style scoped>
+  .waves-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}