Edge

The edge is a glow round the inside edge of your app's screen. It follows the agent: hidden at rest, faint while listening, wide while speaking, and a segment circling it while thinking. It's colourful by default; saturation: 0 makes it grey ink.

Unlike the other objects it doesn't draw in a square: it fills whatever box it's given, and the engine takes the box's shape into account. See it on a phone-shaped frame in the gallery.

import { SinuaEdge } from "@sinua/web/components";
import type { VoiceSource } from "@sinua/core";

// A glow around the edge of the screen that follows the agent: hidden at rest, faint
// while listening, wide while speaking, a circling segment while thinking.
export function ScreenGlow({ voice }: { voice: VoiceSource }) {
  return (
    <SinuaEdge
      pattern="framing"
      voice={voice}
      cornerRadius={0.12} // match your screen's or container's corners
      label="" // decorative: the conversation is announced elsewhere
      style={{ position: "fixed", inset: 0, pointerEvents: "none", zIndex: 10 }}
    />
  );
}

• Over everything, out of the way. Put it above your content and let taps through: pointer-events: none on the web, .allowsHitTesting(false) in SwiftUI, a Box overlay in Compose.
• Edge to edge. In SwiftUI add .ignoresSafeArea(), so it reaches the rounded corners.
• Match the corners. cornerRadius is a share of the short side: about 0.12 for a phone screen, smaller for a card.
• Decorative. Give it an empty label; say what the agent is doing elsewhere on screen.

On the web it's also a tag: <sinua-edge pattern="framing">.

Props

The edge component is SinuaEdge. Pick a look with pattern; each pattern reads the props below. Sizes are engine sizes (20, 32, 64): defaults can differ per size.

Framing

pattern: "framing" · mode rim · speed 1× · sizes 20, 32, 64