Emerging

Synthetic media disclosure

Layered disclosure on generated media: visible mark, embedded watermark, signed metadata.

MAsset libraryoctober-newsletter-hero.png Made by Milky

AI-generated

Send it somewhere:

Disclosure layers

1

Visible label

“AI-generated” in the corner. Anyone can see it.

Present
2

Invisible watermark

Spread through every pixel. Survives crops, resizing and screenshots.

Detected
3

Signed metadata

Milky Image 2 · 14 Sep 2026 · signed by Milky. Full history, but fragile.

Intact

Intake check on upload

AI-generatedConfirmed by all 3 layers

Try it: Crop the image for a banner, then screenshot and re-upload it. The corner label and the metadata get lost on the way, but the watermark underneath still identifies it as AI-generated.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

ElevenLabs Audio Detector result for an uploaded WAV: 'Watermark found', with provider ElevenLabs, model Eleven Sound Effects v2, creation date and a unique ID — ElevenLabs
ElevenLabs embeds a watermark in the audio it generates. Its detector reads the watermark back to show the provider, model, creation time and a unique ID.
Source: ElevenLabs docs ↗

When to use

Image, video and voice generation, especially anything depicting real people or events.

Seen in

SynthID in Google output, OpenAI image metadata, voice-clone consent notices.

For engineers

Provenance is rich but fragile, watermarks sparse but durable — ship both, verify at intake.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Synthetic media disclosure" pattern: `SyntheticMediaBadge`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
Layered disclosure on generated media: visible mark, embedded watermark, signed metadata.

Use it when: Image, video and voice generation, especially anything depicting real people or events.

## What to build
A disclosure overlay for generated images, video or audio that shows all three layers (visible label, signed metadata and embedded watermark) and which ones survived the file's journey. Opening it explains what each layer confirms. It renders on the media in viewers, upload previews and moderation tools.

### Props
- `media`: { kind: "image" | "video" | "audio"; description: string }, what the asset is.
- `layers`: { visibleLabel: "present" | "missing"; metadata: { status: "intact" | "stripped" | "invalid"; generator?: string; createdAt?: Date; edits?: string[] }; watermark: { status: "detected" | "not-detected" | "not-checked"; provider?: string; confidence?: "high" | "medium" | "low" } }, verification results from the intake check.
- `depictsRealPerson?`: boolean, raises emphasis on the disclosure.
- `placement`: "overlay" | "below", where the visible label renders; use "below" for audio.
- `open`: boolean and `onOpenChange(open)`.
- `onShowWatermark?()`: reveal where the watermark sits, if the detector supports it. The component never embeds or detects anything itself.

### States it must render
- All layers intact: a visible "AI-generated" label; the panel says "Confirmed by all 3 layers" with generator and date.
- Label lost (cropped): the panel notes "Visible label missing" while metadata and watermark still confirm.
- Metadata stripped (re-encoded or screenshotted): "Metadata removed"; the watermark alone confirms, with its confidence.
- Only watermark, low confidence: "Possibly AI-generated" with the confidence stated, not a definitive claim.
- No signal: "No AI signals found", with a note that this does not prove the media is authentic.

### Interactions
- Clicking the label opens the panel; the overall verdict is re-rendered as a visible label even when the original corner mark was lost.
- Each layer row expands to show what it records (generator, edits, provider).
- "Show where the watermark is" calls `onShowWatermark`.

### Edge cases
- Layers disagree (metadata says edited, watermark not detected): list both results; never pick one silently.
- Audio: the visible label renders as text by the player and is read before playback controls.
- Media depicting a real person: the label is always shown, never collapsed to an icon.
- Watermark "not-checked": say so, rather than implying it was absent.

## Must avoid
Relying on a corner watermark that a crop removes, with no durable signal underneath.

## Engineering constraint
Provenance is rich but fragile, watermarks sparse but durable — ship both, verify at intake.

## Accessibility
- The verdict is part of the media's accessible description, e.g. "AI-generated image, confirmed by watermark".
- Layer rows use text status ("present", "missing") alongside icons.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for identifiers

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a viewer tell AI involvement without reading documentation?
Does the label survive export, copy and re-upload?
Is the acting agent distinguishable from the human it acts for?
Does disclosure meet the jurisdictions you ship to?