ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto

move inline animations to Tailwind config

Optimization #11:
- added float-1, float-2, float-3 animation variants to tailwind.config.js
- replaced inline animation and animationDelay styles with Tailwind classes
- use modulo pattern to cycle through 3 animation variants
- maintains visual variety without Math.random() for animation timing
- consistent with Tailwind conventions, easier to maintain

byarielm.fyi 35061ae4 6b5cf20f

verified
Changed files
+16 -12
src
pages
+13 -12
src/pages/Results.tsx
··· 100 100 <div className="bg-firefly-banner dark:bg-firefly-banner-dark text-white relative overflow-hidden"> 101 101 {!reducedMotion && ( 102 102 <div className="absolute inset-0 opacity-20" aria-hidden="true"> 103 - {[...Array(10)].map((_, i) => ( 104 - <div 105 - key={i} 106 - className="absolute w-1 h-1 bg-white rounded-full" 107 - style={{ 108 - left: `${Math.random() * 100}%`, 109 - top: `${Math.random() * 100}%`, 110 - animation: `float ${2 + Math.random()}s ease-in-out infinite`, 111 - animationDelay: `${Math.random()}s`, 112 - }} 113 - /> 114 - ))} 103 + {[...Array(10)].map((_, i) => { 104 + const animations = ["animate-float-1", "animate-float-2", "animate-float-3"]; 105 + return ( 106 + <div 107 + key={i} 108 + className={`absolute w-1 h-1 bg-white rounded-full ${animations[i % 3]}`} 109 + style={{ 110 + left: `${Math.random() * 100}%`, 111 + top: `${Math.random() * 100}%`, 112 + }} 113 + /> 114 + ); 115 + })} 115 116 </div> 116 117 )} 117 118 <div className="max-w-3xl mx-auto px-4 py-6 relative">
+3
tailwind.config.js
··· 24 24 }), 25 25 animation: { 26 26 float: "float 3s ease-in-out infinite", 27 + "float-1": "float 2s ease-in-out infinite", 28 + "float-2": "float 2.5s ease-in-out 0.3s infinite", 29 + "float-3": "float 3s ease-in-out 0.6s infinite", 27 30 }, 28 31 keyframes: { 29 32 float: {