Elevate your UI with a cinematic, grainy orbital glow.
Eclipse Aura is a high-performance React component designed for Framer. It creates a mesmerizing "solar eclipse" effect, featuring a central core surrounded by a dynamic, customizable ring of dancing particles. Perfect for hero sections, feature highlights, or adding a sense of "prestige" to your dark-mode designs.
Canvas-Optimized Performance: Uses HTML5 Canvas for the grain particles, ensuring smooth 60fps animations even with thousands of particles.
Dynamic Particle Ring: Customize the "Grain" density, size, speed, and wobble (noise) to create anything from a subtle dust ring to a chaotic energy field.
Interactive Pulsing: Optional Framer Motion-powered "breathing" effect for the central glow.
Fully Customizable: Control every aspect—core size, glow spread, ring offset, and noise intensity—directly from the Framer properties panel.
Responsive by Design: Automatically adjusts to its container size while maintaining high-DPI clarity for Retina displays.
Core Size: Adjust the diameter of the central eclipse body.
Core Color: Set the color of the center; typically black to achieve the eclipse aesthetic.
Glow Color: The color of the soft light radiating from behind the core.
Blur & Spread: Fine-tune the softness and the reach of the surrounding aura.
Pulse Toggle: Enable a rhythmic "breathing" animation for the glow.
Duration: Control the speed of the pulse, measured in seconds per cycle.
Grain Count: The number of orbiting particles, supporting up to 2,000 units.
Grain Color: The specific color of the orbital dust and particles.
Speed: How fast the particles rotate around the central core.
Noise: The "jitter" or wobble intensity of the particles' orbital path.
Ring Offset: Push the particles further away from or closer to the core.
Ring Width: Adjust the thickness of the orbital path area.
All sales are final due to the nature of digital products. Please review all details before purchasing.
Free lifetime updates & email support. Questions? Reach out via email integrystudio@gmail.com or on LinkedIn.
Need help setting up your website or integrating this component?
Reach out, and we’ll help get it running perfectly in your Framer project.
Integry
