Back to the library
Overlay — sheet rise
Variant: Sheet rise
A bottom sheet on the iOS drawer curve: fast off the mark, long settle, 392ms up and 280ms back down. It travels by its own height — translateY(105%), not a pixel count — so the choreography survives whatever content it carries. The rows land 56ms apart after the surface stops, because reading order should follow arrival order; they leave with the sheet, since a staggered exit would be a second performance.
overlaytransitiongesture
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>Overlay — sheet rise</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 — every duration in the document runs off --t. */
--cycle: 5.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
/* The iOS drawer curve: fast off the mark, long settle. A sheet is
the one overlay that behaves like a physical object, so it gets
the physical curve. */
--ease-accent: cubic-bezier(0.32, 0.72, 0, 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(220px, 46vw, 340px);
height: min(68vh, 74vw, 230px);
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(--clay);
flex: none;
}
.scrim {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--slate) 34%, transparent);
opacity: 0;
animation: scrim var(--t) linear infinite;
}
@keyframes scrim {
0%,
7.5% {
opacity: 0;
animation-timing-function: ease;
}
13%,
55.5% {
opacity: 1;
animation-timing-function: ease;
}
60.5%,
100% {
opacity: 0;
}
}
/* The sheet travels by its own height — translateY(105%), not a pixel
count — so the choreography survives any content. 392ms up on the
drawer curve, 280ms back down: the exit is quicker because closing
is the system responding, not the user deciding. */
.sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
background: var(--ivory);
border-radius: calc(12px * var(--round)) calc(12px * var(--round)) 0 0;
box-shadow: 0 -10px 28px color-mix(in srgb, var(--slate) 14%, transparent);
padding: 8px 14px 12px;
display: grid;
gap: 8px;
align-content: start;
transform: translateY(105%);
animation: sheet var(--t) linear infinite;
}
@keyframes sheet {
0%,
8% {
transform: translateY(105%);
animation-timing-function: var(--ease-accent);
}
15%,
55% {
transform: translateY(0);
animation-timing-function: var(--ease-accent);
}
60%,
100% {
transform: translateY(105%);
}
}
.grabber {
width: 32px;
height: 4px;
border-radius: 2px;
background: var(--oat);
justify-self: center;
}
.sheet .title {
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
margin-top: 2px;
}
.sheet .row {
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
}
.sheet .row .swatch {
width: 16px;
height: 16px;
border-radius: calc(5px * var(--round));
background: var(--oat);
flex: none;
}
.sheet .row .bar {
height: 8px;
}
/* Rows land 56ms apart, after the surface has arrived — reading order
follows arrival order. They ride the sheet out, so only the entrance
is staggered; a staggered exit would be a second performance. */
.sheet .row:nth-child(3) {
animation: row-a var(--t) linear infinite;
}
.sheet .row:nth-child(4) {
animation: row-b var(--t) linear infinite;
}
.sheet .row:nth-child(5) {
animation: row-c var(--t) linear infinite;
}
@keyframes row-a {
0%,
13% {
opacity: 0;
transform: translateY(4px);
animation-timing-function: var(--ease-out);
}
17%,
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes row-b {
0%,
14% {
opacity: 0;
transform: translateY(4px);
animation-timing-function: var(--ease-out);
}
18%,
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes row-c {
0%,
15% {
opacity: 0;
transform: translateY(4px);
animation-timing-function: var(--ease-out);
}
19%,
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
/* The sheet stops travelling and crossfades in place; the stagger
collapses into the surface fade. */
.sheet {
transform: translateY(0);
animation: sheet-rm var(--t) linear infinite;
}
.sheet .row:nth-child(3),
.sheet .row:nth-child(4),
.sheet .row:nth-child(5) {
animation: none;
opacity: 1;
transform: none;
}
@keyframes sheet-rm {
0%,
8% {
opacity: 0;
animation-timing-function: ease;
}
14%,
55.5% {
opacity: 1;
animation-timing-function: ease;
}
60%,
100% {
opacity: 0;
}
}
}
</style>
</head>
<body>
<div
class="frame"
role="img"
aria-label="A bottom sheet sliding up over a page and sliding away again"
>
<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>
<span class="bar" style="width: 56%"></span>
</div>
<div class="scrim"></div>
<div class="sheet">
<div class="grabber"></div>
<span class="title">Filters</span>
<div class="row">
<span class="swatch"></span>
<span class="bar" style="width: 62%"></span>
</div>
<div class="row">
<span class="swatch"></span>
<span class="bar" style="width: 48%"></span>
</div>
<div class="row">
<span class="swatch"></span>
<span class="bar" style="width: 55%"></span>
</div>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.