Modal with aurora borealis effects and fluid background animations. Features multiple color palettes, interactive particles, and smooth transitions.
This modal showcases the classic aurora borealis colors - cyan and blue tones reminiscent of the northern lights dancing across polar skies.
The Arctic palette creates a serene, otherworldly atmosphere perfect for winter-themed applications or professional dashboards.
Experience the colors of deep space with purple and magenta hues that evoke nebulae and distant galaxies.
This configuration uses increased aurora intensity and more particles for a more dramatic effect.
Green and gold tones create an organic, nature-inspired atmosphere with slower, more gentle wave animations.
Perfect for eco-friendly applications, nature photography portfolios, or wellness platforms.
Warm orange and red tones with fast-moving aurora effects create an energetic, passionate atmosphere.
Deep blues and aqua tones with fullscreen immersion and enhanced backdrop blur effects.
This fullscreen modal demonstrates maximum impact for important announcements or immersive experiences.
This modal's appearance changes based on the controls below. Experiment with different settings to see real-time updates.
Current Settings:
Five carefully crafted color palettes inspired by natural phenomena. Click any palette to experience the full modal.
Different modal sizes and entrance animations. Each button demonstrates a different combination.
Modify modal settings and see changes applied instantly. Open the modal first, then adjust parameters.
<l-aurora-modal
id="myModal"
size="large"
color-palette="cosmic"
aurora-intensity="1.5"
aurora-speed="1.2"
particle-count="30"
backdrop-blur="true"
close-on-backdrop="true"
glow-intensity="1.3">
<span slot="title">My Aurora Modal</span>
<div slot="content">
<p>Your content here...</p>
</div>
</l-aurora-modal>
<script>
const modal = document.getElementById('myModal');
// API Methods
modal.show('fade'); // Show with fade animation
modal.hide(); // Hide modal
modal.toggle(); // Toggle visibility
modal.isOpen(); // Check if open
modal.setTitle('New Title');
modal.setContent('<p>New content</p>');
// Event Listeners
modal.addEventListener('modal-open', e => {
console.log('Modal opened');
});
modal.addEventListener('modal-close', e => {
console.log('Modal closed');
});
</script>open - Initial visibility statesize - small|medium|large|fullscreencolor-palette - arctic|cosmic|forest|sunset|oceanaurora-intensity - Aurora effect strengthaurora-speed - Animation speedparticle-count - Number of particlesbackdrop-blur - Backdrop blur effectclose-on-backdrop - Close when clicking backdropanimation-type - fluid|waves|spiralglow-intensity - Interactive glow strength