Component Boom

src/demo/Backgrounds/WavesDemo.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="waves-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-96" />
+        </div>
+
+        <Customize>
+          <PreviewSlider title="Wave Speed X" :model-value="waveSpeedX" @update:model-value="waveSpeedX = $event"
+            :min="0" :max="0.1" :step="0.01" />
+
+          <div class="flex gap-4 items-center">
+            <PreviewColor title="Waves Color" :model-value="color" @update:model-value="color = $event" />
+          </div>
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="[]" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="waves" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="waves.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import Dependencies from '../../components/code/Dependencies.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import Waves from '@/content/Backgrounds/Waves/Waves.vue'
+import PreviewSlider from '@/components/common/PreviewSlider.vue'
+import PreviewColor from '@/components/common/PreviewColor.vue'
+import { waves } from '@/constants/code/Backgrounds/wavesCode'
+
+const color = ref('#ffffff')
+const waveSpeedX = ref(0.0125)
+
+const propData = [
+  { name: 'lineColor', type: 'string', default: 'black', description: 'Defines the color of the wave lines drawn on the canvas.' },
+  { name: 'backgroundColor', type: 'string', default: 'transparent', description: 'Sets the background color of the waves container.' },
+  { name: 'waveSpeedX', type: 'number', default: '0.0125', description: 'Horizontal speed factor for the wave animation.' },
+  { name: 'waveSpeedY', type: 'number', default: '0.005', description: 'Vertical speed factor for the wave animation.' },
+  { name: 'waveAmpX', type: 'number', default: '32', description: 'Horizontal amplitude of each wave.' },
+  { name: 'waveAmpY', type: 'number', default: '16', description: 'Vertical amplitude of each wave.' },
+  { name: 'xGap', type: 'number', default: '10', description: 'Horizontal gap between individual wave lines.' },
+  { name: 'yGap', type: 'number', default: '32', description: 'Vertical gap between points on each wave line.' },
+  { name: 'friction', type: 'number', default: '0.925', description: 'Controls how quickly the cursor effect slows down.' },
+  { name: 'tension', type: 'number', default: '0.005', description: 'Determines the "springiness" of the cursor effect on points.' },
+  { name: 'maxCursorMove', type: 'number', default: '100', description: 'Limits how far each point can shift due to cursor movement.' },
+  { name: 'style', type: 'object', default: '{}', description: 'Inline styles applied to the container element.' },
+  { name: 'className', type: 'string', default: '""', description: 'Custom class name(s) applied to the container element.' }
+]
+</script>
+
+<style scoped>
+.demo-container {
+  overflow: hidden;
+  padding: 0;
+}
+</style>