vue-bits/src/demo/Animations/MetaBallsDemo.vue

<template>
  <TabbedLayout>
    <template #preview>
      <div class="demo-container h-[500px]">
        <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>