Particles

Installation

pnpm dlx kliping@latest add particles

Usage

Digambar di <canvas>, ukurannya mengikuti wadah. color berupa hex — untuk mode gelap, ganti nilainya dari state tema Anda. Makin besar staticity, makin sedikit partikel bereaksi pada kursor.

<script setup lang="ts">
import { Particles } from '@/components/ui/particles'
</script>

<template>
  <div class="relative h-72 overflow-hidden">
    <Particles class="absolute inset-0" color="#71717a" :quantity="120" />
  </div>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
Files	components/ui/particles/particles.vue components/ui/particles/index.ts

API Reference

Prop	Type	Default	Description
quantity?	number	100	How many particles to draw.
staticity?	number	50	The higher it is, the less the particles react to the pointer.
ease?	number	50	The higher it is, the slower particles catch up to their new position.
size?	number	0.4	The base size of each particle.
color?	string	"#ffffff"	The particle color, in hex.
vx?	number	0	A constant horizontal drift.
vy?	number	0	A constant vertical drift.

Data attribute	Value
[data-slot]	"particles"

Credits

Berasal dari Magic UI (MIT, Copyright (c) Magic UI). Rantai lengkapnya di Credits.