Back to the library
Toast — promise morph
Variant: Promise morph
One surface for both halves of an async story: a spinner toast that resolves in place, spinner and label swapping under 3px of blur while an olive tick draws on — the same object learning its outcome, which is the entire reason to morph instead of stacking a second toast on the first. The honest beat is the rail: absent for the whole pending phase, because a promise has no deadline and drawing one would claim a duration nobody knows, then fading in and draining linearly only once the outcome lands. The label swap is sequenced rather than symmetric — out in 160ms, in over 190ms starting 96ms later — so 'Uploading' and 'Uploaded' never share a frame at half opacity.
toaststatusloadingsuccessloop
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toast — promise morph</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — 6.4s: 2.6s pending, the resolve beat at 48%, 2.2s of dated
lifetime, out. The spinner runs its own 0.9s sub-clock. */
--cycle: 6.4s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.frame {
position: relative;
width: clamp(230px, 56vw, 320px);
height: min(64vh, 72vw, 210px);
border-radius: calc(12px * var(--round));
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--slate) 10%, transparent);
overflow: hidden;
}
.page {
position: absolute;
inset: 0;
padding: 16px;
display: grid;
gap: 10px;
align-content: start;
}
.bar {
height: 10px;
border-radius: 5px;
background: var(--oat);
}
.page .head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.page .dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--oat);
flex: none;
}
.slot {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
display: grid;
justify-items: center;
}
/* One surface for both states. The toast itself never moves at the
resolve — the same object learns its outcome, which is the entire
reason to morph instead of replacing one toast with another. */
.toast {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: 182px;
padding: 9px 12px 11px;
border-radius: calc(9px * var(--round));
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--slate) 12%, transparent);
box-shadow: 0 6px 18px color-mix(in srgb, var(--slate) 12%, transparent);
overflow: hidden;
opacity: 0;
transform: translateY(16px);
animation: toast var(--t) linear infinite;
}
.icon {
position: relative;
width: 16px;
height: 16px;
flex: none;
}
.icon > span {
position: absolute;
inset: 0;
}
.icon svg {
width: 100%;
height: 100%;
display: block;
}
.spin {
color: var(--clay);
animation: spin-out var(--t) infinite;
}
.spin svg {
animation: rev calc(0.9s / var(--speed)) linear infinite;
}
.spin .track {
stroke: color-mix(in srgb, var(--slate) 14%, transparent);
}
.mark {
color: var(--olive);
}
.mark path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: mark-draw var(--t) infinite;
}
.labels {
position: relative;
height: 14px;
flex: 1;
}
.labels span {
position: absolute;
left: 0;
top: 0;
font-size: 11.5px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
}
.lbl-pending {
animation: lbl-out var(--t) infinite;
}
.lbl-done {
opacity: 0;
animation: lbl-in var(--t) infinite;
}
/* No rail while pending — a promise has no deadline, and drawing one
would claim a duration nobody knows. The clock starts only once the
outcome has settled in. */
.rail {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
opacity: 0;
animation: rail-show var(--t) infinite;
}
.rail i {
position: absolute;
inset: 0;
background: var(--olive);
transform-origin: left center;
animation: rail-drain var(--t) linear infinite;
}
@keyframes toast {
0%,
4% {
opacity: 0;
transform: translateY(16px);
animation-timing-function: var(--ease-out);
}
8%,
88% {
opacity: 1;
transform: translateY(0);
animation-timing-function: var(--ease-out);
}
90.8%,
100% {
opacity: 0;
transform: translateY(10px);
}
}
@keyframes rev {
to {
transform: rotate(1turn);
}
}
/* The swap runs under 3px of blur, the library's trick for reading one
thing becoming another instead of two things overlapping. */
@keyframes spin-out {
0%,
48% {
opacity: 1;
filter: blur(0);
animation-timing-function: ease;
}
51%,
100% {
opacity: 0;
filter: blur(3px);
}
}
@keyframes mark-draw {
0%,
49% {
stroke-dashoffset: 100;
animation-timing-function: var(--ease-out);
}
53%,
100% {
stroke-dashoffset: 0;
}
}
/* Sequenced, not symmetric: out in 160ms, in over 190ms starting 96ms
later, so the two labels never sit at half opacity on the same frame. */
@keyframes lbl-out {
0%,
48% {
opacity: 1;
filter: blur(0);
animation-timing-function: ease;
}
50.5%,
100% {
opacity: 0;
filter: blur(3px);
}
}
@keyframes lbl-in {
0%,
49.5% {
opacity: 0;
filter: blur(3px);
animation-timing-function: ease;
}
52.5%,
100% {
opacity: 1;
filter: blur(0);
}
}
@keyframes rail-show {
0%,
52% {
opacity: 0;
animation-timing-function: ease;
}
53.5%,
100% {
opacity: 1;
}
}
@keyframes rail-drain {
0%,
53.5% {
transform: scaleX(1);
animation-timing-function: linear;
}
88%,
100% {
transform: scaleX(0);
}
}
@media (prefers-reduced-motion: reduce) {
/* Travel goes and the tick appears by fade rather than draw; the
spinner keeps turning — a frozen spinner reads as a hang — but
slows with everything else, and the rail keeps its drain, because
both are state, not flourish. */
.toast {
transform: translateY(0);
animation-name: toast-rm;
}
.spin svg {
animation-duration: calc(1.4s / var(--speed));
}
.mark path {
stroke-dashoffset: 0;
opacity: 0;
animation-name: mark-rm;
}
.toast,
.spin,
.mark path,
.lbl-pending,
.lbl-done,
.rail,
.rail i {
animation-duration: calc(var(--t) * 1.6);
}
@keyframes toast-rm {
0%,
4% {
opacity: 0;
animation-timing-function: ease;
}
8%,
88% {
opacity: 1;
animation-timing-function: ease;
}
90.8%,
100% {
opacity: 0;
}
}
@keyframes mark-rm {
0%,
49% {
opacity: 0;
animation-timing-function: ease;
}
53%,
100% {
opacity: 1;
}
}
}
</style>
</head>
<body>
<div
class="frame"
role="img"
aria-label="A pending toast with a spinner resolving in place into a success toast, whose lifetime bar then drains before it leaves"
>
<div class="page">
<div class="head">
<span class="dot"></span>
<span class="bar" style="width: 42%"></span>
</div>
<span class="bar" style="width: 88%"></span>
<span class="bar" style="width: 74%"></span>
<span class="bar" style="width: 81%"></span>
</div>
<div class="slot">
<div class="toast">
<span class="icon">
<span class="spin">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle class="track" cx="12" cy="12" r="9" stroke-width="2.4" />
<path
d="M12 3a9 9 0 0 1 9 9"
stroke="currentColor"
stroke-width="2.4"
stroke-linecap="round"
/>
</svg>
</span>
<span class="mark">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="m5 12.5 4.5 4.5L19 7.5"
pathLength="100"
stroke="currentColor"
stroke-width="2.6"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
</span>
<span class="labels">
<span class="lbl-pending">Uploading photo…</span>
<span class="lbl-done">Uploaded</span>
</span>
<span class="rail"><i></i></span>
</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.