Firefly bg

Fill your webpage with tiny flickering fireflies dancing through the air. ヾ(◍'౪`◍)ﾉﾞ

Have you ever seen a sea of fireflies?

I used to think they were just little glowing bugs, nothing special, right? (´・ω・`)

But when I finally saw them in person, I felt as if I were bathing in the Milky Way -- pure romance.

Photos just can't capture the feeling of being there. I highly recommend going to see them at least once. ( ´ ▽ ` )ﾉ

A gentle night breeze interweaves with dancing fireflies, weaving whispers of light like a galaxy.

Murmuring through one sleepless night after another.

Usage Examples

Basic Usage

Set basic parameters.

Color

Max Quantity: 5000

Emit Rate: 100

Regenerate

0

View example source code

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <div class="flex flex-col gap-2 border p-4">
      <div class="flex gap-6">
        <div class="flex flex-col">
          <label class="text-sm font-bold">
            {{ t('color') }}
          </label>

          <input
            v-model="color1"
            type="color"
          >

          <input
            v-model="color2"
            type="color"
          >
        </div>

        <base-input
          v-model.number="quantity"
          type="range"
          :label="`${t('maxQuantity')}: ${quantity}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="10000"
        />

        <base-input
          v-model.number="emitRate"
          type="range"
          :label="`${t('emitRate')}: ${emitRate}`"
          class="flex-1"
          :min="100"
          :step="1"
          :max="5000"
        />
      </div>

      <div
        class="w-full cursor-pointer select-none border rounded px-4 py-2 text-center"
        @click="refresh()"
      >
        {{ t('regenerate') }}
      </div>
    </div>

    <bg-firefly
      :key="key"
      v-slot="{ fps }"
      class="bg h-full w-full"
      :color="[color1, color2]"
      :capacity="quantity"
      :emit-rate="emitRate"
    >
      <div class="absolute left-0 top-0 p-4 text-white">
        {{ fps }}
      </div>
    </bg-firefly>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseInput from '../../base-input.vue'
import BgFirefly from '../bg-firefly.vue'

const { t } = useI18n()

const color1 = ref('#22f534')
const color2 = ref('#b3ff00')
const quantity = ref(5000)
const emitRate = ref(100)

const key = ref('')
function refresh() {
  key.value = Math.random().toFixed(5)
}
</script>

<style scoped lang="sass">
.bg
  background: linear-gradient(to top, #102b19, #191f1b)
</style>

Background

Calm your mind and enjoy the tranquility of the night. (´,,•ω•,,)

Lights Off

View example source code

<template>
  <div class="w-full flex flex-col gap-4 py-2">
    <base-checkbox
      v-model="enable"
      :label="t('toggleLight')"
      class="border rounded p-4"
    />

    <bg-firefly
      v-if="enable"
      class="left-0 top-0 z-50 h-full w-full !fixed"
      color="#3cff00"
    />
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { onUnmounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseCheckbox from '../../base-checkbox.vue'
import BgFirefly from '../bg-firefly.vue'

const { t } = useI18n()

const enable = ref(false)

const { isDark } = useData()

const oriValue = isDark.value

watch(enable, (value) => {
  isDark.value = value
})

onUnmounted(() => {
  isDark.value = oriValue
})
</script>

<style scoped lang="sass">
</style>

How It Works

Uses WebGPU and Babylon.js particle system -- performance is excellent. ( •̀ ω •́ )✧

Source Code

Component

、Examples

API

Props

type Size = number | Record<'max' | 'min', number>
type CanvasSize = Record<'width' | 'height', number>
/** string 請使用包含 # 之 HEX 格式 */
type Color = Record<'r' | 'g' | 'b', number> | string

interface Props {
  /** 粒子容量。同時存活的最大粒子數量 */
  capacity?: number;
  /** 每一幀最大發射數量 */
  emitRate?: number;
  /** 如果設定兩種顏色，則會隨機取兩色之間的顏色 */
  color?: Color | [Color, Color];
  /** 可以依 canvas 尺寸設定粒子尺寸 */
  size?: Size | ((canvasSize: CanvasSize) => Size);
}