Emoji Rain Logo

Make Any Website Magical

Add emoji rain in 30 seconds. Zero dependencies. 5KB gzipped.

Emoji Rain Controls
Emoji Rain Controls
Basic Settings
Layer Distribution
Z-Index Control
Layer Configuration
Front Layer
Middle Layer
Back Layer

Share Emoji Rain

2. Initialize with these settings: \`\`\`javascript const emojiRain = new EmojiRain({ emojis: ${JSON.stringify(collections[settings.collection])}, parallax: ${settings.parallax}, blur: ${settings.blur}, speed: ${settings.speed} }); \`\`\` 3. Trigger: emojiRain.start() ## SAP Standard This prompt follows ISO-SAP-2025 for structured AI prompting. See: https://sap-standard.conzeon.com (placeholder) `; document.getElementById('sapPrompt').value = sapPrompt; } function copySAP() { const textarea = document.getElementById('sapPrompt'); textarea.select(); document.execCommand('copy'); alert('✅ SAP prompt copied! Paste into AI chat.'); } function openSAPDocs() { window.open('https://sap-standard.conzeon.com', '_blank'); } function generateQR() { const link = document.getElementById('shareLink').value; const qrSection = document.getElementById('qrSection'); qrSection.style.display = 'block'; // Clear previous QR document.getElementById('qrcode').innerHTML = ''; // Use QR Code API const qrImg = document.createElement('img'); qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(link)}`; qrImg.style.width = '200px'; qrImg.style.height = '200px'; document.getElementById('qrcode').appendChild(qrImg); } // Event listeners document.getElementById('heroRainBtn').onclick = () => { rainCollection(currentCollection); showCollectionButtons(); }; document.getElementById('rainButton').onclick = () => rainCollection(currentCollection); document.getElementById('singleEmoji').onclick = () => document.getElementById("rainContainer").appendChild(createEmoji(collections[currentCollection], true)); document.getElementById('dropSingleEmoji').onclick = () => document.getElementById("rainContainer").appendChild(createEmoji(collections[currentCollection], true)); document.getElementById('rainFewEmojis').onclick = () => { const container = document.getElementById("rainContainer"); const emojis = collections[currentCollection]; const distribution = parallaxEnabled ? distributeEmojis(5) : { middle: 5 }; for (let layer in distribution) { for (let i = 0; i < distribution[layer]; i++) { container.appendChild(createEmoji(emojis, true, layer)); } } }; document.getElementById('clearEmojis').onclick = clearEmojis; document.getElementById('parallaxCheckbox').onchange = (e) => { parallaxEnabled = e.target.checked; }; document.getElementById('blurCheckbox').onchange = (e) => { blurEnabled = e.target.checked; }; document.getElementById('baseSpeedInput').oninput = (e) => { parallaxConfig.baseSpeed = parseInt(e.target.value) || 50; }; document.getElementById('frontRatioInput').oninput = (e) => { parallaxConfig.layerRatios.front = parseInt(e.target.value) || 100; }; document.getElementById('middleRatioInput').oninput = (e) => { parallaxConfig.layerRatios.middle = parseInt(e.target.value) || 300; }; document.getElementById('backRatioInput').oninput = (e) => { parallaxConfig.layerRatios.back = parseInt(e.target.value) || 70; }; document.getElementById('containerZIndex').oninput = (e) => { document.getElementById('rainContainer').style.zIndex = e.target.value; }; document.getElementById('controlsBoxZIndex').oninput = (e) => { document.getElementById('controlsContainer').style.zIndex = e.target.value; }; document.getElementById('modalZIndex').oninput = (e) => { document.getElementById('testModal').style.zIndex = e.target.value; }; // Layer controls ['front', 'middle', 'back'].forEach(layer => { ['SpeedRangeMin', 'SpeedRangeMax', 'BlurRangeMin', 'BlurRangeMax', 'FontSizeMin', 'FontSizeMax', 'DelayMin', 'DelayMax'].forEach(prop => { const el = document.getElementById(layer + prop); if (el) { el.oninput = (e) => { const key = prop.replace('Min', '').replace('Max', '').replace('Size', 'Size'); const rangeKey = key.charAt(0).toLowerCase() + key.slice(1) + 'Range'; if (parallaxConfig.layerProperties[layer][rangeKey]) { parallaxConfig.layerProperties[layer][rangeKey][prop.includes('Min') ? 0 : 1] = parseFloat(e.target.value); } }; } }); }); //]]>