atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add mixBlendMode prop to MetaBalls component and demo

Browse Source
This commit is contained in:
David Haz
2025-07-14 10:18:39 +03:00
parent 7582b9fc4d
commit 9567aa86b7
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/content/Animations/MetaBalls/MetaBalls.vue
View File

@@ -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>