Sakura Fubuki bg

Have you seen Makoto Shinkai's classic film "5 Centimeters Per Second"?

I heard it's returning to the big screen soon. If you're interested, I recommend going to experience the heartache together. ᕕ( ﾟ ∀。)ᕗ (just kidding)

The scenery in the film is truly beautiful -- the cherry blossoms falling are like poetry and painting.

Paired with Masayoshi Yamazaki's "One more time, One more chance", the atmosphere is spot on, brimming with melancholy.

Here's a review I thought was really well written -- it contains spoilers, so proceed at your own discretion.

Now let's experience the romance of falling cherry blossoms right on a webpage. (´,,•ω•,,)

Tech Keywords

Name	Description
WebGPU	Modern web graphics API, successor to WebGL
Babylon.js	3D engine
ThinInstance	Lightweight instancing for efficiently rendering large numbers of identical geometries with fewer draw calls
Post-processing	Enhances rendering results with effects such as lens blur and color splitting
Dynamic Texture	A texture that can be modified at runtime, commonly used to generate patterns or text on the fly

Usage Examples

Basic Usage

Set basic parameters.

數量: 500

重新產生

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

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

    <bg-sakura-fubuki
      v-slot="{ fps }"
      :key="key"
      :capacity="quantity"
      :particle-size="{ width: 1.05, height: 1.5 }"
      class="bg h-full w-full"
    >
      <div class="absolute left-0 top-0 p-4 opacity-40">
        {{ fps }}
      </div>
    </bg-sakura-fubuki>
  </div>
</template>

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

const { t } = useI18n()

const quantity = ref(500)

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

<style scoped lang="sass">
.text-layer
  background: linear-gradient(20deg, light-dark(#def4ff, #1a2a3a), light-dark(#FFF, #222))
</style>

Background

啟用

View example source code

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

    <transition name="opacity">
      <bg-sakura-fubuki
        class="left-0 top-0 z-50 h-full w-full duration-500 !fixed"
        :class="classes"
      />
    </transition>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseCheckbox from '../../base-checkbox.vue'
import BgSakuraFubuki from '../bg-sakura-fubuki.vue'

const { t } = useI18n()

const enable = ref(false)

const classes = computed(() => ({
  'opacity-0': !enable.value,
  'opacity-100': enable.value,
}))
</script>

How It Works

Uses Babylon.js to generate solid particles, which enables camera post-processing effects. (≖‿ゝ≖)✧

Source Code

Component

、Examples

API

Props

interface Props {
  /** 粒子貼圖 */
  particleSrc?: string;
  /** 粒子尺寸 */
  particleSize?: Record<'width' | 'height', number>;
  /** 粒子容量 */
  capacity?: number;
  /** 粒子移動速度。
   * - 正 x：往左
   * - 正 y：往上
   * - 正 z：射出螢幕方向
   */
  velocity?: Record<'x' | 'y' | 'z', number>;
}