Composables
useCanvasCursor
Custom cursor implementation with canvas-based effects.
useCanvasCursor
The useCanvasCursor composable provides a custom cursor implementation with canvas-based effects. It creates fluid, animated cursor trails that follow mouse movements.
Usage
<template>
<canvas
ref="canvasRef"
class="absolute w-full h-full inset-0"
/>
</template>
<script setup>
import { ref } from 'vue'
import { useCanvasCursor } from '#imports'
const canvasRef = ref()
useCanvasCursor(canvasRef, { color: 'primary' })
</script>
Preview
<template>
<div class="min-h-screen relative overflow-hidden">
<canvas
ref="canvasRef"
class="absolute w-full h-full inset-0"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useCanvasCursor } from '#imports'
const canvasRef = ref()
useCanvasCursor(canvasRef, { color: 'primary' })
</script>
Parameters
canvasRef
Ref<HTMLCanvasElement>
Reference to the canvas element.
options
object
Configuration options.
options.color
object
Color of the cursor trail. Can be a theme color name or 'random'.
Configuration
The composable uses the following internal configuration:
const config = {
friction: 0.5,
trails: 20,
size: 50,
dampening: 0.25,
tension: 0.98
}