Awesome Sparkles

Add beautiful animated sparkle separators to your WordPress site.

Description

Awesome Sparkles extends the core WordPress Separator block with twinkling star patterns. Add visual interest to your pages with customizable sparkle effects.

Features:

• Animated or static sparkle patterns
• Adjustable sparkle size (8-35px)
• Vertical spread control
• Randomized twinkle timing
• Full color and gradient support
• Respects reduced motion preferences

Previously part of Awesome Squiggle - This plugin was extracted from Awesome Squiggle to provide a focused, standalone sparkle separator experience.

Installation

1. Upload the plugin files to /wp-content/plugins/awesome-sparkles
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Add a Separator block and select the "Animated Sparkle" or "Static Sparkle" style

Frequently Asked Questions

How do I add sparkles to my page?

1. Add a Separator block to your page or post
2. In the block toolbar or settings panel, select the "Animated Sparkle" or "Static Sparkle" style
3. Customize the sparkle settings in the block inspector panel

Can I use gradients with sparkles?

Yes! Awesome Sparkles fully supports WordPress gradients. Simply select a gradient color in the block's color settings.

How do I make the sparkles stop animating?

Choose the "Static Sparkle" style instead of "Animated Sparkle", or users with reduced motion preferences will automatically see static sparkles.

Will sparkles slow down my site?

No. Sparkles use efficient CSS animations and SVG graphics. The frontend JavaScript only runs when sparkle separators are present on the page.

Screenshots

1. Animated sparkle separator with default settings
2. Customizing sparkle size and vertical spread
3. Sparkle separator with gradient colors
4. Block style selection in the editor

Changelog

2026.02.20

• Fixed alignfull rendering - sparkles no longer appear stretched on full-width blocks
• Added proper width calculation for block themes with global padding
• Added support for .is-layout-constrained and .wp-block-post-content containers
• Added editor-specific alignfull CSS for correct preview in block editor

2026.01.28

• Initial release (extracted from Awesome Squiggle v1.3.2)
• Animated and static sparkle patterns
• Customizable sparkle size (8-35px)
• Vertical spread control (0-30px)
• Twinkle randomness control (0-200%)
• Container height options (50-200px)
• Full color and gradient support
• Reduced motion accessibility support
• Dynamic sparkle regeneration on resize

Upgrade Notice

2026.02.20

Fixes stretched/distorted sparkles when using full-width (alignfull) alignment.

2026.01.28

Initial release of the standalone Awesome Sparkles plugin.

Building from Source

This plugin is built using the WordPress Scripts toolchain.

Requirements:

• Node.js 18+
• npm 9+

Build Commands:

npm install              # Install dependencies
npm start               # Development with hot reload
npm run build           # Development build
npm run build:production # Production build (strips debug code)
npm run plugin-zip      # Create WordPress plugin ZIP

Source Code: Human-readable source code is located in the /src/ directory:

• src/index.js - Block extension logic
• src/style.css - Sparkle styles and animations
• src/frontend.js - Dynamic sparkle regeneration
• src/block.json - Block metadata