---
category: Signature
---

**The signature element.** Browser chrome at `--r-frame` in `--machine-chrome` — three
traffic-light dots in the measured `--frame-dot-*` hues, the real address centered in
`--on-machine` — around a running interior on `--surface`, with `--shadow-frame`
under it. The window is concentric: `calc(var(--r-frame) - var(--frame-inset))`.

The interior must run — an iframe of the live product, or a self-narrating demo built
from `Machine`, `Caret` and `ThinkingDots`. A frozen screenshot inside this chrome is
the one thing the pack bans outright. Anchor an `Annotation` outside the frame's top
corner to say what the reader should notice.

```tsx
<DemoFrame url="https://datafa.st/codefa.st">
  <iframe src="/demo" title="Live demo" />
</DemoFrame>
```