Frame & flow
Rendered
plan
Plan
Resolving jurisdiction defaults and proposing a formation packet.
execute
Execute
Filing charter with DE Secretary of State…
respond
Respond
Entity `ent_a7f3` registered. Certificate attached.
Phase tone
Every dynamic card carries a phase: plan (model is deciding), execute (model is acting), respond (model has answered). The frame tints the surface accordingly.
| Phase | Tone | Token |
|---|---|---|
plan | lavender | --phase-plan-bg |
execute | amber | --phase-execute-bg |
respond | sage | --phase-respond-bg |
Anatomy
import { CK } from "@matter/components";
<CK.Frame phase="execute">
<CK.Header>Send invitation</CK.Header>
<CK.Body>{/* primitives */}</CK.Body>
<CK.Footer>{/* affordances */}</CK.Footer>
</CK.Frame>Motion
Phase transitions use --motion-base (220 ms) with the --ease-standard curve. Stream-in uses --motion-deliberate (480 ms) — slow enough that the user reads each chunk as it arrives.
Under prefers-reduced-motion: reduce, transitions collapse to opacity.
Author against
CK.Frame — phase tone + motion come free.Don't fork the frame to add a one-off phase. Propose a new primitive instead.