🌸 Chaerry.js

A beautiful, lightweight library for creating cherry blossom petal animations on canvas

✨ Features

• 🎨 7 Beautiful Themes - Cherry, Rose, White, Peach, Lavender, Autumn, Mint
• 🎯 Lightweight - Zero dependencies, optimized for performance
• 🎪 Customizable - Control speed, wind, count, and more
• 🔄 Multi-format - ESM, CommonJS, and UMD builds included
• 📱 Responsive - Works on all screen sizes

🎮 Demo

Check out the live demo: View Demo Page

Try different themes, adjust wind and speed, or mix multiple themes together in the demo page!

📦 Installation

npm install chaerry-js

Or via CDN:

<script src="https://unpkg.com/chaerry-js/dist/chaerry.umd.min.js"></script>

🚀 Quick Start

Using createEffect (Recommended)

import { createEffect } from 'chaerry-js';

const { effect } = createEffect('#container', {
  count: 50,
  theme: 'cherry',
  speed: 1,
  wind: 0
});

Manual Setup

import PetalEffect from 'chaerry-js';

const canvas = document.getElementById('canvas');
const effect = new PetalEffect(canvas, {
  count: 50,
  theme: 'cherry',
  speed: 1,
  wind: 0
});

Browser (UMD)

<div id="container"></div>
<script src="https://unpkg.com/chaerry-js/dist/chaerry.umd.min.js"></script>
<script>
  const { effect } = ChaerryJS.createEffect('#container', {
    count: 50,
    theme: 'cherry'
  });
</script>

🎨 Themes

Available themes: cherry, rose, white, peach, lavender, autumn, mint

// Single theme
effect.setTheme('rose');

// Multiple themes (random selection)
effect.setTheme(['cherry', 'white', 'peach']);

// Weighted themes
effect.setTheme([
  { name: 'cherry', weight: 5 },
  { name: 'white', weight: 2 }
]);

⚙️ Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | count | number | 50 | Number of petals | | theme | string\|array | 'cherry' | Color theme(s) | | speed | number | 1 | Animation speed multiplier | | wind | number | 0 | Wind effect (-1 to 1) | | autoStart | boolean | true | Start animation automatically | | loop | boolean | true | Continuously spawn new petals | | spawnInterval | number | 300 | Spawn interval in milliseconds | | fallSpeed | number | 1 | Fall speed multiplier |

📚 API

Methods

effect.start()           // Start animation
effect.stop()            // Stop animation
effect.pause()           // Pause animation
effect.resume()          // Resume animation
effect.setTheme(theme)   // Change theme
effect.setWind(wind)     // Set wind (-1 to 1)
effect.setOptions(opts)  // Update options
effect.addPetal(count)   // Add petals
effect.clear()           // Clear all petals
effect.destroy()         // Clean up and remove listeners

Exports

import PetalEffect, { 
  Petal, 
  colorThemes, 
  DEFAULT_THEME, 
  getAvailableThemes,
  createEffect,
  VERSION 
} from 'chaerry-js';

📄 License

MIT © jhin102