Component Boom

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
+}