5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T969,

Rain Overlay

Add accurate, performant rain effects to your website with this customizable component. Perfect for adding atmosphere and depth to your designs.

Features

Customizable Simulation

Control the number of raindrops, their speed, wind direction, and length to match your desired aesthetic.

Realistic Splashes

Enable splashes for drops hitting the bottom of the container, with optional ripples for added realism.

Versatile Styles

Choose from multiple rain styles including Lines, Dots, Mixed, Heavy, and Realistic to fit any design language.

Use Cases

Atmospheric Backgrounds

Use it as a subtle overlay on hero sections to create a mood.

Weather Widgets

Perfect for weather-related interfaces or data visualization.

Customization

Detailed control over the rain simulation.

Simulation

- Count: Number of raindrops (20-500)

- Speed: Vertical falling speed

- Wind: Horizontal drift

- Length: Length of rain lines

Appearance

- Style: Choose between Lines, Dots, Mixed, Heavy, or Realistic

- Color: Raindrop color

- Opacity: range of opacity for depth

Quick Tips

Performance — Keep particle count under 200 for best performance on mobile devices.

Depth — Use a lower opacity range (0.3 - 0.6) for a more subtle, integrated look.

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

5a:[["$","$L5d",null,{"post":{"id":"019e5e33-9cc4-7c50-bac4-a943509d13a5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"43694cfe-23ad-481d-9cf9-3c2b362055e8","name":"FramerHub.io ","slug":"framerhub","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1146220/avatar-i8EDq2pFNiTBjFGkVIIoQbuXQMMzZI.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SY0nHFIOOSkfJTwuGIKX","resolved":true,"title":"Rain Overlay","body":"$5e","bodyJson":null,"introduction":"rain particles weather effect","slug":"rain-overlay","author":{"framerUserId":"43694cfe-23ad-481d-9cf9-3c2b362055e8","name":"FramerHub.io ","slug":"framerhub","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1146220/avatar-i8EDq2pFNiTBjFGkVIIoQbuXQMMzZI.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/SY0nHFIOOSkfJTwuGIKX/rain-overlay-uMys9MiMZUnMfY3BHorAerPX3wpp8l","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-27T11:27:26.911Z","updatedAt":"2026-04-07T19:01:26.382Z","publishedAt":"2026-05-25T08:15:01.316Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://most-studies-186174.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_p3KQAgo9eaH2jL6vEx05zUfxoJZR5BNqO6ep60Mnzip","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"ak3leaLYWUKY2GQag6sl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-25T08:15:01.316Z","updatedAt":"2026-05-25T08:15:01.316Z","reported":false}}],"$L5f"]

Suggested for you