Futuristic Cursor cursor

A cool sci-fi cursor. (⌐■_■)b

TIP

This component is designed for mouse input. It is recommended to use a computer or a device with a mouse.

Usage Examples

Basic Usage

Changes style based on the element being touched.

Show Cursor

POINTER

NOT_ALLOWED

WAIT

View example source code

<template>
  <div class="font-orbitron w-full flex flex-col select-none gap-4 py-10">
    <div class="flex flex-col items-center justify-center gap-[6vh]">
      <base-checkbox
        v-model="visible"
        :label="t('showCursor')"
        class="cursor-pointer border border-l-4 p-4"
      />

      <div class="card bg-pointer cursor-pointer p-4">
        POINTER
      </div>

      <div class="card bg-not-allowed cursor-not-allowed p-4">
        NOT_ALLOWED
      </div>

      <div class="card cursor-wait border-x-[2px] border-sky-400/50 px-1">
        <div class="h-full w-full flex flex-center bg-sky-300/50 p-4 px-8">
          WAIT
        </div>
      </div>
    </div>

    <cursor-futuristic
      v-if="visible"
      class="z-[9999]"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseCheckbox from '../../base-checkbox.vue'
import CursorFuturistic from '../cursor-futuristic.vue'

interface Props {
  visible?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  visible: true,
})

const visible = ref(props.visible)

const { t } = useI18n()
</script>

<style lang="sass" scoped>
.card
  font-weight: 700
  transition-duration: 0.3s
  &:hover
    opacity: 0.3

.bg-pointer
  color: light-dark(#111, #FFF)
  background-color: light-dark(#FFF, #222)
  $bg-color: light-dark(#EEE, #555)
  background-image: linear-gradient(45deg, $bg-color 25%, transparent 25%, transparent 75%, $bg-color 75%, $bg-color), linear-gradient(45deg, $bg-color 25%, transparent 25%, transparent 75%, $bg-color 75%, $bg-color)
  background-size: 10px 10px
  background-position: 0 0, 5px 5px
.bg-not-allowed
  color: light-dark(#7f1d1d, #e83a3a)
  background: repeating-linear-gradient(135deg, light-dark(#ffadad, #6b2828) 0 10px, light-dark(#FFF, #222) 10px 20px)
</style>

How It Works

Specifically leverages anime.js v4's createAnimatable. This feature ensures that when the same animation element is called repeatedly, transitions remain smooth and animations won't overlap causing keyframe misalignment.

Try quickly moving the cursor between different styles -- you'll notice the cursor animation is not only very smooth but also never gets stuck on a keyframe. ◝( •ω• )◟

anime.js v4's createAnimatable and Vue's reactivity system are truly a match made in heaven. I'll write an article to share about it when I get the chance. ♪( ◜ω◝و(و

Source Code

Component

、Examples

API

Props

interface Props {
  state?: `${CursorState}`;
}