Composables
useFluidCursor
Fluid cursor effects with particle systems.
The useFluidCursor composable provides advanced fluid simulation cursor effects using WebGL. It creates realistic fluid dynamics for cursor interactions with customizable colors and physics.
Usage
<template>
<canvas ref="canvasRef" class="absolute inset-0 w-full h-full" />
</template>
<script setup>
import { ref } from 'vue'
import { useFluidCursor } from '#imports'
const canvasRef = ref()
useFluidCursor(canvasRef, { color: 'secondary' })
</script>
Preview
<template>
<div class="min-h-screen relative overflow-hidden">
<canvas
ref="canvasRef"
class="absolute inset-0 w-full h-full"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useFluidCursor } from '#imports'
const canvasRef = ref()
useFluidCursor(canvasRef, { color: 'primary' })
</script>
Parameters
canvasRef
Ref<HTMLCanvasElement>
Reference to the canvas element.
options
object
Configuration options.
options.color
object
Colour of the fluid effect. Pass a Nuxt UI theme colour name (
'primary',
'secondary', …) and it is resolved against the theme.Configuration
The composable uses the following internal configuration:
const config = {
SIM_RESOLUTION: 128,
DYE_RESOLUTION: 1440,
CAPTURE_RESOLUTION: 512,
DENSITY_DISSIPATION: 3.5,
VELOCITY_DISSIPATION: 2,
PRESSURE: 0.1,
PRESSURE_ITERATIONS: 20,
CURL: 3,
SPLAT_RADIUS: 0.2,
SPLAT_FORCE: 6000,
SHADING: true,
COLOR_UPDATE_SPEED: 10,
PAUSED: false,
BACK_COLOR: { r: 0.5, g: 0, b: 0 },
TRANSPARENT: true
}