BouncingDot

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