Migrate MetallicPaint

src/constants/Categories.ts

@@ -33,6 +33,7 @@ export const CATEGORIES = [
       'Glare Hover',
       'Magnet Lines',
       'Count Up',
+      'Metallic Paint',
       'Click Spark',
       'Magnet',
       'Cubes'

src/constants/Components.ts

@@ -5,6 +5,7 @@ const animations = {
   'glare-hover': () => import('../demo/Animations/GlareHoverDemo.vue'),
   'magnet-lines': () => import('../demo/Animations/MagnetLinesDemo.vue'),
   'click-spark': () => import('../demo/Animations/ClickSparkDemo.vue'),
+  'metallic-paint': () => import('../demo/Animations/MetallicPaintDemo.vue'),
   'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
   'cubes': () => import('../demo/Animations/CubesDemo.vue'),
   'count-up': () => import('../demo/Animations/CountUpDemo.vue')

src/constants/code/Animations/metallicPaintCode.ts

@@ -0,0 +1,47 @@
+import code from '@content/Animations/MetallicPaint/MetallicPaint.vue?raw'
+import utility from '@content/Animations/MetallicPaint/parseImage.ts?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const metallicPaint: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MetallicPaint`,
+  usage: `<template>
+  <MetallicPaint
+    :image-data="imageData"
+    :params="{
+      patternScale: 2,
+      refraction: 0.015,
+      edge: 1,
+      patternBlur: 0.005,
+      liquid: 0.07,
+      speed: 0.3
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+  import MetallicPaint from "./MetallicPaint.vue";
+
+  // copy and import the parseImage utility from the correct path
+  import { parseImage } from './parseImage';
+
+  const imageData = ref<ImageData | null>(null);
+
+  onMounted(async () => {
+    try {
+      // Example: Fetch an SVG image and parse it
+      // The SVG should have a transparent background and black fill color for the best effect
+
+      const response = await fetch('/path/to/your/logo.svg');
+      const blob = await response.blob();
+      const file = new File([blob], 'logo.svg', { type: blob.type });
+      const { imageData: processedImageData } = await parseImage(file);
+      imageData.value = processedImageData;
+    } catch (err) {
+      console.error('Error loading image:', err);
+    }
+  });
+</script>`,
+  code,
+  utility
+}