diff --git a/packages/editor/src/components/ui/controls/metric-control.tsx b/packages/editor/src/components/ui/controls/metric-control.tsx
index 9742c813c..e48e39880 100644
--- a/packages/editor/src/components/ui/controls/metric-control.tsx
+++ b/packages/editor/src/components/ui/controls/metric-control.tsx
@@ -330,7 +330,16 @@ export function MetricControl({
               type="text"
               value={inputValue}
             />
-            {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
+            {displayUnit && (
+              <span
+                className={cn(
+                  'ml-[1px] transition-opacity duration-150',
+                  hint ? 'opacity-0' : 'text-muted-foreground/40',
+                )}
+              >
+                {displayUnit}
+              </span>
+            )}
           </div>
         ) : (
           <div
diff --git a/packages/editor/src/components/ui/controls/slider-control.tsx b/packages/editor/src/components/ui/controls/slider-control.tsx
index c902cecd9..e46b56b37 100644
--- a/packages/editor/src/components/ui/controls/slider-control.tsx
+++ b/packages/editor/src/components/ui/controls/slider-control.tsx
@@ -329,7 +329,16 @@ export function SliderControl({
               type="text"
               value={inputValue}
             />
-            {displayUnit && <span className="ml-[1px] text-muted-foreground">{displayUnit}</span>}
+            {displayUnit && (
+              <span
+                className={cn(
+                  'ml-[1px] transition-opacity duration-150',
+                  hint ? 'opacity-0' : 'text-muted-foreground/40',
+                )}
+              >
+                {displayUnit}
+              </span>
+            )}
           </>
         ) : (
           <div