Migrate MetallicPaint

src/demo/Animations/MetallicPaintDemo.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="metallic-paint-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container relative h-[500px] overflow-hidden">
+          <MetallicPaint
+            v-if="imageData"
+            :key="rerenderKey"
+            :image-data="imageData"
+            :params="{
+              edge,
+              patternBlur,
+              patternScale,
+              refraction,
+              speed,
+              liquid
+            }"
+          />
+        </div>
+
+        <Customize>
+          <PreviewSlider
+            title="Edge"
+            v-model="edge"
+            :min="0"
+            :max="1"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Pattern Scale"
+            v-model="patternScale"
+            :min="1"
+            :max="5"
+            :step="0.1"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Pattern Blur"
+            v-model="patternBlur"
+            :min="0"
+            :max="0.1"
+            :step="0.001"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Refraction"
+            v-model="refraction"
+            :min="0"
+            :max="0.1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Liquid"
+            v-model="liquid"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Speed"
+            v-model="speed"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            @update:model-value="forceRerender"
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="metallicPaint" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="metallicPaint.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import MetallicPaint from '../../content/Animations/MetallicPaint/MetallicPaint.vue'
+import { metallicPaint } from '@/constants/code/Animations/metallicPaintCode'
+import { parseImage } from '../../content/Animations/MetallicPaint/parseImage'
+import { useForceRerender } from '@/composables/useForceRerender'
+import logo from '@/assets/logos/vue-bits-logo-small-dark.svg'
+
+const imageData = ref<ImageData | null>(null)
+const edge = ref(0)
+const patternScale = ref(2)
+const refraction = ref(0.015)
+const patternBlur = ref(0.005)
+const liquid = ref(0.07)
+const speed = ref(0.3)
+
+const { rerenderKey, forceRerender } = useForceRerender()
+
+const propData = [
+  {
+    name: 'imageData',
+    type: 'ImageData',
+    default: 'none (required)',
+    description: 'The processed image data generated from the parseImage utility. This image data is used by the shader to create the liquid paper effect.'
+  },
+  {
+    name: 'params',
+    type: 'ShaderParams',
+    default: '',
+    description: 'An object to configure the shader effect. Properties include: patternScale, refraction, edge, patternBlur, liquid, speed'
+  }
+]
+
+onMounted(async () => {
+  try {
+    const response = await fetch(logo)
+    const blob = await response.blob()
+    const file = new File([blob], 'default.png', { type: blob.type })
+    const { imageData: processedImageData } = await parseImage(file)
+    imageData.value = processedImageData
+  } catch (err) {
+    console.error('Error loading default image:', err)
+  }
+})
+</script>