Each bookmark is seperated by a line thingy
Infinite (better)
javascript:(function(){var cv=document.createElement('canvas'),ctx=cv.getContext('2d');cv.style.cssText='position:fixed;top:0;left:0;z-index:1000000;pointer-events:none;';cv.width=window.innerWidth;cv.height=window.innerHeight;document.body.appendChild(cv);var ship={x:cv.width/2,y:cv.height/2,a:0,vx:0,vy:0},bullets=[],particles=[],keys={};var enemies=Array.from(document.querySelectorAll('img,svg,i,h1,h2,h3,a,button')).map(el=>{var r=el.getBoundingClientRect();return{el:el,x:r.left+r.width/2,y:r.top+r.height/2,w:r.width,h:r.height,active:true}});window.onkeydown=(e)=>keys[e.code]=true;window.onkeyup=(e)=>keys[e.code]=false;function exp(x,y){particles.push({x:x,y:y,t:"BOOM!",l:1,vx:(Math.random()-0.5)*4,vy:(Math.random()-0.5)*4});document.body.style.transform='translate('+(Math.random()-0.5)*10+'px,'+(Math.random()-0.5)*10+'px)';setTimeout(()=>document.body.style.transform='',50)}function loop(){if(keys['ArrowLeft'])ship.a-=0.1;if(keys['ArrowRight'])ship.a+=0.1;if(keys['ArrowUp']){ship.vx+=Math.cos(ship.a)*0.4;ship.vy+=Math.sin(ship.a)*0.4}if(keys['Space']&&bullets.length<15){bullets.push({x:ship.x,y:ship.y,vx:Math.cos(ship.a)*10,vy:Math.sin(ship.a)*10});keys['Space']=false}ship.x+=ship.vx;ship.y+=ship.vy;ship.vx*=0.96;ship.vy*=0.96;if(ship.x<0)ship.x=cv.width;if(ship.x>cv.width)ship.x=0;if(ship.y<0)ship.y=cv.height;if(ship.y>cv.height)ship.y=0;bullets.forEach((b,bi)=>{b.x+=b.vx;b.y+=b.vy;enemies.forEach(en=>{if(en.active&&b.x>en.x-en.w/2&&b.x<en.x+en.w/2&&b.y>en.y-en.h/2&&b.y<en.y+en.h/2){en.active=false;en.el.style.transition='0.3s';en.el.style.transform='scale(0)';setTimeout(()=>en.el.style.visibility='hidden',300);exp(en.x,en.y);bullets.splice(bi,1)}})});particles=particles.filter(p=>{p.x+=p.vx;p.y+=p.vy;p.l-=0.02;return p.l>0});ctx.clearRect(0,0,cv.width,cv.height);ctx.save();ctx.translate(ship.x,ship.y);ctx.rotate(ship.a);ctx.strokeStyle='#0f0';ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(20,0);ctx.lineTo(-15,12);ctx.lineTo(-15,-12);ctx.closePath();ctx.stroke();ctx.restore();ctx.fillStyle='#f00';bullets.forEach(b=>ctx.fillRect(b.x,b.y,4,4));particles.forEach(p=>{ctx.fillStyle='rgba(255,255,0,'+p.l+')';ctx.font='bold '+(15+(1-p.l)*20)+'px sans-serif';ctx.fillText(p.t,p.x,p.y)});requestAnimationFrame(loop)}loop();})();
Best
javascript:(function(){ /* 1. Create the UI Container */ const ui = document.createElement('div'); ui.id = 'ascii-ui'; Object.assign(ui.style, { position:'fixed', top:'20px', right:'20px', width:'200px', background:'rgba(0,0,0,0.8)', color:'white', padding:'15px', borderRadius:'10px', zIndex:10001, fontFamily:'sans-serif', fontSize:'12px', boxShadow:'0 0 15px rgba(0,255,0,0.3)', border:'1px solid #0f0' }); ui.innerHTML = %60 <div style="font-weight:bold;margin-bottom:10px;color:#0f0">ASCII CONTROL</div> <label>Color Mode:</label> <select id="a-mode" style="width:100%;margin-bottom:10px"> <option value="cam">Webcam Color</option> <option value="matrix">Matrix Green</option> <option value="rainbow">Rainbow Cycle</option> </select> <label>Resolution:</label> <input type="range" id="a-res" min="50" max="150" value="100" style="width:100%"> <button id="a-stop" style="width:100%;margin-top:10px;background:#f44;border:none;color:white;cursor:pointer;padding:5px">STOP</button> %60; document.body.appendChild(ui); /* 2. Setup the Engine */ const v = document.createElement('video'); const c = document.createElement('canvas'); const x = c.getContext('2d', {willReadFrequently:true}); const p = document.createElement('pre'); Object.assign(p.style, { position:'fixed', top:0, left:0, width:'100vw', height:'100vh', background:'black', zIndex:10000, margin:0, fontFamily:'monospace', fontSize:'10px', lineHeight:'8px', overflow:'hidden' }); document.body.appendChild(p); let hue = 0; navigator.mediaDevices.getUserMedia({video:true}).then(s => { v.srcObject = s; v.play(); const chars = "Ñ@#W$9876543210?!abc;:+=-,._ "; function draw() { if(!document.getElementById('ascii-ui')) return; const res = document.getElementById('a-res').value; const mode = document.getElementById('a-mode').value; c.width = res; c.height = res/2; x.drawImage(v, 0, 0, c.width, c.height); const d = x.getImageData(0, 0, c.width, c.height).data; let html = ""; hue = (hue + 2) % 360; for (let i = 0; i < d.length; i += 4) { const r = d[i], g = d[i+1], b = d[i+2]; const avg = (r + g + b) / 3; const char = chars[Math.floor((avg/255)*(chars.length-1))]; let color; if(mode === 'cam') color = %60rgb(${r},${g},${b})%60; else if(mode === 'matrix') color = '#0f0'; else color = %60hsl(${hue}, 100%, 50%)%60; html += %60<span style="color:${color}">${char}</span>%60; if ((i/4+1) % c.width === 0) html += "\n"; } p.innerHTML = html; requestAnimationFrame(draw); } draw(); }); /* 3. Button Functionality */ document.getElementById('a-stop').onclick = () => { ui.remove(); p.remove(); v.srcObject.getTracks().forEach(t=>t.stop()); };})();
Spinny
javascript:(function(){ const icons = document.querySelectorAll('img, svg, i, .fa, .material-icons'); const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; let angle = 0; /* Setup the icons for movement */ icons.forEach((el, index) => { el.style.position = 'fixed'; el.style.zIndex = '9999'; el.style.transition = 'all 0.05s linear'; /* Give them a unique starting distance so they don't all stack perfectly */ el.dataset.radius = Math.random() * 300 + 50; el.dataset.speed = Math.random() * 0.1 + 0.05; }); function animate() { angle += 0.05; icons.forEach((el) => { const r = parseFloat(el.dataset.radius); const s = parseFloat(el.dataset.speed); /* Parametric equations for a circle/spiral */ const x = centerX + r * Math.cos(angle * s * 10) - (el.offsetWidth / 2); const y = centerY + r * Math.sin(angle * s * 10) - (el.offsetHeight / 2); el.style.left = x + 'px'; el.style.top = y + 'px'; el.style.transform = `rotate(${angle * 100}deg)`; /* Slowly shrink the radius to make them "puddle" in the center */ if (el.dataset.radius > 5) { el.dataset.radius = el.dataset.radius * 0.995; } }); requestAnimationFrame(animate); } animate();})();
Site Edit
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0;
Rehehe
javascript:(function() { /* 1. Force-inject custom CSS for the animation to bypass some CSPs */ const style = document.createElement('style'); style.innerHTML = ` .falling-item { transition: transform 2.5s cubic-bezier(.17,.67,.83,.67), opacity 2s !important; pointer-events: none !important; display: inline-block !important; } `; document.head.appendChild(style); /* 2. Target all elements and force them to 'fall' */ const elements = document.querySelectorAll('body *:not(script):not(style)'); elements.forEach((el) => { const speed = 1500 + Math.random() * 2500; const delay = Math.random() * 1000; const spin = Math.random() * 720 - 360; const sideDrift = Math.random() * 400 - 200; el.classList.add('falling-item'); el.style.transitionDuration = speed + 'ms'; el.style.transitionDelay = delay + 'ms'; setTimeout(() => { el.style.transform = `translate(${sideDrift}px, ${window.innerHeight + 1000}px) rotate(${spin}deg)`; el.style.opacity = '0'; }, 100); }); /* 3. The Big Reveal */ setTimeout(() => { document.body.innerHTML = ''; /* Wipe the broken site clean */ document.body.style.backgroundColor = '#000'; const container = document.createElement('div'); container.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999999;'; /* If YouTube is blocked by CSP, we use a direct link as a backup */ container.innerHTML = %60 <h1 style="color:white;font-family:sans-serif;margin-bottom:20px;">The Site Has Collapsed.</h1> <iframe width="800" height="450" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe> <p style="color:#555;margin-top:20px;cursor:pointer;" onclick="location.reload()">[ Click to Rebuild Universe ]</p> %60; document.body.appendChild(container); }, 3500);})();