Atom Loader

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