[ REFACT ] : Metallic Paint Animation

src/constants/Categories.ts

@@ -1,6 +1,6 @@
 // Highlighted sidebar items
 export const NEW = ['Antigravity', 'Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow', 'Grid Scan'];
-export const UPDATED = [];
+export const UPDATED = ['Metallic Paint'];
 
 // Used for main sidebar navigation
 export const CATEGORIES = [

src/constants/code/Animations/metallicPaintCode.ts

@@ -1,45 +1,47 @@
 import code from '@content/Animations/MetallicPaint/MetallicPaint.vue?raw';
-import utility from '@content/Animations/MetallicPaint/parseImage.ts?raw';
 import { createCodeObject } from '@/types/code';
 
 export const metallicPaint = createCodeObject(code, '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>
+  usage: `<script setup>
+// Effect inspired by Paper's Liquid Metal effect
 
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-  import MetallicPaint from "./MetallicPaint.vue";
+import MetallicPaint from "./MetallicPaint.vue";
 
-  // copy and import the parseImage utility from the correct path
-  import { parseImage } from './parseImage';
+// Replace with your own SVG path
+// NOTE: Your SVG should have padding around the shape to prevent cutoff
+// It should have a black fill color to allow the metallic effect to show through
+import logo from "./logo.svg";
+</script>
 
-  const imageData = ref<ImageData | null>(null);
+<template>
+  <div style="width: 100%; height: 400px;">
+    <MetallicPaint
+      :image-src="logo"
+      
+      :seed="42"
+      :scale="4"
+      :pattern-sharpness="1"
+      :noise-scale="0.5"
+      
+      :speed="0.3"
+      :liquid="0.75"
+      :mouse-animation="false"
+      
+      :brightness="2"
+      :contrast="0.5"
+      :refraction="0.01"
+      :blur="0.015"
+      :chromatic-spread="2"
+      :fresnel="1"
+      :angle="0"
+      :wave-amplitude="1"
+      :distortion="1"
+      :contour="0.2"
 
-  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>`,
-  utility
+      light-color="#ffffff"
+      dark-color="#000000"
+      tint-color="#27FF64"
+    />
+  </div>
+</template>`
 });