Skip to main content

​
Installation

npx inspira-ui@latest add fluid-cursor

​
Usage

<template>
  <FluidCursor />
</template>

<script setup lang="ts">
import FluidCursor from "@/components/inspira/ui/cursors/FluidCursor.vue";
</script>

​
Props

Prop NameTypeDefaultDescription
simResolutionnumber128Resolution for the simulation grid affecting fluid detail and performance.
dyeResolutionnumber1440Resolution for the fluid dye (color) texture.
captureResolutionnumber512Resolution for capturing input events.
densityDissipationnumber3.5Rate at which color density dissipates over time.
velocityDissipationnumber2Rate at which velocity dissipates over time, affecting fluid momentum persistence.
pressurenumber0.1Pressure factor used in fluid physics calculations.
pressureIterationsnumber20Number of iterations for pressure solver accuracy.
curlnumber3Intensity of curl/vorticity effect to enhance swirling motions.
splatRadiusnumber0.2Radius of the pointer’s splat effect in the fluid.
splatForcenumber6000Force applied by the pointer to the fluid on interaction.
shadingbooleantrueEnable or disable shading effects for depth and light on fluid colors.
colorUpdateSpeednumber10Speed at which pointer colors update dynamically.
backColorobject{ r: 0.5, g: 0, b: 0 }Background color of the fluid in RGB format.
transparentbooleantrueWhether the canvas background is transparent.
classstringundefinedAdditional CSS classes for the outer container div.

​
Credits

  • Inspired from Fluid Cursor by Cursify
  • Utilizes WebGL 1/2 context and custom GLSL shaders for fluid physics and rendering.

Build docs developers (and LLMs) love

Get started for freeTalk to us