I Recreated iPhone's Apple Intelligence Edge Glow Effect ...

iPhone's Apple Intelligence shows a beautiful iridescent glow around the screen edges when Siri is thinking. I wanted that same effect on my Mac when Claude Code is working.

So I built EdgeGlow — a free, open-source macOS menu bar app that recreates iPhone's edge glow effect on Mac.

In this post, I'll walk through how I did it and the technical challenges I faced.

How It Works

AI Agent triggers hook → curl http://127.0.0.1:9876/start → Screen glows
AI Agent finishes     → curl http://127.0.0.1:9876/stop  → Glow fades out

That's it. Dead simple.

The interesting part is the animation. Let me walk you through it.

The Technical Challenge

I needed a smooth marquee effect around the screen edges — essentially a dashed line that flows continuously.

Why Not CABasicAnimation?

My first approach used CABasicAnimation on lineDashPhase:

let anim = CABasicAnimation(keyPath: "lineDashPhase")
anim.fromValue = 0
anim.toValue = perimeter
anim.duration = 5.0
anim.repeatCount = .infinity
shape.add(anim, forKey: "flow")

This worked... until the window was hidden and shown again.

Core Animation would lose the animation state, and the marquee would:

Freeze in place
Reverse direction suddenly
Jump to a random position

The Root Cause

CABasicAnimation relies on Core Animation's animation system, which is tied to the layer's presentation state. When the window is hidden (orderOut) or the layer is removed from the hierarchy, the animation state is lost.

I tried several workarounds:

Pause/resume animations — didn't work reliably
Keep the window alive — wasted resources
Reset animation on show — caused visual jumps

None of them were bulletproof.

The Solution: Timer-Driven Animation

I switched to a Timer at 60fps that directly updates lineDashPhase:

private var flowTimer: Timer?
private var dashPhase: CGFloat = 0
private var lastTickTime: CFTimeInterval = 0

private func startFlow() {
    stopFlow()
    lastTickTime = CACurrentMediaTime()

    flowTimer = Timer.scheduledTimer(withTimeInterval: 1.0 / 60.0, repeats: true) { [weak self] _ in
        self?.tickFlow()
    }
    RunLoop.main.add(flowTimer!, forMode: .common)
}

private func tickFlow() {
    let now = CACurrentMediaTime()
    let dt = CGFloat(now - lastTickTime)
    lastTickTime = now

    // Clamp dt to prevent huge jumps (e.g., returning from background)
    let clampedDt = min(dt, 0.1)

    let perimeter = currentPerimeter()
    guard perimeter > 0, settings.animationDuration > 0 else { return }

    let speed = perimeter / CGFloat(settings.animationDuration)
    dashPhase += speed * clampedDt * (settings.clockwise ? 1 : -1)

    ringLayer.sublayers?.forEach { layer in
        (layer as? CAShapeLayer)?.lineDashPhase = dashPhase
    }
}

This is bulletproof — no dependency on Core Animation's animation system, no state loss on window visibility changes.

The performance is also great: updating a single CGFloat property at 60fps uses ~0% CPU.

The 4-Layer + 20-Segment Glow Effect

To recreate iPhone's Apple Intelligence edge glow, I needed two things:

1. 20-segment gradient coloring: Split the screen edge into 20 segments, each with a different hue (purple → blue → cyan → pink → orange → gold). Gaussian blur at segment boundaries creates smooth transitions:

for i in 0..<20 {
    let hue = (baseHue + Double(i) * 0.05).truncatingRemainder(dividingBy: 1.0)
    // Each segment has a different color, forming a gradient
}

2. 4-layer glow stack: Stack 4 CAShapeLayer instances with different blur levels to create a realistic neon glow effect:

Layer Configuration

let configs: [(widthMul: CGFloat, alphaMul: CGFloat, blur: Double)] = [
    (baseWidth * 1.5, 0.15, 12.0),  // Layer 1: Wide line, high blur, low alpha → outer glow
    (baseWidth * 0.8, 0.30, 8.0),   // Layer 2: Medium line, medium blur, medium alpha → mid glow
    (baseWidth * 0.3, 0.70, 2.0),   // Layer 3: Thin line, low blur, high alpha → core line
    (baseWidth * 0.1, 0.95, 0.0),   // Layer 4: Thinnest line, no blur, full alpha → bright center
]

Building Each Layer

for (lineWidth, alpha, blur) in configs {
    let shape = CAShapeLayer()
    shape.frame = ringLayer.bounds
    shape.path = path
    shape.fillColor = nil
    shape.strokeColor = color.withAlphaComponent(alpha).cgColor
    shape.lineWidth = lineWidth
    shape.lineCap = .round
    shape.lineDashPattern = [NSNumber(value: Double(dashLen)),
                             NSNumber(value: Double(gapLen))]

    if blur > 0 {
        let bf = CIFilter(name: "CIGaussianBlur")!
        bf.setValue(blur, forKey: "inputRadius")
        shape.filters = [bf]
    }

    ringLayer.addSublayer(shape)
}

The Result

The 4 layers stack on top of each other, creating a realistic neon light tube effect:

Layer 4: ██ (bright center, no blur)
Layer 3: ████ (core line, blur 2)
Layer 2: ██████ (mid glow, blur 8)
Layer 1: ████████ (outer glow, blur 12)

The outer layers create the soft glow halo, while the inner layers create the bright core. Together, they look like a real neon light.

Multi-Terminal Reference Counting

The Problem

If you have multiple Claude Code terminals running, one calling /stop would kill the glow even though others are still active.

The Solution: Reference Counting

class ControlServer {
    private var activeCount = 0

    private func processRequest(_ raw: String, conn: NWConnection) {
        switch path {
        case "/start":
            activeCount += 1
            onStart?()
            resetSafetyTimer()

        case "/stop":
            activeCount = max(0, activeCount - 1)
            if activeCount == 0 { onStop?() }

        case "/pulse":
            activeCount = max(0, activeCount - 1)
            if activeCount == 0 { onPulse?() }
        }
    }
}

Now /start increments the count, /stop decrements it. The glow only hides when the count reaches 0.

Safety Timeout

What if an agent crashes without sending /stop? The reference count would stay > 0 forever.

Solution: a 120-second safety timeout:

private func resetSafetyTimer() {
    safetyTimer?.cancel()
    let work = DispatchWorkItem { [weak self] in
        guard let self = self else { return }
        if self.activeCount > 0 {
            print("⏰ 60s no activity, resetting to 0")
            self.activeCount = 0
            self.onStop?()
        }
    }
    safetyTimer = work
    DispatchQueue.main.asyncAfter(deadline: .now() + 60.0, execute: work)
}

Every /start resets the timer. If no /start is received for 60 seconds, the count resets to 0.

Security Considerations

EdgeGlow runs an HTTP server on 127.0.0.1:9876. I had to be careful about security:

Localhost Only

let param = NWParameters.tcp
param.acceptLocalOnly = true  // Only accept connections from localhost

This prevents external network access.

GET Requests Only

guard method == "GET" || method == "OPTIONS" else {
    sendResponse(405, "Method Not Allowed", conn: conn)
    return
}

Rejects POST/PUT/DELETE to prevent CSRF attacks.

No CORS Headers

// No Access-Control-Allow-Origin header
// Web JavaScript cannot invoke endpoints

This prevents web pages from calling the API via JavaScript.

No Data Collection

No analytics
No telemetry
No network requests (except localhost)

Multi-Monitor Support

The Challenge

How to handle multiple displays with different sizes?

The Solution

Calculate the union of all screen frames:

func totalScreenFrame() -> NSRect {
    var frame = NSRect.zero
    for screen in NSScreen.screens {
        frame = NSUnionRect(frame, screen.frame)
    }
    return frame
}

Handling Display Changes

Listen to screen parameter changes:

NotificationCenter.default.addObserver(
    forName: NSApplication.didChangeScreenParametersNotification,
    object: nil,
    queue: .main
) { [weak self] _ in
    // Debounce 500ms to avoid rapid rebuilds
    self?.screenChangeWorkItem?.cancel()
    let work = DispatchWorkItem { [weak self] in
        self?.handleScreenChange()
    }
    self?.screenChangeWorkItem = work
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: work)
}

When displays change, rebuild the layers with the new frame size.

Settings Persistence

The Challenge

How to make settings reactive and persist them across launches?

The Solution

Use ObservableObject + UserDefaults + Combine:

class AppSettings: ObservableObject {
    @Published var speed: Int {
        didSet {
            UserDefaults.standard.set(speed, forKey: "speed")
            notifyChange()
        }
    }

    static let shared = AppSettings()

    private init() {
        self.speed = UserDefaults.standard.integer(forKey: "speed")
        if speed == 0 { speed = 5 } // default
    }
}

Then in GlowWindow, observe changes:

settings.$speed.sink { [weak self] _ in
    self?.rebuildLayers()
}.store(in: &cancellables)

When the user changes the speed slider, the layers rebuild automatically.

Performance

Metric	Value	Notes
CPU	~0%	Timer 60fps only updates one CGFloat
Memory	~50MB	4 CAShapeLayer + CIFilter
Disk	892KB	Universal Binary (arm64 + x86_64)
Network	0	localhost only, no external requests

The key insight: updating a property at 60fps is cheap. It's the GPU-accelerated CAShapeLayer rendering that does the heavy lifting.

Try It

GitHub: https://github.com/vector4wang/EdgeGlow
Download: https://github.com/vector4wang/EdgeGlow/releases
Size: 892KB zipped
License: MIT
macOS: 13.0+ (Ventura)

It's my first macOS app. Built with pure Swift + SwiftUI, no third-party dependencies.

Would love to hear your feedback!

推荐订阅源

DEV Community

How It Works

The Technical Challenge

Why Not CABasicAnimation?

The Root Cause

The Solution: Timer-Driven Animation

The 4-Layer + 20-Segment Glow Effect

Layer Configuration

Building Each Layer

The Result

Multi-Terminal Reference Counting

The Problem

The Solution: Reference Counting

Safety Timeout

Security Considerations

Localhost Only

GET Requests Only

No CORS Headers

No Data Collection

Multi-Monitor Support

The Challenge

The Solution

Handling Display Changes

Settings Persistence

The Challenge

The Solution

Performance

Try It