SeasonalFX

Production-grade ambient effects for modern web applications

🏠 Home 🎮 Live Demo 📚 Documentation 💻 GitHub 📦 npm Package

<5KB

Gzipped Bundle Size

Runtime Dependencies

Seasonal Effects

100%

TypeScript

🎨

Multi-Season Effects

Winter snow, spring petals, summer dust, autumn leaves, and event confetti. Each with multiple variants and customizable intensity.

⚡

Performance First

Optimized rendering with FPS throttling, particle limits, and efficient canvas operations. Automatic performance monitoring built-in.

♿

Accessibility Built-in

Automatically respects prefers-reduced-motion, mobile-friendly, and provides full control over animation behavior.

🔧

Framework Agnostic

Vanilla JS core with React adapter included. Works with Next.js, Vue, Angular, Svelte, and any modern framework.

🌍

SSR Safe

Fully compatible with server-side rendering. No window access at import time. Works perfectly with Next.js, Astro, and Nuxt.

📦

Zero Dependencies

Clean, minimal implementation with no runtime dependencies. Production-ready code you can trust.

Quick Start

npm install seasonalfx

import { createSeasonalFX } from 'seasonalfx';

const fx = createSeasonalFX({
  target: document.body,
  autoSeason: true,
  intensity: 'subtle',
});

fx.start();

React Example

import { SeasonalFX } from 'seasonalfx/react';

function App() {
  return (
    <div style={{ position: 'relative', height: '100vh' }}>
      <SeasonalFX autoSeason intensity="subtle" />
      <h1>Your Content</h1>
    </div>
  );
}