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

Usage Examples

Basic Usage

Set basic parameters.

Quantity: 500

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">
        <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, #def4ff, #FFF)
</style>

Background

Enable

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="border rounded p-4"
    />

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

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

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