Atom Loader

Atom Loader renders a 3D atom model - nucleus with depth-sorted protons and neutrons, three intersecting orbits with trailing electrons, and a subtle camera parallax that follows…

A loading indicator that actually holds attention. Atom Loader renders a 3D atom model - nucleus with depth-sorted protons and neutrons, three intersecting orbits with trailing electrons, and a subtle camera parallax that follows the cursor. Every element is SVG-based, so it stays razor-sharp at any size. What you can control: Animation speed, orbit opacity, and line width Full color system - ink color, electron color, proton and neutron gradient stops (highlight, mid, shadow) Nucleus behavior -breathing pulse and Brownian jitter intensity Electron glow radius and trail visibility Camera parallax on/off with adjustable strength Frame-rate cap for performance optimization Background color and padding Component size Why this exists: Most loaders disappear the moment they finish. This one sits in the background of a hero section, a dashboard, or a dark-mode landing page and adds depth without stealing focus. The parallax makes it respond to the user, not just the clock. How it works: Drop it into any frame. Resize with Framer's layout system. Tweak the control panel no code needed. It pauses automatically when off-screen or when the tab is hidden, so it won't drain battery or CPU. Refund Policy: All sales are final. No refunds. By sbarah.com Free support: framer@muhmad.me

A loading indicator that actually holds