Apple Intelligence Siri Overlay Clone in SwiftUI

What can you actually clone here?

The visual grammar, not the system surface. The glowing, color-shifting edge light that Apple Intelligence wraps around the screen when Siri activates is system UI: no public API invokes it, restyles it, or attaches your app to it. What a SwiftUI build can do is borrow the grammar for your own in-app assistant: the same full-screen edge glow, the same fluid color motion, rendered by your code around your assistant’s states.

That reframe also keeps you on the right side of review and trademark lines. An in-app effect that signals “our assistant is listening” is a design homage; an interface that pretends to be Siri is impersonation, and Apple’s guidelines are unambiguous about apps that mimic system products. Build the glow, name the assistant something that is yours, and skip the orb-and-waveform theater that implies the OS itself is responding. To wire a real model behind that effect, see Apple Intelligence on-device models in SwiftUI.

How is the edge glow built in SwiftUI?

Layered strokes of an animated angular gradient, softened until they read as light. The skeleton:

struct AssistantGlow: View {
    @State private var phase: Double = 0
    var body: some View {
        TimelineView(.animation) { timeline in
            let t = timeline.date.timeIntervalSinceReferenceDate
            RoundedRectangle(cornerRadius: 56, style: .continuous)
                .strokeBorder(
                    AngularGradient(
                        colors: [.blue, .purple, .pink, .orange, .blue],
                        center: .center,
                        angle: .degrees(t * 40)
                    ),
                    lineWidth: 10
                )
                .blur(radius: 14)
                .ignoresSafeArea()
        }
        .allowsHitTesting(false)
    }
}

Three refinements turn the skeleton into the real thing. Stack two or three strokes at different widths and blur radii (a tight 4-point core, a 14-point bloom, a faint 30-point wash) so the light has depth instead of looking like a stroked border. Drive the gradient rotation and a subtle line-width oscillation from the same clock so the glow breathes rather than spins mechanically. And match the corner radius to the device’s actual display corners, because a glow that cuts across the screen corners breaks the illusion instantly.

For the fluid, plasma-like color motion of the real effect, a Metal shader through SwiftUI’s layerEffect replaces the flat angular gradient: a small noise-driven hue-shift shader over the stroke layer gets remarkably close, and it stays GPU-cheap because the effect only touches the edge pixels, not the whole screen. The budget is real: a ProMotion display redraws every 8,333 microseconds at 120 frames per second, and the layered-stroke design fits inside it precisely because the fill is never composited.

How should the glow map to assistant states?

As an honest state lamp, never decoration. The glow earns its screen real estate by telling the truth about what the assistant is doing:

• Idle: no glow. Resist the ambient shimmer; an always-on effect signals nothing and burns battery.
• Listening: the full edge glow, steady rotation. Appears exactly when the microphone is hot, which doubles as a privacy affordance the user learns to trust.
• Thinking: the rotation slows and the bloom tightens, the same never-fake-progress discipline as the agent thinking animation: motion communicates “working,” not theatrical fake steps.
• Responding: the glow hands off to the response surface and exits; two effects competing for attention halve each other.

Wire the states to real signals (speech recognizer activity, request lifecycle), and respect Reduce Motion by swapping the rotation for a gentle opacity pulse, which preserves the state lamp while dropping the movement. Voice-presence interfaces live and die on this honesty, the throughline of the AI Pin interface breakdown as well: the animation is the status API.

What about the rest of the Apple Intelligence look?

Borrow sparingly. The glowing text-field halo (the writing-tools moment) translates well to an in-app composer: the same multi-stroke gradient treatment around a single rounded rect, activated while your model streams. The full-screen wash behind system Siri does not translate: inside an app it reads as a modal takeover, and users park the gesture-school instincts they learned from the OS at your app’s door. Keep the glow at the edges, keep content legible above it (the system effect never obscures the screen it wraps), and keep one effect per moment.

For the screens the assistant lives in, chat surfaces, voice sheets, settings, a free VP0 design gives Claude Code or Cursor real structure to generate from, with the glow layered on as the state lamp rather than carrying the whole interface.

Key takeaways: the Siri-style glow in SwiftUI

• Clone the grammar, not the system: no API exposes the real overlay; build your own assistant’s edge glow and never impersonate Siri.
• Layered animated strokes make the light: tight core, soft bloom, faint wash, one shared clock, corners matched to the display.
• layerEffect shaders buy the fluid look: noise-driven hue shift over the edge pixels, GPU-cheap.
• The glow is a state lamp: hot mic means glow, thinking slows it, response dismisses it, Reduce Motion swaps rotation for pulse.
• One effect per moment: edge glow or response surface, never both fighting.

Frequently asked questions

How do I clone the Apple Intelligence Siri overlay in SwiftUI? Build an edge glow from stacked AngularGradient strokes (tight core, soft bloom, faint wash) rotated by a TimelineView clock, blurred into light, with corner radius matched to the device display; add a layerEffect Metal shader for the fluid hue motion. It wraps your own assistant’s states, since the real system overlay has no public API. A free VP0 design covers the assistant screens the glow lives on.

Can my app trigger or restyle the real Siri animation? No. The Apple Intelligence overlay is system UI with no developer surface. Apps integrate with Siri through App Intents, but the glow around the screen belongs to the OS, and imitating it to appear as the system risks rejection.

How do I make the glow performant? Keep the effect on edge pixels only: stroked shapes, not full-screen shaders; one TimelineView clock driving rotation and width; blur radii fixed rather than animated. The layered-stroke approach stays cheap even on older devices because the fill is never touched.

What should the glow communicate? Microphone and model state, honestly: appear when listening starts, slow and tighten while thinking, exit when the response renders, stay dark when idle. Pair it with Reduce Motion support by replacing rotation with an opacity pulse.

Is it safe for App Review to ship a Siri-like effect? A glow signaling your own assistant’s states is ordinary design. Problems start when an app presents itself as Siri or Apple Intelligence: keep your assistant’s name and iconography clearly yours, and the effect is just good craft.