particle-avatar

Interactive 3D particle animation system for Vue 3.

Features

• 🎨 3D particle animation system with smooth transitions
• 🔄 Multiple animation strategies (pulse, rotate, wave, shake, bounce, orbit)
• ⚡ WebGL renderer with Canvas2D fallback for broad compatibility
• 🎯 Shape generation from SVG paths
• 🧩 Vue 3 component with full TypeScript support

Installation

npm install particle-avatar

Usage

Basic Example

<script setup>
import { ParticleCanvas } from 'particle-avatar'
import 'particle-avatar/style.css'
</script>

<template>
  <ParticleCanvas :width="400" :height="400" />
</template>

With State (AI Assistant)

<script setup>
import { ParticleCanvas } from 'particle-avatar'
import 'particle-avatar/style.css'
</script>

<template>
  <ParticleCanvas
    :width="400"
    :height="400"
    state="listening"
    :particle-count="300"
    :show-controls="false"
    :transparent="true"
  />
</template>

API

ParticleCanvas Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | width | number | 300 | Canvas width in pixels | | height | number | 300 | Canvas height in pixels | | state | AssistantState | 'idle' | AI state: 'idle', 'listening', 'thinking', 'speaking', 'success', 'error' | | animation | string | 'auto' | Animation type: 'auto', 'none', 'pulse', 'rotate', 'wave', 'shake', 'bounce', 'orbit' | | particleCount | number | 500 | Number of particles to render | | showControls | boolean | false | Show debug control panel | | transparent | boolean | false | Use transparent background | | backgroundColor | string | '#0a0a1a' | Canvas background color |

Assistant States

• idle: Sphere animation (default)
• listening: Microphone icon with wave animation
• thinking: Loading spinner with orbit animation
• speaking: Sound wave with pulse animation
• success: Checkmark icon
• error: Error icon

Animation Types

• auto: Automatically select based on current icon
• none: No animation effect
• pulse: Particles pulse in size
• rotate: Particles rotate around the center
• wave: Wave motion through particles
• shake: Subtle shaking motion
• bounce: Bouncing animation effect
• orbit: Particles orbit around the center point

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run tests
npm test

# Type check
npm run type-check

License

MIT © lensator