Component Boom

src/demo/Backgrounds/SilkDemo.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="silk-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <Silk :speed="speed" :scale="scale" :color="color" :noise-intensity="noiseIntensity" :rotation="rotation"
+            class="w-full h-96" />
+        </div>
+
+        <Customize>
+          <PreviewSlider title="Speed" :model-value="speed" @update:model-value="speed = $event" :min="0" :max="10"
+            :step="0.1" />
+
+          <PreviewSlider title="Scale" :model-value="scale" @update:model-value="scale = $event" :min="0.1" :max="3"
+            :step="0.1" />
+
+          <PreviewSlider title="Noise Intensity" :model-value="noiseIntensity"
+            @update:model-value="noiseIntensity = $event" :min="0" :max="3" :step="0.1" />
+
+          <PreviewSlider title="Rotation" :model-value="rotation" @update:model-value="rotation = $event" :min="0"
+            :max="6.28" :step="0.1" />
+
+          <PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['ogl']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="silk" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="silk.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 Silk from '@/content/Backgrounds/Silk/Silk.vue'
+import PreviewColor from '@/components/common/PreviewColor.vue'
+import PreviewSlider from '@/components/common/PreviewSlider.vue'
+import { silk } from '@/constants/code/Backgrounds/silkCode'
+
+const speed = ref(5)
+const scale = ref(1)
+const color = ref('#7B7481')
+const noiseIntensity = ref(1.5)
+const rotation = ref(0)
+
+const propData = [
+  { name: 'speed', type: 'number', default: '5', description: 'Animation speed multiplier' },
+  { name: 'scale', type: 'number', default: '1', description: 'Scale factor for the pattern' },
+  { name: 'color', type: 'string', default: "'#7B7481'", description: 'Base color of the silk pattern' },
+  { name: 'noiseIntensity', type: 'number', default: '1.5', description: 'Intensity of the noise effect' },
+  { name: 'rotation', type: 'number', default: '0', description: 'Rotation angle in radians' },
+  { name: 'className', type: 'string', default: '""', description: 'Additional CSS class names for styling.' },
+  { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
+]
+</script>
+
+<style scoped>
+.demo-container {
+  overflow: hidden;
+  padding: 0;
+}
+</style>