Skip to main content

​
Installation

npx inspira-ui@latest add sleek-line-cursor

​
Usage

<template>
  <SleekLineCursor
    :trails="20"
    :size="50"
    :friction="0.5"
    :dampening="0.25"
    :tension="0.98"
  />
</template>

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

​
Props

Prop NameTypeDefaultDescription
classstring | string[]undefinedAdditional CSS classes for the canvas container element.
trailsnumber20Number of trailing lines rendered behind the cursor.
sizenumber50Number of spring-connected nodes per trail.
frictionnumber0.5Global friction applied to velocity.
dampeningnumber0.25Velocity damping applied between connected nodes.
tensionnumber0.98Reduces spring intensity across the tail, giving a fluid tapering motion.
This component uses pointer-events-none and is fixed fullscreen by default. You can extend or override its styling via the class prop.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us