Design Atlas
한국어
↝ Motion

Page curl

페이지 컬

A page corner lifting and curling like a real sheet of paper being peeled back, hinting the reverse side beneath it. E-book and magazine apps use it to signal "there's a next page."

Also known as: Corner peelCurl transition
···
html
<div class="book">
  <div class="lines"><i></i><i></i><i></i><i></i><i></i></div>
  <div class="corner" id="corner"></div>
</div>
css
.book{position:relative;width:min(72%,300px);aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.15);overflow:hidden}
.lines{position:absolute;inset:14% 12%;display:flex;flex-direction:column;gap:12%}
.lines i{height:6%;border-radius:3px;background:var(--line)}
.lines i:nth-child(3){width:70%}
.corner{position:absolute;right:0;bottom:0;width:0;height:0;
  background:linear-gradient(135deg, var(--surface) 42%, var(--bg) 43%, var(--muted) 46%, var(--bg) 50%, transparent 52%);
  clip-path:polygon(100% 0, 0 100%, 100% 100%);
  filter:drop-shadow(-3px -3px 6px rgba(0,0,0,.25));
  animation:curl 3.6s ease-in-out infinite}
@keyframes curl{
  0%,100%{width:0;height:0}
  45%{width:52%;height:52%}
  55%{width:52%;height:52%}
}

The illusion rests on two things: the folding triangular region with the "reverse side" color showing through, and a shadow along the crease. You clip a diagonal triangle from the corner (via clip-path or a separate layer), give it a color distinct from the front (the paper's back tone), and animate its size from zero up to the corner's diagonal length — that reads as the corner lifting and curling. Layering a gradient shadow (box-shadow or a linear-gradient) along the crease adds the sense of depth.

A true 3D curl — the page actually bending into a cylindrical surface — needs WebGL: the page is subdivided into a mesh and each vertex warped along a cylinder. CSS alone can't do that, but "triangle fold plus shadow" approximates the feel well enough that most e-book UIs use exactly this shortcut.

Overused, it invites the usual skeuomorphism complaint — the physical-object mimicry pulls more attention than the content itself. It's safest kept as a restrained corner hint, and only in reader apps where the page metaphor is actually meaningful.

When to use

Use it only where the "turning paper" metaphor actually fits the content — e-books, magazines. On ordinary web pagination it's excess decoration.