Moderation blur gatePro

A filtered generation blurred past recognition, with the reason, the policy and what you can do: show anyway, confirm age, or request a review.

Markdown

On this page

ProA filtered result with the reason, the policy, show anyway and a review request.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/moderation-blur-gate

Usage

tsx

import { ModerationBlurGate } from "@/components/ui/chatcn/pro/moderation-blur-gate"

<ModerationBlurGate
  src={image.url}
  alt={image.prompt}
  reason="Graphic injury"
  policy="age-gate"
  policyHref="/policy#violence"
  onAppeal={() => api.requestReview(image.id)}
/>

The blur is presentation, not protection: anyone can read src from the page. For results your policy blocks, do not send the image at all. Leave out src and the gate shows a neutral fill.

Examples

Policies

ProAge gate, blocked with no image, and small thumbnails in a grid.

Props

Prop	Type	Notes
`src`, `alt`, `children`		The image, or your own media
`reason`, `detail`	`string`	Plain words for what the filter found
`policy`	`"reveal" \| "age-gate" \| "blocked"`	Default `reveal`
`policyHref`, `policyLabel`	`string`
`revealed`, `defaultRevealed`, `onRevealedChange`	`boolean`
`onAppeal`	`() => void \| Promise<void>`	Sending, sent and error states from the promise
`aspectRatio`, `blur`		Default 1 and 32 px

Keyboard

Key	Action
`Tab`	Show, request review, then the policy link
`Enter` on Show image	Opens the age check with focus on the confirm button
After revealing	Focus moves to Hide image; hiding returns it to Show

Accessibility

While hidden the image has no alt and the group is labelled by the notice, so a screen reader hears the reason, not the content.
Review results use role="status" and errors role="alert", each saying what to do next.
Thumbnails under 240 px keep the shield and one Show button; the full notice needs room.

Motion

Reveal clears the blur and scrim together in 280 ms; hiding takes 210 ms. Reduced motion uses a 150 ms crossfade with no blur ramp.