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.

Tech Keywords

Name	Description
WebGPU	Modern web graphics API, successor to WebGL
Babylon.js	3D engine
Particle System	Spawns large numbers of small objects, commonly used to simulate smoke, fire, rain, and snow
Post-processing	Enhances rendering results with effects such as lens blur and color splitting
Noise	Produces more natural randomness than Math.random, commonly used for terrain, clouds, and textures

Usage Examples

Basic Usage

Set basic parameters.

顏色

最大數量: 5000

發射頻率: 100

重新產生

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. (´,,•ω•,,)

關燈

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="example-ctrl"
    />

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

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);
}