thisdesign.space

CSS · 320 ms

E-paper refresh flash

A 320ms full-screen invert that reads as a Kindle redrawing the page.

Real e-paper devices invert their entire frame when turning a page — it's how the controller resets pixel state. Reproducing that flash with a stepped opacity animation on a black overlay turns any page transition into something that feels like e-ink, not like the Web. Use sparingly and only on navigation; constant flashing reads as a glitch, not a medium.

byudaysinhudaysinh

Demo

Live demo

Loc. 142 of 412 · 8 min left

And the e-reader, having performed its small ritual of inversion, settled once more into stillness. Each turn of the page was the same three-frame flash — black, lighter, black, gone.

The demo runs the same CSS code shown below — replay to retrigger.

Code

Trigger by adding the class on chapter jump; remove after the animation ends.css

.refresh-flash {
  position: fixed; inset: 0;
  background: #1A1814;
  pointer-events: none;
  opacity: 0;
  animation: refresh 320ms steps(4, end) forwards;
}
@keyframes refresh {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

Optional: kill every other transition during the flash so nothing competes.css

.is-refreshing * { transition: none !important; animation: none !important; }

See it in use