ChromaticBlur.js Plugin Demo

This page demonstrates the ChromaticBlur.js plugin — a modern, vanilla JavaScript solution for creating chromatic aberration blur effects (≈2.1 KB gzipped). The navigation bar above uses the plugin with default settings.

Try scrolling to see how the background texture interacts with the blur effect.

📦 unpkg 🚀 jsDelivr npm

Live Controls

Subtle Effect

Low offset, minimal blur

const subtle = new ChromaticBlur('.card-1', {
  redOffset: 2,
  blueOffset: -2,
  blurAmount: 2
});

Medium Effect

Balanced settings

const medium = new ChromaticBlur('.card-2', {
  redOffset: 5,
  blueOffset: -5,
  blurAmount: 4
});

Intense Effect

High offset, maximum blur

const intense = new ChromaticBlur('.card-3', {
  redOffset: 12,
  blueOffset: -12,
  blurAmount: 8,
  displacementScale: 100
});

Usage Example

// Initialize with default settings
const blur = new ChromaticBlur('.navbar');

// Or with custom options
const blur2 = new ChromaticBlur('.navbar', {
  redOffset: 8,
  blueOffset: -8,
  blurAmount: 5,
  displacementScale: 75
});

// Update dynamically
blur.update({ redOffset: 10 });

// Cleanup
blur.destroy();

Key Features

🎨 Beautiful chromatic aberration with color channel splitting

🪶 Zero dependencies - pure vanilla JavaScript

⚡ Lightweight and performant

🔧 Highly configurable with sensible defaults

🔗 Method chaining support

🧹 Automatic cleanup and memory management

♿ Accessible (screen reader friendly)

📦 Multiple module formats (ES6, CommonJS, AMD, Global)