BouncingDot: Free Interactions Component by Hamim Reza

Animated loader with gravity physics, squash and stretch, glow effects, impact ripples and dynamic shadows. Up to 8 dots with staggered timing for a wave rhythm. Customizable colors, size, spacing and bounce height. GPU accelerated. No dependencies.

Animated loader with gravity physics, squash and stretch, glow halos, impact ripples and dynamic shadows. Built for loading screens and transitions that need more than a basic spinner.

Features

Gravity physics with cubic-bezier easing
Squash and stretch rubber morphing on impact and flight
Glow halo with gradient color support per dot
Impact ripple shockwave on ground contact
Dynamic shadow scales with dot height
Staggered 0.15s timing for natural wave rhythm
Toggle ripple and shadow on or off independently
Up to 8 dots · GPU accelerated · No dependencies

Property Controls

Layout — dot count, size, spacing

Animation — bounce height, duration

Toggles — show ripple, show shadow

Colors — background, dot gradient start/end, glow, ripple, shadow

Technical Details

CSS keyframes with cubic-bezier easing
willChange transform for GPU acceleration
Independent animation tracks for bounce, morph, shadow and ripple
startTransition for React 18 performance

Use Cases

Loading screens · Splash pages · Processing indicators · Transition effects · Status indicators · Brand animations · Decorative sections

SEO Keywords

framer loading animation · framer bouncing dots · framer loader component · framer dot animation · framer loading dots · framer physics animation · framer bounce animation · framer loading spinner · framer animated loader · framer code component