🐌 Slow Motion Blur Effect Demo

Instructions:
  1. Open browser DevTools (F12) → Network tab
  2. Enable "Disable cache" checkbox
  3. Select "Slow 3G" or "Fast 3G" from the throttling dropdown
  4. Refresh the page (Cmd+R or Ctrl+R)
  5. Watch the blur-up effect in action! 🎬

OR if transitions are overridden above, you'll see a 2-second slow fade.

Test Image 1

Watch how the blurry placeholder fades out as the sharp image fades in.

Test image with slow blur effect

Test Image 2

Profile photo with circular blur effect.

Jérémie Poutrin

How to Verify It's Working

Check these in browser DevTools:

  1. Elements tab: Inspect a blur-image-container
    • You should see TWO img elements inside
    • First one (placeholder) has a base64 data URL starting with "data:image/jpeg;base64,"
    • Second one (main) has the regular image path
  2. Styles: The .blur-placeholder should have:
    • position: absolute
    • filter: blur(20px)
    • z-index: 1
  3. After load: The container should get class "loaded"
    • Placeholder opacity goes to 0
    • Main image opacity goes to 1