Component

CoilCertification

It adds one actual perimeter loop at a time around the child. Each loop changes the chamber and the final coil gives the notice a visible seal that says nothing about its contents.

Possible use

It could let a reviewer wind one loop around a handoff note per glance, or let a presenter certify an agenda label by physically enclosing it before a slide advances. Both uses mistake enclosure for evidence.

Reasonable alternative

A reasonable local alternative is the notice with one status badge when certification matters. Adding four geometric loops turns a binary decision into a ceremony with no new information.

01 / Preview

Try it yourself.

Ready for another review

The notice is still uncoiled.

Mechanism

1: Wind one actual loop around the notice.
2: Watch each loop tighten the geometric perimeter.
3: Uncoil the certification when four loops feel excessive.

02 / Usage

Put it somewhere.

example.tsxTSX

import { CoilCertification } from "gra-ui";
import "gra-ui/styles.css";

export function CoiledNotice() {
  return <CoilCertification><span>Ready for another review</span></CoilCertification>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice enclosed by the progressively growing coil.