Monsoon v0.2.0
Made by Alexandre Kohler Star

Media and files

Before and after compare

Two pictures (or any two elements) split by a divider that follows the pointer, a finger or the keyboard through a native range input, with optional labels. It needs monsoon.js. Without it a fixed half and half split shows.

Media and files8 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-compare on a .compare with .compare-before and .compare-after

Options

OptionDescription
data-m-compare-positionStarting position in percent, 50 by default (or the range value).
data-m-compare-orientationvertical splits top and bottom, like the compare-vertical class.
data-m-compare-hovertrue makes the divider follow a mouse without pressing.
data-m-compare-stepKeyboard step in percent.

Methods

MethodDescription
Monsoon.compare(el).set(percent)Moves the divider.
Monsoon.compare(el).positionCurrent position in percent.

Events

EventDescription
monsoon:comparedetail.position in percent.

Keyboard

Arrows, Page Up, Page Down, Home and End on the range input.

Classes

8 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the before and after compare. On a <div> in the example. Sets grid display, overflow, corner radius, background, ew-resize cursor and hidden by default, and --pos and --tone.
CSS
.compare[data-active] .compare-knob {
  scale: 1.1;
}

.compare:not([data-enhanced]) .compare-range {
  display: none;
}
Part Part of the before and after compare. On an <img> in the example. Sets grid tracks, width and height.
CSS
.compare-before, .compare-after {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
Part Part of the before and after compare. On an <img> in the example. Sets grid tracks, width and height.
CSS
.compare-after {
  clip-path: inset(0 0 0 var(--pos));
}

.compare-before, .compare-after {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
Part Part of the before and after compare. On an <input> in the example. Sets absolute position, width, height, overflow and opacity.
CSS
.compare-range {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.compare:not([data-enhanced]) .compare-range {
  display: none;
}
Modifier Modifier, combined with the compare class. Not used in the example above. Sets absolute position, offsets, stacking order, grid display, alignment and width.
CSS
.compare-handle {
  position: absolute;
  inset: 0 auto 0 var(--pos);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 0.125rem;
  translate: -50% 0;
  background: var(--color-neutral-50);
  box-shadow: 0 0 0.5rem oklch(0 0 0 / .35);
  pointer-events: none;
}

.compare-vertical .compare-handle {
  inset: var(--pos) 0 auto 0;
  width: auto;
  height: 0.125rem;
  translate: 0 -50%;
}
Modifier Modifier, combined with the compare class. Not used in the example above. Sets grid display, alignment, width, height, corner radius and background.
CSS
.compare-knob::before {
  content: "";
  width: 1.125rem;
  height: 0.625rem;
  background: currentColor;
  clip-path: polygon(0 50%, 30% 0, 30% 100%, 0 50%, 100% 50%, 70% 0, 70% 100%, 100% 50%);
}

.compare-knob {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-neutral-50);
  box-shadow: var(--m-shadow-md);
  color: var(--color-neutral-900);
  transition: scale var(--m-duration) var(--m-ease-spring);
}
Modifier Modifier, combined with the compare class. On a <span> in the example. Sets absolute position, offsets, stacking order, padding, corner radius and background.
CSS
.compare-label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.25rem 0.625rem;
  border-radius: var(--m-radius-full);
  background: oklch(0 0 0 / .5);
  color: var(--color-neutral-50);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
Modifier Modifier, combined with the compare class. On a <span> in the example. Sets offsets.
CSS
.compare-label-after {
  right: 0.75rem;
  left: auto;
}

.compare-vertical .compare-label-after {
  top: auto;
  right: auto;
  bottom: 0.75rem;
  left: 0.75rem;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Before and after compare: start from the base class, then add modifiers -->
<div class="compare aspect-video max-w-xl" data-m-compare><img class="compare-before" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='675'%20viewBox='0%200%201200%20675'%3E%3Cdefs%3E%3ClinearGradient%20id='s'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23cbd5e1'/%3E%3Cstop%20offset='1'%20stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='1200'%20height='675'%20fill='url(%23s)'/%3E%3Ccircle%20cx='840'%20cy='230'%20r='74.25'%20fill='%23f1f5f9'/%3E%3Cpath%20d='M0%20418.5L240%20283.5L456%20391.5L720%20243L1200%20445.5V675H0Z'%20fill='%2394a3b8'/%3E%3Cpath%20d='M0%20499.5L336%20378L624%20486L936%20405L1200%20513V675H0Z'%20fill='%2364748b'/%3E%3Crect%20y='567'%20width='1200'%20height='108'%20fill='%23475569'%20opacity='.85'/%3E%3C/svg%3E" alt="Before: the raw photo"><img class="compare-after" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='675'%20viewBox='0%200%201200%20675'%3E%3Cdefs%3E%3ClinearGradient%20id='s'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fdba74'/%3E%3Cstop%20offset='1'%20stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='1200'%20height='675'%20fill='url(%23s)'/%3E%3Ccircle%20cx='840'%20cy='230'%20r='74.25'%20fill='%23fff7d6'/%3E%3Cpath%20d='M0%20418.5L240%20283.5L456%20391.5L720%20243L1200%20445.5V675H0Z'%20fill='%237c3aed'/%3E%3Cpath%20d='M0%20499.5L336%20378L624%20486L936%20405L1200%20513V675H0Z'%20fill='%233b0764'/%3E%3Crect%20y='567'%20width='1200'%20height='108'%20fill='%231e1b4b'%20opacity='.85'/%3E%3C/svg%3E" alt="After: the color graded photo"><span class="compare-label">Before</span><span class="compare-label compare-label-after">After</span><input type="range" class="compare-range" min="0" max="100" value="50" aria-label="Before and after divider"></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Give meaningful images an alt text and decorative ones alt="". Initials avatars should expose the full name to screen readers.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Media and filesCompare verticalA top and bottom split. It needs monsoon.js.Media and filesMedia galleryA grid of thumbnails with selection (Shift click selects a range, Escape clears), select all, delete, drag or Alt and arrow keys to reorder, and the image viewer on click. It needs monsoon.js. Without it the links open the images and the checkboxes submit with the form.Media and filesMedia gallery masonryThe same gallery in balanced columns that keep each picture at its own height. It needs monsoon.js.Media and filesSignature padSmooth, speed and pressure aware strokes with pen colors and width, undo, clear, PNG and SVG export, and strokes that survive a resize; the result goes into a hidden input. A typed name field stays available for people who cannot draw. It needs monsoon.js. Without it only the typed name field shows.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.