Skip to content

component

BouncingDot

By Hamim Reza

Details

Summary

Physics loader with glow & ripple fx

Description

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

Introduction

Physics loader with glow & ripple fx

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400147378/148/228/309/79/15
  • All · #4455