Skip to main content

​
Installation

npx inspira-ui@latest add tailed-cursor

​
Usage

<template>
  <TailedCursor
    :colors="['#ff9346', '#7cff67', '#ffee51', '#00d8ff']"
    :baseSpring="0.03"
    :baseFriction="0.9"
    :baseThickness="30"
    :enableShaderEffect="true"
  />
</template>

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

​
Props

Prop NameTypeDefaultDescription
colorsstring[]["#ff9346", "#7cff67", "#ffee51", "#00d8ff"]Array of colors for each tail ribbon.
baseSpringnumber0.03Spring strength for tail movement responsiveness.
baseFrictionnumber0.9Friction factor slowing down the tail movement.
baseThicknessnumber30Base thickness of the tail ribbons.
offsetFactornumber0.05Horizontal offset factor between each ribbon line.
maxAgenumber500Maximum age for tail segments controlling their fade timing.
pointCountnumber50Number of points composing each ribbon tail.
speedMultipliernumber0.6Speed multiplier controlling the animation speed.
enableFadebooleanfalseEnables fading effect on tail edges.
enableShaderEffectbooleanfalseEnables dynamic shader wave effect on ribbons.
effectAmplitudenumber2Amplitude of the shader wave effect when enabled.
backgroundColornumber[][0, 0, 0, 0]RGBA background clear color for the WebGL canvas.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us