怕鼠的文字 text

滑鼠靠近時會躲得遠遠的文字。

TIP

此元件針對滑鼠設計，建議使用電腦或可以使用滑鼠的裝置瀏覽。

使用範例

基本用法

滑鼠靠近時，文字會遠離滑鼠。

「恐鼠症」指的是對老鼠有極端恐懼或厭惡的心理狀態，學名為 Musophobia 或 Muriphobia。這種恐懼可能源於童年經歷、文化影響、社會觀念，或是對老鼠可能帶來的疾病、骯髒環境的聯想。

查看範例原始碼

<template>
  <div class="w-full border border-gray-300 p-6">
    <text-hate-mouse
      text="「恐鼠症」指的是對老鼠有極端恐懼或厭惡的心理狀態，學名為 Musophobia 或 Muriphobia。這種恐懼可能源於童年經歷、文化影響、社會觀念，或是對老鼠可能帶來的疾病、骯髒環境的聯想。"
    />
  </div>
</template>

<script setup lang="ts">
import TextHateMouse from '../text-hate-mouse.vue'
</script>

不同組合

不同參數有不同效果。

怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕

逆走開逆走開逆走開逆走開逆走開逆走開逆走開逆走開逆走開逆走開

🀀🀁🀂🀃🀄🀅🀆🀇🀈🀉🀊🀋🀌🀍🀎🀏🀐🀑🀒🀓🀔🀕🀖🀗🀘🀖🀗🀘🀙🀚🀛🀜🀝🀞🀟🀠🀡🀢🀣🀤🀥🀦🀧🀨🀩🀪🀫

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-8 border border-gray-300 p-6 text-center">
    <text-hate-mouse
      v-for="item, i in list"
      :key="i"
      v-bind="item"
    />
  </div>
</template>

<script setup lang="ts">
import type { ExtractComponentProps } from '../../../types'
import { times } from 'remeda'
import TextHateMouse from '../text-hate-mouse.vue'

type Props = ExtractComponentProps<typeof TextHateMouse> & {
  class?: string;
}

const list: Props[] = [
  {
    text: '怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕怕',
    stiffness: 0.2,
    damping: 0,
    evasionRadius: 30,
  },
  {
    text: times(10, () => '逆走開'),
    evasionRadius: 200,
  },
  {
    text: [
      '🀀🀁🀂🀃🀄🀅🀆🀇🀈🀉🀊🀋🀌🀍🀎🀏',
      '🀐🀑🀒🀓🀔🀕🀖🀗🀘🀖🀗🀘',
      '🀙🀚🀛🀜🀝🀞🀟🀠🀡',
      '🀢🀣🀤🀥🀦🀧🀨🀩🀪🀫',

    ].join(''),
    stiffness: 0.002,
    damping: 1,
    class: 'text-2xl',
  },
]
</script>

自定義參數

變出有趣的效果吧！ԅ(´∀` ԅ)

自定義文字

閃避半徑：40

約束力：0.01

阻尼：0.05

哆啦哆啦哆啦哆啦哆啦 A 夢

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 border border-gray-300 p-6 text-center">
    <div class="flex flex-col gap-4">
      <base-input
        v-model="params.text"
        label="自定義文字"
        type="text"
        class="w-full text-left"
      />

      <base-input
        v-model.number="params.evasionRadius"
        :label="`閃避半徑：${params.evasionRadius}`"
        type="range"
        class="w-full text-left"
        :max="300"
        :step="1"
        :min="20"
      />

      <base-input
        v-model.number="params.stiffness"
        :label="`約束力：${params.stiffness}`"
        type="range"
        class="w-full text-left"
        :max="0.3"
        :step="0.001"
        :min="0.001"
      />

      <base-input
        v-model.number="params.damping"
        :label="`阻尼：${params.damping}`"
        type="range"
        class="w-full text-left"
        :max="1"
        :step="0.01"
        :min="0"
      />
    </div>

    <div class="border p-4">
      <text-hate-mouse v-bind="params" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ExtractComponentProps } from '../../../types'
import { ref } from 'vue'
import BaseInput from '../../base-input.vue'
import TextHateMouse from '../text-hate-mouse.vue'

type Props = ExtractComponentProps<typeof TextHateMouse>

const params = ref({
  text: '哆啦哆啦哆啦哆啦哆啦 A 夢',
  evasionRadius: 40,
  stiffness: 0.01,
  damping: 0.05,
} satisfies Props)
</script>

原理

基於 Matter.js 實現物理模擬效果。

基本上就是逐字轉場與物理包裝器的融合。

原始碼

元件

、範例

API

Props

interface Props {
  /** string[] 表示提供已分割好的文字 */
  text: string | string[];

  /** html tag
   *
   * @default 'p'
   */
  tag?: string;

  /** 如何切割文字
   *
   * 只有在 text 為 string 時有效
   *
   * @default /.*?/u
   */
  splitter?: RegExp | ((text: string) => string[]);

  /** 閃避半徑 */
  evasionRadius?: number;

  /** 約束力
   *
   * 表示回復原味的力量，1 表示最強，0.2 則類似軟彈簧作用
   */
  stiffness?: number;

  /** 阻尼
   *
   * 0.1 表示強烈阻尼，幾乎不會有任何震盪，0 表示沒有任何阻尼
   */
  damping?: number;
}