Guardrail Notice
A declined request settles in under the prompt, an amber edge draws down it, and the way forward follows.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Guardrail Notice
*
* A declined request explaining itself: the card settles in under the
* prompt, an amber edge draws down its left side, and the reason and the
* way forward arrive a beat apart.About this pattern
The moment an assistant says no. Done badly it borrows the vocabulary of a crash — red, a shake, a card slamming into place — and the reader reads punishment where the product meant policy. Here the notice settles up a few pixels with a high-damping spring, an amber edge draws down its left side to mark it as a state rather than a failure, and the reason and the way forward arrive a beat apart so the sentence is read before the button is seen. Amber, not red: nothing broke, the request simply cannot be answered as asked.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A declined request answered in-thread with the reason and a suggested way to proceed.
Related patterns
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.
- AI Thinking PulseA calm breathing dot with a soft expanding ring — the app is thinking, not stuck.
- Diff Suggestion HighlightChanged lines wash in their green and red tints one after another, then the accept bar rises beneath them.