From 9567aa86b7458382eb13c76053424e3fdc6a098c Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Mon, 14 Jul 2025 10:18:39 +0300
Subject: [PATCH] Add mixBlendMode prop to MetaBalls component and demo

---
 src/content/Animations/MetaBalls/MetaBalls.vue |  6 ++++--
 src/demo/Animations/MetaBallsDemo.vue          | 13 +++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/content/Animations/MetaBalls/MetaBalls.vue b/src/content/Animations/MetaBalls/MetaBalls.vue
index 703d9ac..224f453 100644
--- a/src/content/Animations/MetaBalls/MetaBalls.vue
+++ b/src/content/Animations/MetaBalls/MetaBalls.vue
@@ -13,6 +13,7 @@ interface MetaBallsProps {
   cursorBallSize?: number;
   cursorBallColor?: string;
   enableTransparency?: boolean;
+  mixBlendMode?: string;
 }
 
 type BallParams = {
@@ -33,7 +34,8 @@ const props = withDefaults(defineProps<MetaBallsProps>(), {
   clumpFactor: 1,
   cursorBallSize: 3,
   cursorBallColor: '#27FF64',
-  enableTransparency: false
+  enableTransparency: false,
+  mixBlendMode: 'normal'
 });
 
 function parseHexColor(hex: string): [number, number, number] {
@@ -263,5 +265,5 @@ watch(
 </script>
 
 <template>
-  <div ref="containerRef" class="relative w-full h-full" />
+  <div ref="containerRef" class="relative w-full h-full" :style="`mix-blend-mode: ${props.mixBlendMode}`" />
 </template>
diff --git a/src/demo/Animations/MetaBallsDemo.vue b/src/demo/Animations/MetaBallsDemo.vue
index eb1496f..a4f1480 100644
--- a/src/demo/Animations/MetaBallsDemo.vue
+++ b/src/demo/Animations/MetaBallsDemo.vue
@@ -12,6 +12,7 @@
           :hoverSmoothness="hoverSmoothness"
           :clumpFactor="clumpFactor"
           :speed="speed"
+          mix-blend-mode="screen"
         />
       </div>
 
@@ -199,6 +200,18 @@ const propData = [
     type: 'string',
     default: '#27FF64',
     description: 'Color of the cursor ball.'
+  },
+  {
+    name: 'mixBlendMode',
+    type: 'string',
+    default: 'normal',
+    description: 'CSS mix-blend-mode value for how the metaballs blend with content behind them.'
   }
 ];
 </script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+}
+</style>