Composables
useFluidCursor
A WebGL fluid simulation bound to a canvas ref — the swirling pointer effect behind MFluidCursor, with a color option.
The useFluidCursor composable provides advanced fluid simulation cursor effects using WebGL. It creates realistic fluid dynamics for cursor interactions with customizable colours 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
}