Update Numeric Text transition

DynamicIsland/components/OSD/CircularHUDView.swift

@@ -74,11 +74,12 @@ struct CircularHUDView: View {
             if showValue {
                 VStack {
                     Spacer()
-                    Text("\(Int(value * 100))")
+                    HUDNumericLabel(
-                        .font(.system(size: size * 0.15, weight: .bold, design: .rounded))
+                        value: value,
-                        .foregroundStyle(.white.opacity(0.65))
+                        font: .system(size: size * 0.15, weight: .bold, design: .rounded),
-                        .contentTransition(.numericText())
+                        color: .white.opacity(0.65)
-                        .padding(.bottom, size * 0.03)
+                    )
+                    .padding(.bottom, size * 0.03)
                 }
             }
 

DynamicIsland/components/OSD/HUDNumericLabel.swift

@@ -0,0 +1,40 @@
+#if os(macOS)
+import SwiftUI
+
+/// Shared numeric label for HUD/OSD styles with rolling value animation.
+struct HUDNumericLabel: View {
+    let value: CGFloat
+    var font: Font
+    var color: Color
+    var alignment: Alignment = .center
+    var width: CGFloat? = nil
+    var minimumDigits: Int = 3
+    var animation: Animation = .interactiveSpring(response: 0.35, dampingFraction: 0.75, blendDuration: 0.15)
+    
+    @State private var animatedValue: CGFloat = 0
+    
+    var body: some View {
+        Text(formattedValue)
+            .font(font)
+            .monospacedDigit()
+            .foregroundStyle(color)
+            .contentTransition(.numericText())
+            .frame(width: width, alignment: alignment)
+            .onAppear {
+                animatedValue = value
+            }
+            .onChange(of: value) { newValue in
+                withAnimation(animation) {
+                    animatedValue = newValue
+                }
+            }
+    }
+    
+    private var formattedValue: String {
+        let clamped = max(0, min(100, Int(round(animatedValue * 100))))
+        let digits = max(1, minimumDigits)
+        let format = "%\(digits)d"
+        return String(format: format, clamped)
+    }
+}
+#endif

DynamicIsland/components/OSD/VerticalHUDView.swift

@@ -73,11 +73,14 @@ struct VerticalHUDView: View {
                 // Icon & Text overlay
                 VStack {
                     if showValue {
-                        Text("\(Int(state.value * 100))%")
+                        HUDNumericLabel(
-                            .font(.system(size: 10, weight: .bold))
+                            value: state.value,
-                            .foregroundStyle(state.value > 0.85 ? (useAccentColor ? .white : .black) : .secondary)
+                            font: .system(size: 10, weight: .bold),
-                            .padding(.top, 8 + (stretchOffset < 0 ? abs(stretchOffset/4) : 0))
+                            color: valueLabelColor,
-                            .contentTransition(.numericText())
+                            alignment: .center,
+                            width: hudWidth * 0.8
+                        )
+                        .padding(.top, 8 + (stretchOffset < 0 ? abs(stretchOffset/4) : 0))
                     }
                     
                     Spacer()
@@ -225,5 +228,12 @@ struct VerticalHUDView: View {
         
         return AnyShapeStyle(useAccentColor ? Color.accentColor : Color.white)
     }
+
+    private var valueLabelColor: Color {
+        if state.value > 0.85 {
+            return useAccentColor ? .white : .black
+        }
+        return .secondary
+    }
 }
 #endif