Progressive Acrylic Documentation
Welcome to the complete documentation for Progressive Acrylic - the advanced layered acrylic glass and progressive blur effects library for web elements.
📚 Documentation Index
Getting Started
API Reference
Examples & Tutorials
🎯 What is Progressive Acrylic?
Progressive Acrylic is a JavaScript library that brings sophisticated acrylic glass effects to web interfaces. It implements both iOS-style progressive blur and Windows Acrylic design principles using a powerful 4-layer system:
- Blur Layer - Progressive gaussian blur with customizable curves
- Luminosity Layer - Brightness, contrast, and saturation adjustments
- Tint Layer - Color overlays with solid colors or gradients
- Noise Layer - Texture and grain effects for realism
🚀 Quick Example
progressiveAcrylic(document.getElementById('myElement'), {
blur: {
enabled: true,
direction: 'bottom',
height: '50%',
maxBlur: 200
},
tint: {
enabled: true,
color: '#ffffff',
opacity: 0.1
}
});
🌟 Key Features
- 4-Layer Architecture - Blur, Luminosity, Tint, and Noise layers
- Cross-Platform Design - iOS and Windows acrylic styles
- High Performance - CSS backdrop-filter optimization
- Flexible API - Extensive customization options
- Modern Browser Support - Chrome 76+, Firefox 103+, Safari 14+, Edge 79+
📖 Learning Path
If you’re new to Progressive Acrylic, we recommend following this learning path:
- Start with the Installation Guide
- Follow the Quick Start Tutorial
- Explore Code Examples for your use case
- Dive into API Reference for advanced customization
- Create Custom Effects for unique designs
💡 Need Help?
🔗 External Resources
Last updated: January 2025