Before and after

BeforeAfter compares two images of the same frame: a 3 px ink divider with a 44 px handle splits them, and "Before" and "After" print on flat white plates in the top corners. The control is a native range laid over the whole frame, so a drag anywhere, the arrow keys and Home and End all move it, and vertical scrolling still works on phones.

Example#

Usage#

Use before and after for two images of the same frame where the difference is the story: a redesign, a speed fix, a cleaned-up layout. A divider splits the images; dragging anywhere, the arrow keys, Page Up and Down, Home and End all move it.

• Inputs. before and after are image elements with their own alt text; label names the comparison ("Fernlight homepage, before and after").
• The control is a native range over the frame, with a value text such as "40 % before", so keyboards and screen readers get the full control.
• Phones keep vertical scrolling: only sideways drags move the divider.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  BeforeAfter

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  BeforeAfter

  The site default. Art on its own plates, one display moment per view.

• Press

  BeforeAfter

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  BeforeAfter

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• beforeLabel and afterLabel stay "Before" and "After" unless dates say more: "March", "June".
• The caption says what changed and by how much, with the number.

Do and don't#

Accessibility#

• The range is named by label and says "40 % before" as its value.
• Both images keep their own alt text.
• The frame shows the focus ring while the range has focus; the handle turns to the selected face.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#