Add mixBlendMode prop to MetaBalls component and demo

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>

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>