Share RainMoji
Share Link
QR Code
Share As Prompt
What is RainMoji?
RainMoji is a tiny, zero-dependency JavaScript library that makes emojis fall across any web page. Drop in one script tag and a page gets a celebratory emoji rain animation — confetti for a checkout success, hearts for a Valentine’s campaign, snowflakes for a December landing page.
It ships as a single minified file of roughly 2 KB gzipped, has no runtime dependencies, and works in every modern browser. There is no build step, no framework requirement, and no npm install needed for the script-tag version.
Add emoji rain to your site in 30 seconds
Paste this before the closing </body> tag. That is the
whole install.
<script src="https://rainmoji.vs-code.com/widget.min.js"></script>
<script>
EmojiRain.init({
emojis: ['🎉', '🎊', '✨', '🌟'],
baseSpeed: 25,
parallaxEnabled: true,
blurEnabled: true
});
</script>Prefer to build your own configuration visually? Open the RainMoji wizard, pick a collection, tune the settings, and copy the generated snippet.
Configuration options
| Option | Type | Default | What it does |
|---|---|---|---|
emojis | string[] | celebration set | The emojis that fall. Any Unicode emoji works. |
baseSpeed | number | 25 | Fall speed. Lower is faster. |
parallaxEnabled | boolean | true | Splits emojis into front, middle and back depth layers. |
blurEnabled | boolean | true | Blurs background layers for a depth-of-field effect. |
windDirection | number | 0 | Horizontal drift, in pixels per second. |
targetElement | Element | null | Contain the rain inside one element instead of the viewport. |
triggerElement | Element | null | Element that starts the rain when clicked. |
autoPlay | boolean | false | Start raining as soon as the script loads. |
containerZIndex | number | 10 | Stacking order of the rain layer. |
Built-in emoji collections
Twelve curated sets ship with the library. Click any button above to preview one live.
- 🎉 Celebration — confetti, party poppers and stars for success states.
- 🎊 Party — a louder variant for launches and announcements.
- ❤️ Love — hearts and roses for Valentine’s and wedding pages.
- 🧘 Zen — petals and leaves for wellness and meditation sites.
- 🎂 Birthday — cake, candles and balloons.
- 🚗 Vehicles — cars, planes and rockets for travel and logistics.
- 😀 Smileys — a general-purpose happy set.
- 🎲 Random — games, arcade and entertainment.
- 🔥 Hot Night — a spicier set for nightlife and dating sites.
- 🤖 AI & Tech — robots, chips and rockets for developer tools, AI products and launch pages.
- 🌧️ Raindrops — realistic rainfall with spin disabled and a slower fall.
- ❄️ Snowflakes — drifting snow with a side-to-side sway.
Frequently asked questions
Is RainMoji free?
Yes. RainMoji is MIT licensed and free for personal and commercial use. There is no paid tier and no attribution requirement.
Does it slow down my site?
The script is around 2 KB gzipped and animates with CSS transforms, which the browser can run on the compositor thread. Emojis are removed from the DOM once they leave the viewport, so a burst does not accumulate nodes.
Does it work on mobile?
Yes. RainMoji reduces the emoji count on small screens automatically and respects the user’s reduced-motion preference.
Does it use cookies or track visitors?
No. The library sets no cookies and makes no network requests. This demo site uses cookie-free, anonymous analytics for aggregate visit counts only.
Can I use my own emojis?
Yes. Pass any array of emoji characters to the emojis option, or paste them into the wizard’s emoji field.
Can I confine the rain to one element?
Yes. Pass a DOM element as targetElement and the rain is clipped to that container instead of covering the whole viewport.
Which browsers are supported?
All current versions of Chrome, Edge, Firefox and Safari, on desktop and mobile.