mac app cylon animation

mac/Sources/Byre/Chat.swift

@@ -557,18 +557,22 @@ private struct TranscriptScroll: View {
 
 private struct Scanner: View {
     let color: Color
-    @ViewState private var phase = false
 
     var body: some View {
-        Capsule()
-            .fill(LinearGradient(colors: [.clear, color, .clear], startPoint: .leading, endPoint: .trailing))
-            .frame(width: 30, height: 2)
-            .offset(x: phase ? 54 : 0)
-            .animation(.easeInOut(duration: 1.2).repeatForever(autoreverses: true), value: phase)
-            .frame(width: 84, height: 2, alignment: .leading)
-            .onAppear {
-                phase = true
+        TimelineView(.animation) { context in
+            Canvas { gc, _ in
+                let t = context.date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: 2.4) / 1.2
+                let leg = t < 1 ? t : 2 - t
+                let center = 15 + 54 * (1 - cos(.pi * leg)) / 2
+                for x in stride(from: 0.0, through: 80, by: 5) {
+                    let alpha = max(0, 1 - abs(x + 1 - center) / 15)
+                    if alpha > 0 {
+                        gc.fill(Path(CGRect(x: x, y: 0, width: 2, height: 2)), with: .color(color.opacity(alpha)))
+                    }
+                }
             }
+        }
+        .frame(width: 84, height: 2)
     }
 }