From a72fc2990a9eac447c8be2b20e319052c994056e Mon Sep 17 00:00:00 2001
From: Akin Aguda <lordtitan7@gmail.com>
Date: Sat, 18 Jul 2026 11:50:39 -0500
Subject: [PATCH 1/2] Improved animaiton look and experience for lower end
 devices

---
 src/components/button/mod.rs     | 60 +++++++++++++++++++++-----------
 src/components/button/shaders.rs |  2 +-
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/components/button/mod.rs b/src/components/button/mod.rs
index f8af3e8..8fe0dfd 100644
--- a/src/components/button/mod.rs
+++ b/src/components/button/mod.rs
@@ -277,12 +277,6 @@ pub fn Button(
         },
     };
 
-    let additional_class = if icon_el.is_some() {
-        "group/with-icon"
-    } else {
-        ""
-    };
-
     let maybe_backdrop_builder = LocalResource::new(ButtonBackdropBuilder::load);
 
     let (extension_dimension, set_extension_dimension) = signal::<Option<i32>>(None);
@@ -333,19 +327,28 @@ pub fn Button(
     // immediately (untracked, so this effect stays keyed to canvas/builder only), then store it.
     // The wake guard makes the initial wake safe even if the visibility effect also fires true.
     Effect::new(move || {
-        if let Some(canvas) = canvas_ref.get() {
-            if let Some(backdrop_builder) = maybe_backdrop_builder.get() {
-                let backdrop =
-                    backdrop_builder.create_backdrop(canvas, ButtonBackdropCfg { color });
-                let ctrls = create_render_loop(backdrop, animation_direction.clone());
-
-                if canvas_in_view.get_untracked() {
-                    (ctrls.wake)();
-                } else {
-                    (ctrls.sleep)();
+        if let Some(window) = web_sys::window() {
+            let no_amiations = window
+                .match_media("(prefers-reduced-motion: reduce)")
+                .map_or(false, |maybe_motion_query| {
+                    return maybe_motion_query.map_or(false, |motion_query| motion_query.matches());
+                });
+            if !no_amiations {
+                if let Some(canvas) = canvas_ref.get() {
+                    if let Some(backdrop_builder) = maybe_backdrop_builder.get() {
+                        let backdrop =
+                            backdrop_builder.create_backdrop(canvas, ButtonBackdropCfg { color });
+                        let ctrls = create_render_loop(backdrop, animation_direction.clone());
+
+                        if canvas_in_view.get_untracked() {
+                            (ctrls.wake)();
+                        } else {
+                            (ctrls.sleep)();
+                        }
+
+                        controls.set_value(Some(ctrls));
+                    }
                 }
-
-                controls.set_value(Some(ctrls));
             }
         }
     });
@@ -373,13 +376,30 @@ pub fn Button(
         });
     });
 
+    let additional_class = {
+        let has_icon = icon_el.is_some();
+        move || {
+            let mut base = String::from("");
+
+            if has_icon {
+                base = tw_join!(base, "group/with-icon");
+            };
+
+            if !extension_dimension.get().is_some() {
+                base = tw_join!(base, "overflow-x-hidden");
+            }
+
+            return base;
+        }
+    };
+
     match use_as {
         ButtonUsecase::Button { on_click } => Either::Left(view! {
           <button
             node_ref=button_ref
             on:mouseenter=move |_| set_is_hovering(true)
             on:mouseleave=move |_| set_is_hovering(false)
-            class=tw_merge!(additional_class, class)
+            class=move|| tw_merge!(&class, additional_class())
             on:click=move |e| on_click.run(e)
           >
 
@@ -405,7 +425,7 @@ pub fn Button(
                 node_ref=link_ref
                 on:mouseenter=move |_| set_is_hovering(true)
                 on:mouseleave=move |_| set_is_hovering(false)
-                class=tw_merge!(additional_class, class)
+                class=move|| tw_merge!(&class, additional_class())
                 href=href
             >
 
diff --git a/src/components/button/shaders.rs b/src/components/button/shaders.rs
index ac2406e..afec02c 100644
--- a/src/components/button/shaders.rs
+++ b/src/components/button/shaders.rs
@@ -98,7 +98,7 @@ 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.9;
+        float circleRadius = ((extension - 5.0) * 0.5) * 0.6;
 
         float circle = circleSdf(circlePosition, mix(circleRadius * 0.5, circleRadius, u_progression));
 

From 80291c31105a4e91a2741658a7f5d219537fe25e Mon Sep 17 00:00:00 2001
From: Akin Aguda <lordtitan7@gmail.com>
Date: Sat, 18 Jul 2026 12:11:14 -0500
Subject: [PATCH 2/2] fixed clippy errors

---
 src/components/button/mod.rs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/button/mod.rs b/src/components/button/mod.rs
index 8fe0dfd..346b3dc 100644
--- a/src/components/button/mod.rs
+++ b/src/components/button/mod.rs
@@ -330,8 +330,8 @@ pub fn Button(
         if let Some(window) = web_sys::window() {
             let no_amiations = window
                 .match_media("(prefers-reduced-motion: reduce)")
-                .map_or(false, |maybe_motion_query| {
-                    return maybe_motion_query.map_or(false, |motion_query| motion_query.matches());
+                .is_ok_and(|maybe_motion_query| {
+                    maybe_motion_query.is_some_and(|motion_query| motion_query.matches())
                 });
             if !no_amiations {
                 if let Some(canvas) = canvas_ref.get() {
@@ -385,11 +385,11 @@ pub fn Button(
                 base = tw_join!(base, "group/with-icon");
             };
 
-            if !extension_dimension.get().is_some() {
+            if extension_dimension.get().is_none() {
                 base = tw_join!(base, "overflow-x-hidden");
-            }
+            };
 
-            return base;
+            base
         }
     };