patch of randomize star rotation (very important feature) · round #0 · pull #13 · pdsls.dev/pdsls

+6 -2

src/layout.tsx

···

       74
        
                 @keyframes sparkle {

     

       75
        
                   0% {

     

       76
        
                     opacity: 1;

     

       77
       -
                     transform: translate(0, 0) rotate(0deg) scale(1);

     

       78
        
                   }

     

       79
        
                   100% {

     

       80
        
                     opacity: 0;

     

       81
       -
                     transform: translate(var(--tx), var(--ty)) rotate(180deg) scale(0);

     

       82
        
                   }

     

       83
        
                 }

     

       84
        
               `;

     
···

       100
        
       

     

       101
        
               const tx = (Math.random() - 0.5) * 50;

     

       102
        
               const ty = (Math.random() - 0.5) * 50;

     

       0
        
       
     

       0
        
       
     

       103
        
               star.style.setProperty("--tx", tx + "px");

     

       104
        
               star.style.setProperty("--ty", ty + "px");

     

       0
        
       
     

       0
        
       
     

       105
        
       

     

       106
        
               document.body.appendChild(star);

     

       107

···

       74
        
                 @keyframes sparkle {

     

       75
        
                   0% {

     

       76
        
                     opacity: 1;

     

       77
       +
                     transform: translate(0, 0) rotate(var(--ttheta1)) scale(1);

     

       78
        
                   }

     

       79
        
                   100% {

     

       80
        
                     opacity: 0;

     

       81
       +
                     transform: translate(var(--tx), var(--ty)) rotate(var(--ttheta2)) scale(0);

     

       82
        
                   }

     

       83
        
                 }

     

       84
        
               `;

     
···

       100
        
       

     

       101
        
               const tx = (Math.random() - 0.5) * 50;

     

       102
        
               const ty = (Math.random() - 0.5) * 50;

     

       103
       +
               const ttheta1 = Math.random() * 360;

     

       104
       +
               const ttheta2 = ttheta1 + (Math.random() - 0.5) * 540;

     

       105
        
               star.style.setProperty("--tx", tx + "px");

     

       106
        
               star.style.setProperty("--ty", ty + "px");

     

       107
       +
               star.style.setProperty("--ttheta1", ttheta1 + "deg");

     

       108
       +
               star.style.setProperty("--ttheta2", ttheta2 + "deg");

     

       109
        
       

     

       110
        
               document.body.appendChild(star);

     

       111