01Click-to-reveal comparison slider

<main class="stage">
  <div class="ba is-demo" id="ba" role="img" aria-label="Click to move the divider there, comparing before and after">
    <div class="ba__after"></div>
    <div class="ba__before"></div>
    <div class="ba__line"></div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-blue;

@property --reveal {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@include stage($stage-ink);

.ba {
  position: relative;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
  cursor: pointer;
  --reveal: 50%;
}
.ba__after,
.ba__before {
  position: absolute;
  inset: 0;
}
.ba__after { background: linear-gradient(155deg, $color 0%, $subject-cream 100%); }
.ba__before {
  background: linear-gradient(155deg, $stage-ink 0%, $color 70%);
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
  transition: clip-path $duration $easing;
}
.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: $sp-1;
  transform: translateX(-50%);
  background: $subject-cream;
  transition: left $duration $easing;
}

.ba.is-demo .ba__before,
.ba.is-demo .ba__line { transition: none; }
.ba.is-demo { animation: reveal-loop $dur-loop $easing infinite; }

@keyframes reveal-loop {
  0%, 8%   { --reveal: 22%; }
  50%      { --reveal: 78%; }
  92%, 100% { --reveal: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .ba.is-demo { animation: none; --reveal: 50%; }
  .ba__before, .ba__line { transition: none; }
}

@property --reveal {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ba {
  position: relative;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  cursor: pointer;
  --reveal: 50%;
}

.ba__after,
.ba__before {
  position: absolute;
  inset: 0;
}

.ba__after {
  background: linear-gradient(155deg, #2f6df6 0%, #fff7e6 100%);
}

.ba__before {
  background: linear-gradient(155deg, #17141a 0%, #2f6df6 70%);
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
  transition: clip-path 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 4px;
  transform: translateX(-50%);
  background: #fff7e6;
  transition: left 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ba.is-demo .ba__before,
.ba.is-demo .ba__line {
  transition: none;
}

.ba.is-demo {
  animation: reveal-loop 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes reveal-loop {
  0%, 8% {
    --reveal: 22%;
  }
  50% {
    --reveal: 78%;
  }
  92%, 100% {
    --reveal: 22%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ba.is-demo {
    animation: none;
    --reveal: 50%;
  }
  .ba__before, .ba__line {
    transition: none;
  }
}

(function () {
  var el = document.getElementById("ba");
  function set(pct) {
    pct = Math.max(0, Math.min(100, pct));
    el.style.setProperty("--reveal", pct + "%");
  }
  el.addEventListener("click", function (e) {
    el.classList.remove("is-demo");
    var r = el.getBoundingClientRect();
    set(((e.clientX - r.left) / r.width) * 100);
  });
})();

import { useRef, useState, useCallback } from "react";
import type { CSSProperties, MouseEvent } from "react";
import styles from "./BeforeAfterClickReveal.module.scss";

export type BeforeAfterClickRevealProps = {
  duration?: string;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--reveal"?: string };

/**
 * 사진 아무 곳이나 클릭하면 그 x좌표로 경계선이 바로 옮겨간다.
 * clip-path 로 before 레이어를 잘라 after 위에 얹는다 — 드래그 없이 클릭 한 번.
 */
export default function BeforeAfterClickReveal({
  duration = "2s",
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: BeforeAfterClickRevealProps) {
  const ref = useRef<HTMLDivElement | null>(null);
  const [reveal, setReveal] = useState(50);
  const [demo, setDemo] = useState(true);

  const jump = useCallback((e: MouseEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const pct = ((e.clientX - r.left) / r.width) * 100;
    setDemo(false);
    setReveal(Math.max(0, Math.min(100, pct)));
  }, []);

  const vars: Vars = { "--reveal": `${reveal}%`, ["--duration" as string]: duration, ["--easing" as string]: easing, ["--color" as string]: color };

  return (
    <div
      ref={ref}
      className={demo ? `${styles.ba} ${styles.isDemo}` : styles.ba}
      style={vars}
      onClick={jump}
      role="img"
      aria-label="클릭하면 경계가 옮겨가는 전후 비교"
    >
      <div className={styles.after} />
      <div className={styles.before} />
      <div className={styles.line} />
    </div>
  );
}