keyboard shortcut opens the Monica desktop application on Windows?
๐ฆ Key shortcuts
โจ The Prompt Phrase
Which keyboard shortcut opens the Monica desktop application on Windows? ~alt + M~
๐ป Code Preview
๐ฆ All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Support Prompt - Interactive Tutorial</title>
<style>
:root{
--bg:#0b0b1a;--bg2:#14142b;--glass:rgba(255,255,255,.06);--border:rgba(255,255,255,.14);
--text:#e8e8f5;--muted:#a3a3c2;--purple:#8b5cf6;--blue:#3b82f6;--green:#10b981;--red:#f43f5e;--amber:#f59e0b;
--grad:linear-gradient(135deg,var(--purple),var(--blue) 55%,var(--green));
}
body.light{--bg:#f4f4ff;--bg2:#e6e6fa;--glass:rgba(255,255,255,.75);--border:rgba(80,80,140,.2);--text:#1b1b3a;--muted:#55557a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(circle at 20% 0%,var(--bg2),var(--bg) 60%);color:var(--text);line-height:1.7;min-height:100vh}
#progress{position:fixed;top:0;left:0;height:5px;width:0;background:var(--grad);z-index:100}
nav{position:sticky;top:5px;z-index:50;margin:12px auto;max-width:980px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;padding:8px 12px;background:var(--glass);border:1px solid var(--border);border-radius:999px;backdrop-filter:blur(14px)}
nav a{color:var(--muted);text-decoration:none;font-size:.85rem;padding:4px 10px;border-radius:999px;transition:.2s}
nav a:hover{color:var(--text);background:var(--glass)}
#theme{background:none;border:1px solid var(--border);border-radius:999px;cursor:pointer;padding:4px 10px;color:var(--text)}
main{max-width:900px;margin:0 auto;padding:0 18px 60px}
section{margin:36px 0;padding:28px;background:var(--glass);border:1px solid var(--border);border-radius:24px;backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.25);opacity:0;transform:translateY(24px);transition:.7s ease}
section.show{opacity:1;transform:none}
h1{font-size:clamp(1.8rem,5vw,3rem);line-height:1.2}
h2{font-size:1.6rem;margin-bottom:12px}
p{margin-bottom:12px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200%;animation:shift 6s linear infinite}
@keyframes shift{to{background-position:200% 0}}
.hero{text-align:center;padding:50px 20px}
.float{font-size:3rem;display:inline-block;animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
code{font-family:Consolas,'Courier New',monospace}
.cmd{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#0a0a14;color:#d6d6ff;border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin:14px auto;overflow-x:auto;text-align:left}
.cmd code{white-space:nowrap}
.k-mod{color:#34d399}.k-key{color:#60a5fa}.k-sym{color:#c4b5fd}
kbd{display:inline-block;min-width:2.2em;text-align:center;font-family:Consolas,monospace;font-weight:700;padding:3px 10px;border-radius:8px;border:1px solid var(--border);border-bottom-width:4px;background:var(--glass);color:var(--text)}
kbd.down{background:var(--grad);color:#fff;transform:translateY(3px);border-bottom-width:1px}
button.btn{background:var(--grad);color:#fff;border:none;border-radius:12px;padding:8px 16px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
button.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(139,92,246,.4)}
button.small{padding:5px 12px;font-size:.8rem;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
.card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:16px;transition:.25s}
.card:hover{transform:translateY(-5px) rotate(-.5deg);border-color:var(--purple)}
.card h3{margin-bottom:6px;font-size:1.05rem}
.acc{border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden}
.acc button{width:100%;text-align:left;background:var(--glass);color:var(--text);border:none;padding:14px 16px;font-size:1rem;font-family:inherit;cursor:pointer;display:flex;justify-content:space-between}
.acc .body{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 16px}
.acc.open .body{max-height:300px;padding:12px 16px}
.chev{transition:.3s}.acc.open .chev{transform:rotate(180deg)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{background:var(--glass);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:6px 14px;cursor:pointer;font-family:inherit}
.tab[aria-selected=true]{background:var(--grad);color:#fff;border-color:transparent}
.panel{display:none}.panel.active{display:block;animation:fade .4s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.desktop{position:relative;height:300px;border-radius:16px;border:1px solid var(--border);overflow:hidden;background:linear-gradient(135deg,#1e1b4b,#0e7490);margin-top:12px}
.desktop .taskbar{position:absolute;bottom:0;left:0;right:0;height:34px;background:rgba(0,0,0,.55);display:flex;align-items:center;gap:10px;padding:0 12px;color:#fff;font-size:.8rem}
.win{position:absolute;left:50%;top:50%;width:min(86%,380px);transform:translate(-50%,-46%) scale(.85);opacity:0;pointer-events:none;background:#14142b;color:#e8e8f5;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.6);transition:.35s;overflow:hidden}
.win.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.win .tb{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#1f1f3d;font-size:.85rem}
.win .tb button{background:none;border:none;color:#fff;cursor:pointer;font-size:1rem}
.win .bd{padding:14px;font-size:.9rem}
.keys{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.keys button{cursor:pointer}
.bad,.good{border-radius:14px;padding:14px;margin-bottom:10px}
.bad{background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.4)}
.good{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.4)}
.opt{display:block;width:100%;text-align:left;background:var(--glass);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin:8px 0;cursor:pointer;font-family:inherit;font-size:.95rem;transition:.2s}
.opt:hover:not(:disabled){border-color:var(--purple);transform:translateX(4px)}
.opt.right{background:rgba(16,185,129,.25);border-color:var(--green)}
.opt.wrong{background:rgba(244,63,94,.25);border-color:var(--red);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.badge{padding:6px 12px;border-radius:999px;border:1px dashed var(--border);color:var(--muted);font-size:.85rem;filter:grayscale(1);opacity:.6;transition:.4s}
.badge.on{filter:none;opacity:1;color:var(--text);border:1px solid var(--amber);background:rgba(245,158,11,.15);animation:pop .5s}
@keyframes pop{50%{transform:scale(1.2)}}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted)}
.tip{position:relative;border-bottom:2px dotted var(--purple);cursor:help}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:130%;transform:translateX(-50%) scale(.9);width:max-content;max-width:240px;background:#1e1b4b;color:#fff;font-size:.78rem;padding:8px 10px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:10;font-family:'Segoe UI',sans-serif;white-space:normal}
.tip:hover::after,.tip:focus::after{opacity:1;transform:translateX(-50%) scale(1)}
footer{text-align:center;color:var(--muted);padding:30px 18px;font-size:.9rem}
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:200}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--grad);color:#fff;padding:10px 20px;border-radius:999px;font-weight:600;z-index:150;transition:.4s}
.toast.show{transform:translateX(-50%)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}section{opacity:1;transform:none}}
</style>
</head>
<body>
<div id="progress" role="progressbar" aria-label="Reading progress"></div>
<canvas id="confetti" aria-hidden="true"></canvas>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<nav aria-label="Tutorial sections">
<a href="#what">What</a><a href="#why">Why</a><a href="#how">How</a><a href="#demo">Demo</a><a href="#breakdown">Breakdown</a>
<a href="#mistakes">Mistakes</a><a href="#tips">Tips</a><a href="#quiz">Quiz</a><a href="#summary">Cheat Sheet</a>
<button id="theme" aria-label="Toggle light and dark theme">๐</button>
</nav>
<main>
<header class="hero section show">
<div class="float" aria-hidden="true">โจ๏ธ</div>
<h1 class="grad">Alt + M: Open Monica on Windows</h1>
<p style="color:var(--muted);margin-top:10px">One quick shortcut to bring up Monica's Windows desktop application.</p>
<div class="cmd" style="max-width:560px">
<code><span class="k-mod">alt</span> <span class="k-sym">+</span> <span class="k-key">M</span> <span class="k-sym">--></span> To open Monica's Windows desktop app</code>
<button class="btn small copy" data-copy="Alt + M" aria-label="Copy shortcut">๐ Copy</button>
</div>
<p>๐ฏ 5-10 minutes ยท ๐ 4 badges to earn</p>
<div class="badges" aria-label="Achievement badges">
<span class="badge" id="b-read">๐ Explorer</span>
<span class="badge" id="b-copy">๐ Copy Master</span>
<span class="badge" id="b-demo">โจ๏ธ Shortcut Pro</span>
<span class="badge" id="b-quiz">๐ Quiz Champ</span>
</div>
</header>
<section id="what">
<h2>๐ค 1. What Is It?</h2>
<p>Imagine a magic doorbell ๐ on your keyboard. Press two keys at the same time and your helper appears. That is this shortcut: <strong>Alt + M</strong>.</p>
<p>According to the phrase you gave, it opens <strong>Monica's Windows desktop application</strong>. A <span class="tip" tabindex="0" data-tip="A keyboard shortcut (or hotkey) is a combination of keys that triggers an action quickly, without using the mouse.">keyboard shortcut</span> is the fastest way to start it.</p>
<div class="good">๐ก <strong>Good to know:</strong> this is the shortcut as stated in your phrase. Apps can let you change or turn off their shortcuts, so if it doesn't work, check Monica's settings (see Pro Tips).</div>
</section>
<section id="why">
<h2>๐ 2. Why Use It?</h2>
<div class="cards">
<div class="card"><h3>โก Speed</h3>No hunting for icons or menus.</div>
<div class="card"><h3>๐ง Flow</h3>Ask a question without leaving your work.</div>
<div class="card"><h3>๐๏ธ Hands on keys</h3>Great when you are typing a lot.</div>
<div class="card"><h3>โฟ Comfort</h3>Fewer mouse movements, less strain.</div>
</div>
</section>
<section id="how">
<h2>โ๏ธ 3. How Does It Work?</h2>
<p>Click each step ๐</p>
<div class="acc open"><button aria-expanded="true">1๏ธโฃ Install and start Monica once <span class="chev">โผ</span></button><div class="body">The Windows desktop app must be installed. Shortcuts that work from anywhere usually need the app to be running, often in the background or system tray.</div></div>
<div class="acc"><button aria-expanded="false">2๏ธโฃ Hold the Alt key <span class="chev">โผ</span></button><div class="body"><kbd>Alt</kbd> is a <em>modifier</em> key. On its own it does little, but it changes what the next key means.</div></div>
<div class="acc"><button aria-expanded="false">3๏ธโฃ Tap M while holding Alt <span class="chev">โผ</span></button><div class="body">Press <kbd>M</kbd> once, then release both keys. Windows tells Monica that its shortcut was pressed.</div></div>
<div class="acc"><button aria-expanded="false">4๏ธโฃ Monica's window appears <span class="chev">โผ</span></button><div class="body">The app opens or comes to the front, ready for you to type. ๐</div></div>
</section>
<section id="demo">
<h2>๐ฎ 4. Live Demo</h2>
<p>This is a <strong>safe simulation</strong>. It doesn't touch your real Monica app. Try it!</p>
<div class="tabs" role="tablist" aria-label="Demo modes">
<button class="tab" role="tab" aria-selected="true" data-panel="p1">Use your keyboard</button>
<button class="tab" role="tab" aria-selected="false" data-panel="p2">On-screen keys</button>
<button class="tab" role="tab" aria-selected="false" data-panel="p3">If nothing happens</button>
</div>
<div class="panel active" id="p1"><p>Click the desktop below once, then press <kbd>Alt</kbd> + <kbd>M</kbd>.</p></div>
<div class="panel" id="p2"><p>On a phone? Click <kbd>Alt</kbd> to "hold" it, then click <kbd>M</kbd>.</p>
<div class="keys"><button class="btn" id="vAlt" aria-pressed="false">Alt</button><span>+</span><button class="btn" id="vM">M</button></div></div>
<div class="panel" id="p3"><p>๐ Checklist: Is Monica installed and running? Is another app using Alt+M? Is the shortcut enabled in Monica's settings? Try restarting the app.</p></div>
<div class="desktop" id="desk" tabindex="0" aria-label="Simulated Windows desktop. Press Alt and M to open the simulated app.">
<div style="padding:14px;color:#fff;font-size:.9rem">๐ฅ๏ธ Simulated Desktop<br><span style="opacity:.75" id="deskHint">Click here, then press Alt + M</span></div>
<div class="win" id="win" role="dialog" aria-label="Simulated Monica window">
<div class="tb"><span>โจ Monica (simulated)</span><button id="closeWin" aria-label="Close simulated window">โ</button></div>
<div class="bd">๐ Hi! I'm your helper. Ask me anything.<br><br><em style="color:var(--muted)">Press Esc or โ to close.</em></div>
</div>
<div class="taskbar"><span>โ</span><span id="tbApp" style="opacity:.4">Monica</span><span style="margin-left:auto" id="keyLog">Keys: -</span></div>
</div>
</section>
<section id="breakdown">
<h2>๐ฌ 5. Code Breakdown</h2>
<p>Hover or focus the colored parts:</p>
<div class="cmd" style="font-size:1.1rem"><code>
<span class="k-mod tip" tabindex="0" data-tip="Modifier key. Hold it down while pressing another key.">alt</span>
<span class="k-sym tip" tabindex="0" data-tip="Means 'at the same time', not the plus character.">+</span>
<span class="k-key tip" tabindex="0" data-tip="The letter key, tapped once while Alt is held. Case doesn't matter.">M</span>
<span class="k-sym tip" tabindex="0" data-tip="Just an arrow in the note, pointing to what the shortcut does. You don't type it.">--></span>
To open Monica's Windows desktop app</code></div>
<table>
<tr><th>Part</th><th>Meaning</th></tr>
<tr><td><code class="k-mod">alt</code></td><td>Hold this key down</td></tr>
<tr><td><code class="k-sym">+</code></td><td>"Together with" (don't type it)</td></tr>
<tr><td><code class="k-key">M</code></td><td>Tap this key once</td></tr>
<tr><td><code class="k-sym">--></code></td><td>Arrow in the note, not typed</td></tr>
</table>
</section>
<section id="mistakes">
<h2>๐ซ 6. Common Mistakes</h2>
<div class="bad">โ <strong>Typing "alt", "+" and "M" one after another.</strong> Hold Alt and press M together.</div>
<div class="bad">โ <strong>Using the right-hand Alt (AltGr) on some keyboards.</strong> On some layouts it acts as Ctrl+Alt, which is a different shortcut. Try the left Alt.</div>
<div class="bad">โ <strong>Expecting it to work when Monica isn't installed or running.</strong></div>
<div class="bad">โ <strong>Using it in the browser version.</strong> This phrase is about the Windows desktop app.</div>
<div class="good">โ
<strong>Do:</strong> press the left <kbd>Alt</kbd>, then <kbd>M</kbd>, and release both.</div>
</section>
<section id="tips">
<h2>๐ง 7. Pro Tips</h2>
<div class="cards">
<div class="card"><h3>โ๏ธ Check settings</h3>Look in Monica's settings for a shortcut or hotkey option. You may be able to change it.</div>
<div class="card"><h3>โ๏ธ Conflicts</h3>Another app may use Alt+M. Close it or change one shortcut.</div>
<div class="card"><h3>๐ Auto-start</h3>Let the app start with Windows so the shortcut is always ready.</div>
<div class="card"><h3>๐ Restart</h3>If a shortcut stops working, restart the app first.</div>
</div>
</section>
<section id="quiz">
<h2>๐ฎ 8. Practice Quiz</h2>
<p id="qcount" style="color:var(--muted)"></p>
<div id="qbox"></div>
</section>
<section id="summary">
<h2>๐ 9. Summary Cheat Sheet</h2>
<div class="cmd"><code>Alt + M โ open Monica's Windows desktop app</code><button class="btn small copy" data-copy="Alt + M">๐</button></div>
<table>
<tr><td>1</td><td>Make sure the desktop app is installed and running</td></tr>
<tr><td>2</td><td>Hold <kbd>Alt</kbd></td></tr>
<tr><td>3</td><td>Tap <kbd>M</kbd></td></tr>
<tr><td>4</td><td>Not working? Check settings, conflicts, restart</td></tr>
</table>
<p style="margin-top:12px">๐ You've got it. Happy shortcutting!</p>
</section>
</main>
<footer>โจ Generated by AI Prompt Dictionary ยท Made for curious beginners ๐</footer>
<script>
(function(){
var $=function(s,r){return (r||document).querySelector(s)},$$=function(s,r){return Array.prototype.slice.call((r||document).querySelectorAll(s))};
function toast(m){var t=$('#toast');t.textContent=m;t.classList.add('show');setTimeout(function(){t.classList.remove('show')},2200)}
function badge(id,msg){var b=$('#'+id);if(!b.classList.contains('on')){b.classList.add('on');toast('๐
Badge unlocked: '+msg)}}
$('#theme').onclick=function(){document.body.classList.toggle('light')};
window.addEventListener('scroll',function(){
var h=document.documentElement.scrollHeight-innerHeight,p=h>0?scrollY/h*100:0;
$('#progress').style.width=p+'%';$('#progress').setAttribute('aria-valuenow',Math.round(p));
if(p>95)badge('b-read','Explorer')});
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('show');io.unobserve(e.target)}})},{threshold:.1});
$$('section').forEach(function(s){io.observe(s)});
$$('.copy').forEach(function(b){b.onclick=function(){
var t=b.getAttribute('data-copy');
function fb(){var a=document.createElement('textarea');a.value=t;document.body.appendChild(a);a.select();try{document.execCommand('copy')}catch(e){}document.body.removeChild(a);done()}
function done(){toast('โ
Copied!');badge('b-copy','Copy Master')}
if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(t).then(done,fb)}else fb()}});
$$('.acc button').forEach(function(b){b.onclick=function(){var o=b.parentNode.classList.toggle('open');b.setAttribute('aria-expanded',o)}});
$$('.tab').forEach(function(t){t.onclick=function(){
$$('.tab').forEach(function(x){x.setAttribute('aria-selected','false')});t.setAttribute('aria-selected','true');
$$('.panel').forEach(function(p){p.classList.remove('active')});$('#'+t.getAttribute('data-panel')).classList.add('active')}});
// demo
var win=$('#win'),desk=$('#desk');
function openWin(){win.classList.add('open');$('#tbApp').style.opacity=1;$('#deskHint').textContent='Monica opened! ๐';badge('b-demo','Shortcut Pro');boom()}
function closeWin(){win.classList.remove('open');$('#tbApp').style.opacity=.4;$('#deskHint').textContent='Click here, then press Alt + M'}
$('#closeWin').onclick=closeWin;
document.addEventListener('keydown',function(e){
var k=e.key.toLowerCase();
if(e.altKey&&k==='m'){
if(desk.contains(document.activeElement)||document.activeElement===desk){e.preventDefault();$('#keyLog').textContent='Keys: Alt + M โ';openWin()}
}else if(k==='escape'){closeWin()}
});
desk.addEventListener('click',function(){desk.focus()});
var altHeld=false;
$('#vAlt').onclick=function(){altHeld=!altHeld;this.setAttribute('aria-pressed',altHeld);this.style.outline=altHeld?'3px solid #f59e0b':'none'};
$('#vM').onclick=function(){
if(altHeld){$('#keyLog').textContent='Keys: Alt + M โ';openWin()}
else{$('#keyLog').textContent='Keys: M only โ';toast('Hold Alt first! ๐')}};
// quiz
var Q=[
{q:'What does the Alt + M shortcut do, according to this tutorial?',o:['Opens Monica\'s Windows desktop app','Closes Windows','Takes a screenshot'],a:0,e:'Yes! That is the shortcut from the phrase.'},
{q:'How should you press the keys?',o:['Alt, then + , then M, one at a time','Hold Alt and tap M together','Press M ten times'],a:1,e:'Right: hold Alt, then tap M.'},
{q:'The shortcut doesn\'t work. What should you check first?',o:['Buy a new keyboard','Whether Monica is running and the shortcut is enabled in its settings','Delete Windows'],a:1,e:'Correct! Running state, settings, and conflicts are the usual causes.'}
],qi=0,score=0;
function render(){
var box=$('#qbox');
if(qi>=Q.length){
box.innerHTML='<h3>๐ Score: '+score+' / '+Q.length+'</h3><p>'+(score===Q.length?'Perfect! Shortcut master! โจ๏ธ':'Nice try! Retry to get them all.')+'</p><button class="btn" id="retry">๐ Try again</button>';
$('#qcount').textContent='Finished!';
if(score===Q.length){badge('b-quiz','Quiz Champ');boom()}
$('#retry').onclick=function(){qi=0;score=0;render()};return}
var q=Q[qi];$('#qcount').textContent='Question '+(qi+1)+' of '+Q.length;
box.innerHTML='<h3>'+q.q+'</h3>'+q.o.map(function(t,i){return '<button class="opt" data-i="'+i+'">'+t+'</button>'}).join('')+'<p id="fb" aria-live="polite"></p>';
$$('.opt',box).forEach(function(b){b.onclick=function(){
var i=+b.getAttribute('data-i');$$('.opt',box).forEach(function(x){x.disabled=true});
if(i===q.a){b.classList.add('right');score++;$('#fb').textContent='๐ '+q.e;boom()}
else{b.classList.add('wrong');$$('.opt',box)[q.a].classList.add('right');$('#fb').textContent='๐ช Not quite. '+q.e}
setTimeout(function(){qi++;render()},1700)}});
}
render();
// confetti
var cv=$('#confetti'),cx=cv.getContext('2d'),parts=[],raf;
function size(){cv.width=innerWidth;cv.height=innerHeight}size();addEventListener('resize',size);
function boom(){
if(matchMedia('(prefers-reduced-motion:reduce)').matches)return;
var c=['#8b5cf6','#3b82f6','#10b981','#f59e0b','#f43f5e'];
for(var i=0;i<110;i++)parts.push({x:innerWidth/2,y:innerHeight/3,vx:(Math.random()-.5)*14,vy:Math.random()*-12-2,s:Math.random()*7+3,c:c[i%5],l:100});
cancelAnimationFrame(raf);loop()}
function loop(){
cx.clearRect(0,0,cv.width,cv.height);
parts=parts.filter(function(p){return p.l>0});
parts.forEach(function(p){p.x+=p.vx;p.y+=p.vy;p.vy+=.35;p.l--;cx.globalAlpha=Math.max(p.l/100,0);cx.fillStyle=p.c;cx.fillRect(p.x,p.y,p.s,p.s)});
if(parts.length)raf=requestAnimationFrame(loop);else cx.clearRect(0,0,cv.width,cv.height)}
})();
</script>
</body>
</html>
Live Preview