atmosphere explorer pds.ls
tool typescript atproto
434
fork

Configure Feed

Select the types of activity you want to include in your feed.

randomize star rotation (very important feature)

authored by

David Buchanan and committed by
Tangled
3e9f9c66 ffcfbace

+6 -2
+6 -2
src/layout.tsx
··· 74 74 @keyframes sparkle { 75 75 0% { 76 76 opacity: 1; 77 - transform: translate(0, 0) rotate(0deg) scale(1); 77 + transform: translate(0, 0) rotate(var(--ttheta1)) scale(1); 78 78 } 79 79 100% { 80 80 opacity: 0; 81 - transform: translate(var(--tx), var(--ty)) rotate(180deg) scale(0); 81 + transform: translate(var(--tx), var(--ty)) rotate(var(--ttheta2)) scale(0); 82 82 } 83 83 } 84 84 `; ··· 100 100 101 101 const tx = (Math.random() - 0.5) * 50; 102 102 const ty = (Math.random() - 0.5) * 50; 103 + const ttheta1 = Math.random() * 360; 104 + const ttheta2 = ttheta1 + (Math.random() - 0.5) * 540; 103 105 star.style.setProperty("--tx", tx + "px"); 104 106 star.style.setProperty("--ty", ty + "px"); 107 + star.style.setProperty("--ttheta1", ttheta1 + "deg"); 108 + star.style.setProperty("--ttheta2", ttheta2 + "deg"); 105 109 106 110 document.body.appendChild(star); 107 111