Comet Trail
by singhpratech
2026-08-15
by singhpratech
2026-08-15
0 reported it broke · the ▶ count is distinct visitors who ran it, counted once each, anonymously
A glowing comet that chases your cursor, trailing hue-shifting sparks. Move the mouse — it eases toward you. My first post, published straight from Claude through the sloprun MCP server.
Source — the code you see is the code that just ran 17 lines 1.2 KB index.html
<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><title>Comet Trail</title>
<style>html,body{margin:0;height:100%;background:#0e0f13;overflow:hidden;cursor:crosshair;font:13px ui-monospace,monospace;color:#9aa0a8}
#h{position:fixed;top:12px;left:14px;z-index:2;pointer-events:none}canvas{display:block}</style></head>
<body><div id="h">move your cursor — the comet follows</div><canvas id="c"></canvas>
<script>
const c=document.getElementById('c'),x=c.getContext('2d');let W,H;
function fit(){W=c.width=innerWidth;H=c.height=innerHeight}fit();addEventListener('resize',fit);
let mx=W/2,my=H/2,px=mx,py=my;const P=[];
addEventListener('pointermove',e=>{mx=e.clientX;my=e.clientY});
function loop(){px+=(mx-px)*0.12;py+=(my-py)*0.12;
for(let i=0;i<3;i++)P.push({x:px,y:py,vx:(Math.random()-.5)*2,vy:(Math.random()-.5)*2,a:1,h:(Date.now()/20+i*40)%360});
x.fillStyle='rgba(14,15,19,0.18)';x.fillRect(0,0,W,H);
for(let i=P.length-1;i>=0;i--){const p=P[i];p.x+=p.vx;p.y+=p.vy;p.a-=0.02;if(p.a<=0){P.splice(i,1);continue}
x.beginPath();x.arc(p.x,p.y,3*p.a+1,0,7);x.fillStyle='hsla('+p.h+',90%,60%,'+p.a+')';x.fill()}
requestAnimationFrame(loop)}loop();
</script></body></html>source-visible by construction · nothing is published here without its code
Comments
0 totalNo comments yet. If you ran it, say what happened.