Before / After

<div class="kodza-compare">
  <img class="kodza-compare__before" src="https://kodza.dev/media/kz-columns-1400.webp" alt="The columns in daylight" width="1120" height="1400" />
  <div class="kodza-compare__after"><img src="https://kodza.dev/media/kz-columns-dark-1400.webp" alt="The same columns in dark mode" width="1120" height="1400" /></div>
  <span class="kodza-compare__tag">Light</span>
  <span class="kodza-compare__tag kodza-compare__tag--after">Dark</span>
  <span class="kodza-compare__handle" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M9 7l-5 5 5 5M15 7l5 5-5 5" /></svg></span>
  <input class="kodza-compare__range" type="range" min="0" max="100" value="50" step="1" aria-label="How much of the dark version to show" />
</div>

/* Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license */
/* Kodza — Before / After
   Two pictures in one frame and a handle between them. Drag it (mouse or finger), click
   somewhere and it glides there, or use the arrow keys: a real range input is underneath.
   The first time it is seen, it nudges once to show it moves. The labels step aside when the
   handle comes close. Everything is tuned with the --kz-compare-* variables.
   Set the start with the input's value (0 to 100), the shape with --kz-compare-ratio. */
.kodza-compare {
  --kz-compare-line: #ffffff;
  --kz-compare-grip-bg: #ffffff;
  --kz-compare-grip-fg: #0a0a0a;
  --kz-compare-radius: 16px;
  --kz-compare-pos: 50%;

  position: relative;
  display: block;
  aspect-ratio: var(--kz-compare-ratio, 4 / 3);
  overflow: hidden;
  border-radius: var(--kz-compare-radius);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.kodza-compare img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.kodza-compare__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--kz-compare-pos));
}

/* The handle: a line across the picture and a round grip */
.kodza-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kz-compare-pos);
  width: 2px;
  margin-left: -1px;
  background: var(--kz-compare-line);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.kodza-compare__handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--kz-compare-grip-bg);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  fill: none;
  stroke: var(--kz-compare-grip-fg);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.kodza-compare.is-dragging .kodza-compare__handle svg {
  transform: translate(-50%, -50%) scale(0.9);
}

.kodza-compare:has(.kodza-compare__range:focus-visible) .kodza-compare__handle svg {
  outline: 2px solid var(--kz-compare-line);
  outline-offset: 3px;
}

/* The labels, which step aside when the handle comes close */
.kodza-compare__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #0a0a0a;
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.kodza-compare__tag--after {
  right: 14px;
  left: auto;
  background: rgba(10, 10, 10, 0.78);
  color: #ffffff;
}

.kodza-compare.is-near-start .kodza-compare__tag:not(.kodza-compare__tag--after) {
  opacity: 0;
  transform: translateX(-8px);
}

.kodza-compare.is-near-end .kodza-compare__tag--after {
  opacity: 0;
  transform: translateX(8px);
}

/* The range input: invisible, but there for the keyboard and screen readers */
.kodza-compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-compare__handle svg,
  .kodza-compare__tag {
    transition-duration: 0.01ms !important;
  }
}

/* kodza-guard 96c5cbd32914 — generated by Kodza, do not edit.
   Theme guard: keeps a site's own CSS (WordPress themes, Bootstrap, CSS resets…) off this
   component. :not(#_) is always true and weighs as much as an id, so these lines win over
   theme rules made of classes and tags. Customise the component through its --kz-* variables. */

/* What the browser gives, where the component sets it only in some states: at the lowest weight, so its own rules below put it back */

:where(.kodza-compare__handle svg:where(:not([class*="kodza-"]))):not(#_) {
  outline: revert;
  outline-offset: revert;
}

/* What the browser gives, on everything the component leaves to it */

.kodza-compare:not(#_),
.kodza-compare__after:not(#_),
.kodza-compare__tag:not(#_),
.kodza-compare__handle:not(#_) {
  box-sizing: revert;
}

.kodza-compare__before:not(#_),
.kodza-compare__after img:where(:not([class*="kodza-"])):not(#_) {
  border: revert;
  margin: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  position: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-compare__range:not(#_) {
  border: revert;
  padding: revert;
  border-radius: revert;
  outline: revert;
  text-decoration: revert;
  transition: revert;
  list-style: revert;
  box-sizing: revert;
  float: revert;
  background-color: revert;
  background-image: revert;
  box-shadow: revert;
  outline-offset: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
  white-space: revert;
  min-height: revert;
}

.kodza-compare__handle svg:where(:not([class*="kodza-"])):not(#_) {
  border: revert;
  margin: revert;
  text-decoration: revert;
  list-style: revert;
  float: revert;
  appearance: revert;
  max-width: revert;
  max-height: revert;
  color: revert;
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  font-style: revert;
  line-height: revert;
  letter-spacing: revert;
  text-transform: revert;
  text-underline-offset: revert;
  text-align: revert;
  text-indent: revert;
  text-shadow: revert;
  vertical-align: revert;
}

.kodza-compare__range:not(#_):where(:not([hidden])),
.kodza-compare__handle svg:where(:not([class*="kodza-"])):not(#_):where(:not([hidden])) {
  display: revert;
}

.kodza-compare__range:not(#_):where([hidden]),
.kodza-compare__handle svg:where(:not([class*="kodza-"])):not(#_):where([hidden]) {
  display: none;
}

/* The component's own rules, one step stronger: real buttons and fields, what it sets on tags themes style (links, lists, headings, images…), and the root width (a theme may narrow it, never widen it) */

.kodza-compare img:not(#_) {
  display: block;
}

.kodza-compare__handle svg:not(#_) {
  position: absolute;
  padding: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--kz-compare-grip-bg);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.kodza-compare:has(.kodza-compare__range:focus-visible) .kodza-compare__handle svg:not(#_) {
  outline: 2px solid var(--kz-compare-line);
  outline-offset: 3px;
}

.kodza-compare__range:not(#_) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .kodza-compare__handle svg:not(#_) {
    transition-duration: 0.01ms !important;
  }
}

// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Kodza — Before / After
// Moves the handle with the pointer (exactly under it while dragging, gliding there after a
// click), with the arrow keys through the range input, and nudges once when first seen.
// Positions are read in the frame's own pixels, so a scaled parent is fine.
(() => {
  const SELECTOR = '.kodza-compare';
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // One instance. Everything it starts is tied to `signal`, so kodza:destroy stops it all
  function mount(root, signal) {
    const range = root.querySelector('.kodza-compare__range');
    let pos = parseFloat(range?.value) || 50;
    let target = pos;
    let frame = 0;
    let dragging = false;

    const paint = () => {
      root.style.setProperty('--kz-compare-pos', `${pos}%`);
      root.classList.toggle('is-near-start', pos < 22);
      root.classList.toggle('is-near-end', pos > 78);
      if (range) range.value = Math.round(pos);
    };
    const glide = () => {
      if (signal.aborted) return;
      pos += (target - pos) * (dragging || reduceMotion ? 1 : 0.2);
      if (Math.abs(target - pos) < 0.05) pos = target;
      paint();
      frame = pos === target ? 0 : requestAnimationFrame(glide);
    };
    const go = (value) => {
      target = Math.min(100, Math.max(0, value));
      if (!frame) frame = requestAnimationFrame(glide);
    };
    const at = (event) => {
      const box = root.getBoundingClientRect();
      return ((event.clientX - box.left) / box.width) * 100;
    };

    root.addEventListener('pointerdown', (event) => {
      if (event.button !== 0) return;
      root.setPointerCapture(event.pointerId);
      root.classList.add('is-dragging');
      go(at(event));
    }, { signal });
    root.addEventListener('pointermove', (event) => {
      if (!root.hasPointerCapture(event.pointerId)) return;
      dragging = true;
      go(at(event));
    }, { signal });
    const release = () => {
      dragging = false;
      root.classList.remove('is-dragging');
    };
    root.addEventListener('pointerup', release, { signal });
    root.addEventListener('pointercancel', release, { signal });
    range?.addEventListener('input', () => go(parseFloat(range.value)), { signal });

    // The first time it is seen: a small nudge, to say it moves
    if (!reduceMotion && 'IntersectionObserver' in window) {
      const io = new IntersectionObserver(([entry]) => {
        if (!entry.isIntersecting) return;
        io.disconnect();
        const start = pos;
        [[start + 9, 450], [start - 6, 950], [start, 1400]].forEach(([value, delay]) => setTimeout(() => !dragging && go(value), delay));
      }, { threshold: 0.6 });
      io.observe(root);
      signal.addEventListener('abort', () => io.disconnect());
    }

    paint();
  }

  // Kodza lifecycle, the same in every component: `kodza:init` starts the instances inside
  // event.detail.root (the whole page by default), `kodza:destroy` stops them and puts their
  // markup back. For themes and apps that swap content without a page load.
  const instances = new WeakMap();
  const find = (scope = document) => [scope, ...scope.querySelectorAll(SELECTOR)].filter((el) => el.matches?.(SELECTOR));
  const init = (scope) => find(scope).forEach((root) => {
    if (root.classList.contains('is-ready')) return; // already running, maybe from another copy of this script
    const controller = new AbortController();
    instances.set(root, { controller, html: root.innerHTML, attrs: [...root.attributes].map((a) => [a.name, a.value]) });
    mount(root, controller.signal);
    root.classList.add('is-ready');
  });
  const destroy = (scope) => find(scope).forEach((root) => {
    const instance = instances.get(root);
    if (!instance) return;
    instances.delete(root);
    instance.controller.abort();
    [...root.attributes].forEach((a) => root.removeAttribute(a.name));
    instance.attrs.forEach(([name, value]) => root.setAttribute(name, value));
    root.innerHTML = instance.html;
  });
  document.addEventListener('kodza:init', (event) => init(event.detail?.root));
  document.addEventListener('kodza:destroy', (event) => destroy(event.detail?.root));
  init();
  // Loaded in <head>, the script runs before the markup exists: once more when it is parsed
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => init(), { once: true });
})();

'use client';
// Kodza — Before / After, for React. From https://kodza.dev/components/before-after/
// Kodza License: free to use, client work included. Not to resell or redistribute, ported or not: https://kodza.dev/docs/#print-license
// Next to this file: before-after.css and before-after.js, the component's CSS and JS from Kodza, as they are.
// Yours to edit: the markup is plain JSX below.
// The script changes this markup once React has rendered it (it adds layers, splits text, moves
// nodes), so React must not patch it afterwards. When a prop changes, the key gives React a fresh
// element: kodza:destroy stops the script on the old one, kodza:init starts it on the new one.
import { useRef, useEffect, type ComponentPropsWithoutRef, type ComponentRef, type CSSProperties } from 'react';
import './before-after.css';

export type BeforeAfterProps = Omit<ComponentPropsWithoutRef<'div'>, "children" | "vars"> & {
  /** Settings, as CSS variables on the root */
  vars?: {
    /** default: #ffffff */
    "--kz-compare-line"?: string | number;
    /** default: #ffffff */
    "--kz-compare-grip-bg"?: string | number;
    /** default: #0a0a0a */
    "--kz-compare-grip-fg"?: string | number;
    /** default: 16px */
    "--kz-compare-radius"?: string | number;
  };
  className?: string;
};

export function BeforeAfter({ vars, className, style, ...rest }: BeforeAfterProps) {
  const ref = useRef<ComponentRef<'div'>>(null);
  const classes = ["kodza-compare", className].filter(Boolean).join(' ');
  // Everything the markup is made of: when it changes, React gets a fresh element (see the top)
  const key = JSON.stringify([classes, vars, style, rest]);

  // Starts the script on this element once React has rendered it, stops it when it goes
  useEffect(() => {
    const root = ref.current;
    let live = true;
    // @ts-ignore: a plain script, no types to find
    import('./before-after.js').then(() => {
      if (live) document.dispatchEvent(new CustomEvent('kodza:init', { detail: { root } }));
    });
    return () => {
      live = false;
      document.dispatchEvent(new CustomEvent('kodza:destroy', { detail: { root } }));
    };
  }, [key]);

  return (
    <div key={key} {...rest} className={classes} style={{ ...vars, ...style } as CSSProperties} ref={ref}>
      <img className="kodza-compare__before" src="https://kodza.dev/media/kz-columns-1400.webp" alt="The columns in daylight" width="1120" height="1400" />
      <div className="kodza-compare__after">
        <img src="https://kodza.dev/media/kz-columns-dark-1400.webp" alt="The same columns in dark mode" width="1120" height="1400" />
      </div>
      <span className="kodza-compare__tag">Light</span>
      {' '}
      <span className="kodza-compare__tag kodza-compare__tag--after">Dark</span>
      {' '}
      <span className="kodza-compare__handle" aria-hidden="true">
        <svg viewBox="0 0 24 24">
          <path d="M9 7l-5 5 5 5M15 7l5 5-5 5" />
        </svg>
      </span>
      {' '}
      <input className="kodza-compare__range" type="range" min="0" max="100" defaultValue="50" step="1" aria-label="How much of the dark version to show" />
    </div>
  );
}