Bookmarklets

These are some cool or fun gizmos you can put on your browser bookmarks bar. Just click it to run it!

For all of these, highlight all the text in a text field, then copy it, paste it as the address of a bookmark.

Space Tool

javascript:(function(){const script=document.createElement('script');script.src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js';document.head.appendChild(script);script.onload=()=>{const style=document.createElement('style');style.innerHTML='*{user-select:none!important;-webkit-user-select:none!important;cursor:grab!important;}*:active{cursor:grabbing!important;}body{overflow:hidden!important;}';document.head.appendChild(style);const{Engine,Runner,Bodies,Composite,Mouse,MouseConstraint,Body,Vector}=Matter;const engine=Engine.create();engine.world.gravity.y=0;const elements=document.querySelectorAll('p,h1,h2,h3,button,a,img,li,span,input,.btn');const bodiesMap=[];elements.forEach(el=>{const rect=el.getBoundingClientRect();if(rect.width>5&&rect.height>5){const body=Bodies.rectangle(rect.left+rect.width/2,rect.top+rect.height/2,rect.width,rect.height,{restitution:0.8,frictionAir:0.01,friction:0.1,density:0.001});bodiesMap.push({element:el,body:body});Composite.add(engine.world,body);el.style.cssText+=`;position:fixed!important;left:0!important;top:0!important;width:${rect.width}px!important;height:${rect.height}px!important;margin:0!important;z-index:99999!important;pointer-events:none!important;transition:none!important;transform-origin:center center!important;`;}});const wallOptions={isStatic:true,restitution:1};const walls=[Bodies.rectangle(window.innerWidth/2,-25,window.innerWidth,50,wallOptions),Bodies.rectangle(window.innerWidth/2,window.innerHeight+25,window.innerWidth,50,wallOptions),Bodies.rectangle(-25,window.innerHeight/2,50,window.innerHeight,wallOptions),Bodies.rectangle(window.innerWidth+25,window.innerHeight/2,50,window.innerHeight,wallOptions)];Composite.add(engine.world,walls);const mouse=Mouse.create(document.body);const mouseConstraint=MouseConstraint.create(engine,{mouse:mouse,constraint:{stiffness:0.2,damping:0.05}});Composite.add(engine.world,mouseConstraint);let keys={};window.onkeydown=(e)=>keys[e.key.toLowerCase()]=true;window.onkeyup=(e)=>keys[e.key.toLowerCase()]=false;Runner.run(Runner.create(),engine);(function update(){if(keys['r']){bodiesMap.forEach(({body})=>{const delta=Vector.sub(mouse.position,body.position);Body.applyForce(body,body.position,Vector.mult(Vector.normalise(delta),0.00005*body.mass));});}bodiesMap.forEach(({element,body})=>{const{x,y}=body.position;element.style.transform=`translate3d(${x-element.offsetWidth/2}px,${y-element.offsetHeight/2}px,0) rotate(${body.angle}rad)`;});requestAnimationFrame(update);})();};})();