=== Dither Icon Animation ===

Contributors:      WordPress Telex
Tags:              block, animation, svg, dither, icon, pixel
Tested up to:      6.8
Stable tag:        0.1.0
License:           GPLv2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html

An animated SVG icon block with authentic dithering effect using square pixels masked within the icon shape.

== Description ==

The Dither Icon Animation block creates beautiful animated SVG icons with an authentic dither effect. The animation works by generating square pixels that randomly appear and disappear within the confines of the icon shape, creating a classic computer graphics dithering effect.

Key Features:
* **True Dither Effect**: Square pixels are masked within the icon shape, creating authentic pixelated animation
* **Material Design Email Icon**: Clean, recognizable email icon as the base shape
* **Customizable Color**: Full color picker control for icon and dither pixels
* **Adjustable Complexity**: Control the number of dither pixels (5-100) for different intensity levels
* **Smooth SVG Animation**: Lightweight CSS-based animations that perform well
* **Interactive Elements**: Hover to pause, click to regenerate pixels
* **Responsive Design**: Scales beautifully on all device sizes
* **Accessibility Friendly**: Respects user motion preferences

The dither effect mimics the classic computer graphics technique where limited color palettes created patterns using available colors. In this block, the square pixels randomly fade in and out within the icon boundaries, creating an organic, constantly changing pattern that draws the eye without being distracting.

Perfect for:
* Technology and digital-themed websites
* Retro or vintage design aesthetics
* Email marketing landing pages
* Creative portfolio showcases
* Adding subtle animation to contact sections

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/dither-icon-animation` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress
3. Add the "Dither Icon Animation" block to any post or page
4. Customize the color and dither complexity in the block inspector panel
5. Preview your changes and publish!

== Frequently Asked Questions ==

= How does the dither effect work? =

The dither effect uses SVG masking technology. Square pixels are generated randomly within a 24x24 viewBox, but only the portions that fall within the email icon shape are visible. This creates the authentic "dithering" look where pixels appear to generate the icon shape.

= Can I control the animation speed? =

The base animation timing is optimized for visual appeal, but the randomized delays create natural variation. Hover over the icon to pause the animation for closer inspection.

= How many dither pixels can I use? =

You can set between 5-100 dither pixels. Start with 15-30 for subtle effects, or go up to 50-100 for more intense, busy animations. Higher numbers may impact performance on older devices.

= Does this work on mobile devices? =

Yes! The block is fully responsive and includes optimized sizing for tablets and mobile devices. The SVG format ensures crisp rendering at any size.

= Can I use different colors for the pixels? =

Currently, all dither pixels use the same color as the main icon for visual consistency. This matches authentic dithering techniques where a single color creates patterns through density variation.

= Will this slow down my website? =

No, the animations are CSS-based and very lightweight. The SVG format is optimal for web delivery, and the JavaScript enhancements are minimal and performance-optimized.

== Screenshots ==

1. The dither icon animation block in the Gutenberg editor showing the inspector controls
2. Low complexity dither effect (15 pixels) showing subtle animation
3. High complexity dither effect (50 pixels) showing intense pixel generation
4. Color customization options in the inspector panel
5. Mobile responsive view showing scaled animation

== Changelog ==

= 0.1.0 =
* Initial release with authentic square pixel dithering
* SVG masking for true icon-shaped pixel generation
* Material Design email icon implementation
* Full color customization support
* Adjustable dither complexity (5-100 pixels)
* Interactive hover and click effects
* Responsive design optimization
* Performance-optimized animations

== Technical Details ==

The block uses modern web standards including:
* SVG 2.0 masking for pixel containment
* CSS3 animations with hardware acceleration
* Vanilla JavaScript for enhanced interactivity
* WordPress block editor integration
* Mobile-first responsive design

== Roadmap ==

Future versions may include:
* Additional Material Design icons (phone, location, etc.)
* Color gradient dithering options
* Animation speed controls
* Custom icon upload capability
* Accessibility motion controls