雷之呼吸 cursor

滑鼠快速移動時劈出閃電！=͟͟͞͞( •̀д•́)✧

靈感來自鬼滅之刃中，善逸帥到爆炸的霹靂一閃

不用學呼吸法，也能放雷電了！( ´ ▽ ` )ﾉ

TIP

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

技術關鍵字

名稱	描述
Canvas 2D API	基礎的 2D 繪圖 API，可以高效繪製比 DOM 更複雜的圖形
Midpoint Displacement	中點位移法，用於生成自然不規則的路徑，常用於地形生成、雲朵、材質等

使用範例

基本用法

快速移動滑鼠發動霹靂一閃！=͟͟͞͞( •̀д•́)✧

顯示效果

查看範例原始碼

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

    <cursor-thunder-breathing
      v-if="visible"
      class="pointer-events-none fixed left-0 top-0 w-dvw h-dvh"
    />
  </div>
</template>

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

const visible = ref(false)

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

原理

這裡我們使用「中點位移法」（Midpoint Displacement）來繪製閃電路徑。◝( •ω• )◟

概念其實很單純：

1. 先畫一條從起點到終點的直線

2. 找到中點，往垂直方向隨機偏移

3. 對每一段重複同樣的操作

4. 每次迭代把偏移量減半，讓細節越來越精緻

重複個幾輪下來，一條平淡無奇的直線就會變成鋸齒狀的閃電路徑了。♪( ◜ω◝و(و

光暈效果

不過光有路徑還不夠，一條白線看起來就只是一條白線，完全沒有雷電的感覺。(´-ω-`)

這裡用了一個偷吃步，同一條路徑畫好幾層，從外到內線寬遞減、透明度遞增，疊加起來就會產生發光的視覺效果。

搭配 globalCompositeOperation: 'lighter'，重疊的地方會自動加亮，雷電交錯處就會特別刺眼。

是不是很酷啊！( •̀ ω •́ )✧

觸發機制

透過 useMouseVelocity 追蹤滑鼠的移動速度（px/ms），當速度超過門檻值時，從上一次的觸發點到目前位置劈出一道雷電。

速度降低後會重置起點，下次加速時重新開始累積，所以每次快速揮動都會是一段獨立的雷電軌跡。(ゝ∀・)b

抖動與伴隨雷電

為了讓效果更自然，雷電在存活期間會持續微幅抖動，模擬真實閃電的閃爍感。

每次 strike 還有機率產生伴隨雷電，讓畫面更加密集震撼。不過這些都是隨機的，所以每次看到的效果都不一樣，就像真的雷電一樣。(`・ω・´)b

原始碼

元件

、範例

API

Props

interface Props {
  /** 觸發雷電的最低速度（px/ms），預設 2 */
  triggerSpeed?: number;
  /** 雷電起點與滑鼠之間的最小距離（px），預設 50 */
  minStrikeDistance?: number;
  /** 雷電配色列表，每次 strike 隨機選取一組 */
  colorPaletteList?: ColorPalette[];
  zIndex?: number;
}