diff --git a/registry/components/magicui/ripple.tsx b/registry/components/magicui/ripple.tsx
index 4fcfa987e..5c2467ed2 100644
--- a/registry/components/magicui/ripple.tsx
+++ b/registry/components/magicui/ripple.tsx
@@ -23,16 +23,19 @@ const Ripple = React.memo(function Ripple({
         return (
           <div
             key={i}
-            className={`absolute animate-ripple rounded-full bg-foreground/25 shadow-xl border top-1/2 left-1/2 translate-x-1/2 translate-y-1/2 [--i:${i}]`}
+            className={`absolute animate-ripple rounded-full bg-foreground/25 shadow-xl border [--i:${i}]`}
             style={
               {
                 width: `${size}px`,
                 height: `${size}px`,
-                opacity: opacity,
-                animationDelay: animationDelay,
-                borderStyle: borderStyle,
+                opacity,
+                animationDelay,
+                borderStyle,
                 borderWidth: "1px",
-                borderColor: `rgba(var(--foreground-rgb), ${borderOpacity / 100})`,
+                borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%) scale(1)",
               } as CSSProperties
             }
           />