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
