Tangram Cursor cursor

A tangram that morphs with mouse cursor states, making your cursor super cool. ヽ(●`∀´●)ﾉ

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

Continuously transforms based on the cursor state.

Show

none

pointer

text

wait

move

not-allowed

help

crosshair

zoom-in

zoom-out

grab

grabbing

vertical-text

cell

copy

alias

View example source code

<template>
  <div class="w-full flex flex-col gap-10 p-6">
    <div class="flex flex-col gap-4 border rounded">
      <base-checkbox
        v-model="visible"
        :label="t('show')"
        class="p-4"
      />
    </div>

    <div class="grid grid-cols-2 w-full gap-10 md:grid-cols-3">
      <div
        v-for="item in list"
        :key="item"
        class="border px-8 py-4 text-center"
        :style="{ cursor: item }"
      >
        <div class="text-sm opacity-60">
          {{ item }}
        </div>
      </div>
    </div>

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

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

interface Props {
  visible?: boolean;
}

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

const visible = ref(props.visible)

const list: CSSProperties['cursor'][] = [
  'none',
  'pointer',
  'text',
  'wait',
  'move',
  'not-allowed',
  'help',
  'crosshair',
  'zoom-in',
  'zoom-out',
  'grab',
  'grabbing',
  'vertical-text',
  'cell',
  'copy',
  'alias',
]

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

How It Works

Uses useElementByPoint to get the currently touched element.

Then uses getComputedStyle to get the target's specific CSS properties and sets the cursor style via the cursor property.

Finally, it's all about anime.js and SVG animations. (´,,•ω•,,)

Source Code

Component

、Examples

API

Props

type Cursor = NonNullable<CSSProperties['cursor']>

interface Props {
  /** 7 個積木顏色 */
  colors?: [string, string, string, string, string, string, string];
  size?: string;
  offsetX?: number | ((cursor: Cursor) => number);
  offsetY?: number | ((cursor: Cursor) => number);

  /** 可自定義位置。預設跟隨滑鼠 */
  positionProvider?: () => { x: number; y: number };
}