Components
Force Dot
Interactive particle system with physics-based animations.
Force Dot
The ForceDot component creates an interactive particle system with physics-based animations. Dots respond to mouse movement with attraction or repulsion forces, creating dynamic visual effects.
Usage
Force Dot
Interactive physics-based dot that responds to cursor movements with realistic force simulations
<template>
<MForceDot />
</template>
Props
count
number
Number of dots.
width
number
Width of the container.
height
number
Height of the container.
radius
number
Collision radius of dots.
repel
boolean
Enable mouse repulsion.
attract
boolean
Enable mouse attraction.
influenceRadius
number
Radius of mouse effect in pixels.
maxForce
number
Strength of mouse effect.
speed
number
Velocity multiplier.
dotClass
string
CSS classes for dots.
Examples
Basic Force Dot
Force Dot
Interactive physics-based dot that responds to cursor movements with realistic force simulations
<template>
<MForceDot />
</template>
With Custom Count and Size
<template>
<MForceDot :count="50" :width="400" :height="400" />
</template>
With Attraction Only
<template>
<MForceDot :repel="false" :attract="true" :max-force="5" />
</template>
With Custom Styling
<template>
<MForceDot dot-class="fill-blue-500" :radius="8" />
</template>