Merge branch 'main' into feat/image-trail

src/demo/Animations/MetaBallsDemo.vue

@@ -0,0 +1,217 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative h-[500px] overflow-hidden demo-container">
+        <MetaBalls
+          :color="color"
+          :cursorBallColor="color"
+          :cursorBallSize="cursorBallSize"
+          :ballCount="ballCount"
+          :animationSize="animationSize"
+          :enableMouseInteraction="enableMouseInteraction"
+          :hoverSmoothness="hoverSmoothness"
+          :clumpFactor="clumpFactor"
+          :speed="speed"
+          mix-blend-mode="screen"
+        />
+      </div>
+
+      <Customize>
+        <PreviewColor title="Color" v-model="color" @update:model-value="forceRerender" />
+
+        <PreviewSlider
+          title="Ball Count"
+          :min="2"
+          :max="30"
+          :step="1"
+          v-model="ballCount"
+          @onChange="
+            (val: number) => {
+              ballCount = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Speed"
+          :min="0.1"
+          :max="1"
+          :step="0.1"
+          v-model="speed"
+          @onChange="
+            (val: number) => {
+              speed = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Size"
+          :min="10"
+          :max="50"
+          :step="1"
+          v-model="animationSize"
+          @onChange="
+            (val: number) => {
+              animationSize = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Clump Factor"
+          :min="0.1"
+          :max="2"
+          :step="0.1"
+          v-model="clumpFactor"
+          @onChange="
+            (val: number) => {
+              clumpFactor = val;
+            }
+          "
+        />
+
+        <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
+
+        <PreviewSlider
+          title="Cursor Smoothing"
+          :min="0.001"
+          :max="0.25"
+          :step="0.001"
+          v-model="hoverSmoothness"
+          @onChange="
+            (val: number) => {
+              hoverSmoothness = val;
+            }
+          "
+        />
+
+        <PreviewSlider
+          title="Cursor Size"
+          :min="1"
+          :max="5"
+          :step="1"
+          v-model="cursorBallSize"
+          @onChange="
+            (val: number) => {
+              cursorBallSize = val;
+            }
+          "
+        />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="metaBalls" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="metaBalls.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { metaBalls } from '../../constants/code/Animations/metaBallsCode';
+import MetaBalls from '../../content/Animations/MetaBalls/MetaBalls.vue';
+
+const { forceRerender } = useForceRerender();
+
+const color = ref('#27FF64');
+const speed = ref(0.3);
+const animationSize = ref(30);
+const ballCount = ref(15);
+const clumpFactor = ref(1);
+const enableMouseInteraction = ref(true);
+const hoverSmoothness = ref(0.15);
+const cursorBallSize = ref(2);
+
+const propData = [
+  {
+    name: 'color',
+    type: 'string',
+    default: '#27FF64',
+    description: 'The base color of the metaballs.'
+  },
+  {
+    name: 'speed',
+    type: 'number',
+    default: '0.3',
+    description: 'Speed multiplier for the animation.'
+  },
+  {
+    name: 'enableMouseInteraction',
+    type: 'boolean',
+    default: 'true',
+    description: 'Enables or disables the ball following the mouse.'
+  },
+  {
+    name: 'enableTransparency',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enables or disables transparency for the container of the animation.'
+  },
+  {
+    name: 'hoverSmoothness',
+    type: 'number',
+    default: '0.05',
+    description: 'Smoothness factor for the cursor ball when following the mouse.'
+  },
+  {
+    name: 'animationSize',
+    type: 'number',
+    default: '30',
+    description: 'The size of the world for the animation.'
+  },
+  {
+    name: 'ballCount',
+    type: 'number',
+    default: '15',
+    description: 'Number of metaballs rendered.'
+  },
+  {
+    name: 'clumpFactor',
+    type: 'number',
+    default: '1',
+    description: 'Determines how close together the balls are rendered.'
+  },
+  {
+    name: 'cursorBallSize',
+    type: 'number',
+    default: '3',
+    description: 'Size of the cursor-controlled ball.'
+  },
+  {
+    name: 'cursorBallColor',
+    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>