Thunder Breathing cursor

Lightning strikes when you move fast! =͟͟͞͞( •̀д•́)✧

Inspired by Zenitsu's epic Thunderclap and Flash from Demon Slayer.

No breathing technique required to unleash lightning! ( ´ ▽ ` )ﾉ

TIP

This component is designed for mouse input. It's recommended to view it on a computer or on a device that can use a mouse.

Usage Examples

Basic Usage

Move your mouse quickly to produce the lightning effect.

Show Effect

View example source code

<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>

How It Works

We use "Midpoint Displacement" to draw the lightning paths. ◝( •ω• )◟

The concept is quite simple:

1. Draw a straight line from start to end

2. Find the midpoint and displace it perpendicular to the line

3. Repeat for each segment

4. Halve the displacement each iteration for finer detail

After a few rounds, a plain straight line transforms into a jagged lightning path. ♪( ◜ω◝و(و

Glow Effect

A path alone isn't enough though. A single white line just looks like... a white line, not lightning at all. (´-ω-`)

The trick is to draw the same path in multiple layers, with decreasing line width and increasing opacity from outside to inside. Stacking them creates a glowing visual effect.

Combined with globalCompositeOperation: 'lighter', overlapping areas become brighter automatically, making lightning intersections especially intense.

Pretty cool, right? ( •̀ ω •́ )✧

Trigger Mechanism

useMouseVelocity tracks mouse movement speed (px/ms). When the speed exceeds the threshold, a lightning bolt is fired from the last trigger point to the current position.

When speed drops, the starting point resets. Next time you accelerate, it starts accumulating again, so each fast swipe produces an independent lightning trail. (ゝ∀・)b

Jitter & Companion Bolts

To make the effect more natural, lightning bolts jitter slightly during their lifetime, simulating the flickering of real lightning.

Each strike also has a chance to produce companion bolts, making the scene denser and more dramatic. These are all randomized, so the effect is different every time, just like real lightning. (`・ω・´)b

Source Code

Component

、Examples

API

Props

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