Component Boom

src/demo/Backgrounds/IridescenceDemo.vue

@@ -0,0 +1,91 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative demo-container h-[500px] p-0 overflow-hidden">
+        <Iridescence :key="key" :speed="speed" :color="colors" :mouseReact="mouseInteraction" :amplitude="amplitude" />
+      </div>
+
+      <Customize>
+        <PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[0]" title="Red" />
+
+        <PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[1]" title="Green" />
+
+        <PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[2]" title="Blue" />
+
+        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" @update:modelValue="forceRerender" />
+
+        <PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude"
+          @update:modelValue="forceRerender" />
+
+        <PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependencyList="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :codeObject="iridescence" />
+    </template>
+
+    <template #cli>
+      <CliInstallation v-bind="iridescence" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import Dependencies from '../../components/code/Dependencies.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import Iridescence from '../../content/Backgrounds/Iridescence/Iridescence.vue'
+import { iridescence } from '../../constants/code/Backgrounds/iridescenceCode'
+import { useForceRerender } from '../../composables/useForceRerender'
+
+const colors = ref<[number, number, number]>([1, 1, 1])
+const speed = ref(1)
+const amplitude = ref(0.1)
+const mouseInteraction = ref(true)
+
+const { rerenderKey: key, forceRerender } = useForceRerender()
+
+const propData = [
+  {
+    name: "color",
+    type: "Array<number>",
+    default: "[1, 1, 1]",
+    description: "Base color as an array of RGB values (each between 0 and 1)."
+  },
+  {
+    name: "speed",
+    type: "number",
+    default: "1.0",
+    description: "Speed multiplier for the animation."
+  },
+  {
+    name: "amplitude",
+    type: "number",
+    default: "0.1",
+    description: "Amplitude for the mouse-driven effect."
+  },
+  {
+    name: "mouseReact",
+    type: "boolean",
+    default: "true",
+    description: "Enable or disable mouse interaction with the shader."
+  }
+]
+</script>
+
+<style scoped>
+.demo-container {
+  overflow: hidden;
+  padding: 0;
+}
+</style>