Colorful Particles Carousel carousel

A gorgeous carousel that shoots out tons of colorful particles! ੭ ˙ᗜ˙ )੭

Inspired by this carousel on Envato.

Tech Keywords

Name	Description
Vue Transition	Built-in component that animates the enter/leave of a single element
Babylon.js	3D engine
WebGPU	Modern web graphics API, successor to WebGL
Particle System	Spawns large numbers of small objects, commonly used to simulate smoke, fire, rain, and snow
Canvas getImageData	Reads pixel data from a specified canvas region
Memoization	Caches function results to improve performance and avoid repeated computation
Physics Simulation	Simulates real-world physics such as gravity, collisions, and velocity
Simplex Noise	Improved Perlin Noise that computes faster without directional bias, commonly used in procedural generation
Post-processing	Enhances rendering results with effects such as lens blur and color splitting

Usage Examples

Basic Usage

When switching images, particles matching the colors at corresponding image positions are generated.

0

View example source code

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="flex justify-center">
      <carousel-colorful-particles
        ref="carouselRef"
        v-slot="{ fps, isLoading }"
        :src-list
        class="aspect-video"
      >
        <div class="absolute left-0 top-0 p-4 text-white">
          {{ fps }}
        </div>

        <transition name="opacity">
          <div
            v-if="isLoading"
            class="absolute h-full w-full flex-center bg-black/50"
          >
            <div class="flex flex-col items-center gap-4">
              <div class="h-10 w-10 animate-spin border-4 border-white border-t-transparent rounded-full" />

              <span class="text-2xl text-white tracking-widest">
                {{ t('loading') }}
              </span>
            </div>
          </div>
        </transition>
      </carousel-colorful-particles>
    </div>

    <div class="w-full flex flex-col gap-4">
      <div class="w-full flex gap-4">
        <base-btn
          :label="t('prev')"
          class="flex-1"
          @click="carouselRef?.prev()"
        />
        <base-btn
          :label="t('next')"
          class="flex-1"
          @click="carouselRef?.next()"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import BaseBtn from '../../base-btn.vue'
import CarouselColorfulParticles from '../carousel-colorful-particles.vue'

const carouselRef = ref<InstanceType<typeof CarouselColorfulParticles>>()

const srcList = [
  '/low/painting-codfish-rain.webp',
  '/low/photography-magnificent-clouds-over-stone-coast.webp',
  '/low/photography-sparrow-on-streetlamp.webp',
  '/low/photography-afternoon-cicada-chirping.webp',
  '/low/photography-big-stupid-bird.webp',
  '/low/photography-ears-of-rice.webp',
  '/low/photography-fireworks.webp',
  '/low/photography-whispers-of-the-setting-sun.webp',
  '/low/photography-street-cat.webp',
  '/low/profile.webp',
]

const { t } = useI18n()
</script>

<style scoped lang="sass">
.opacity
  &-enter-active, &-leave-active
    transition-duration: 0.4s
  &-enter-from, &-leave-to
    opacity: 0 !important
</style>

How It Works

Uses babylon.js ParticleSystem with custom startPositionFunction and updateFunction.

Reference: Customizing Particles

Source Code

Component

、Examples

API

Props

interface Props {
  index?: number;
  srcList: string[];
  /** 轉場時間。單位 ms
   *
   * @default 4000
   */
  duration?: number;

  /** 不指定則所有效果輪流 */
  emitEffect?: EmitEffect;
}

Emits

const emit = defineEmits<{
  'update:index': [index: number];
}>()

Methods

defineExpose({
  next,
  prev,
})