5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Te89,

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.

Tutorial

✨ Key Features

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 Settings

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 & Aura

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 Animation

Pulse Toggle: Enable a rhythmic "breathing" animation for the glow.

Duration: Control the speed of the pulse, measured in seconds per cycle.

🧂 Grain Particles

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 Geometry

Ring Offset: Push the particles further away from or closer to the core.

Ring Width: Adjust the thickness of the orbital path area.

Refund Policy

All sales are final due to the nature of digital products. Please review all details before purchasing.

Questions & Support

Free lifetime updates & email support. Questions? Reach out via email integrystudio@gmail.com or on LinkedIn.

Setting Up

Need help setting up your website or integrating this component?

Reach out, and we’ll help get it running perfectly in your Framer project.

Demo

5a:[["$","$L5d",null,{"post":{"id":"019d731b-2c2e-72d2-b63b-f68440c9379c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TpoFQZf6j9LptFUTqxJc","resolved":true,"title":"EclipseAura","body":"$5e","bodyJson":null,"introduction":"Cinematic grainy orbital eclipse aura.","slug":"eclipseaura","author":{"framerUserId":"189902f2-577b-409b-a96e-d63b629fc3b4","name":"Integry","slug":"integrystudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/96437/avatar-MfTznqKeqttkCeqaHZ3PNQowNQRZ0W.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TpoFQZf6j9LptFUTqxJc/eclipseaura-9SbRQTnbsJRcxMjcypc4KIUbBHema1","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-18T17:59:58.044Z","updatedAt":"2026-04-11T09:41:13.715Z","publishedAt":"2026-04-09T16:37:33.870Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://eclipseaura.framer.ai/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_34PohLhxurBTA6lLpjixC4WdLuiVB0ASPosLz2m7zkM","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"70xqV9jBLJPO4laPtBOq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-09T16:37:33.870Z","updatedAt":"2026-04-09T16:37:33.870Z","reported":false}}],"$L5f"]

Suggested for you