Fixes button animation inconsistency on different deisplays

src/components/button/mod.rs

@@ -81,7 +81,7 @@ pub enum ButtonSizeVariants {
     Thin,
     #[tw(
         default,
-        class = "group/size-md py-4 px-6 xl:px-8 [&_>_.btn-icon]:size-6"
+        class = "group/size-md py-4 px-6 xl:px-8 [&_>_.btn-icon]:size-5"
     )]
     Md,
     #[tw(class = "group/size-lg py-6 px-10 text-lg 2xl:text-2xl [&_>_.btn-icon]:size-8")]

src/components/button/shaders.rs

@@ -50,12 +50,13 @@ pub const FRAGMENT_SHADER: &str = r#"
       return desiredPosition - coord;
     }
 
-    // exponential
+    // This was gotten from here: https://iquilezles.org/articles/smin
+    // quadratic polynomial
     float smin( float a, float b, float k )
     {
-        k *= 1.0;
-        float r = exp2(-a/k) + exp2(-b/k);
-        return -k*log2(r);
+        k *= 4.0;
+        float h = max( k-abs(a-b), 0.0 )/k;
+        return min(a,b) - h*h*k*(1.0/4.0);
     }
 
     void main() {
@@ -98,13 +99,13 @@ pub const FRAGMENT_SHADER: &str = r#"
         );
 
         // Multiplying by some scaling constant to make it slightly smaller and look nicer (preference)
-        float circleRadius = ((extension - 5.0) * 0.5) * 0.6;
+        float circleRadius = ((extension - 5.0) * 0.5) * 0.7;
 
-        float circle = circleSdf(circlePosition, mix(circleRadius * 0.5, circleRadius, u_progression));
+        float circle = circleSdf(circlePosition, circleRadius);
 
         // Draw Circle
 
-        float pillAndCircle = smin(pill, circle, 10.0);
+        float pillAndCircle = smin(pill, circle, extension * 0.05);
 
         // Leaving these comments here because they are useful for debugging
         // color += paintSdf(buttonColor, pill);