06BEFORE・AFTERラベルバッジ

<main class="stage">
  <div class="ba is-demo" id="ba">
    <div class="ba__after"></div>
    <div class="ba__before"></div>
    <span class="ba__badge ba__badge--before">BEFORE</span>
    <span class="ba__badge ba__badge--after">AFTER</span>
    <div class="ba__handle"><span class="ba__grip"></span></div>
  </div>
</main>

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

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

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

@include stage($stage-yellow);

.ba {
  position: relative;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
  touch-action: none;
  cursor: ew-resize;
  font: 700 12px/1 system-ui, sans-serif;
  --reveal: 50%;
  --reveal-num: 0.5;
}
.ba__after,
.ba__before {
  position: absolute;
  inset: 0;
}
.ba__after { background: linear-gradient(155deg, $subject-cream 0%, $color 100%); }
.ba__before {
  background: linear-gradient(155deg, $color 0%, $subject-cream 65%);
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}
.ba__badge {
  position: absolute;
  top: $sp-3;
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  background: $stage-yellow;
  color: $color;
  letter-spacing: .04em;
}
// 뱃지는 통째로 페이드된다 — opacity 가 옐로 면과 잉크 글자에 함께 걸려 둘의 차이까지 같이 옅어진다.
// 0~1 전 구간을 쓰면 손잡이가 가운데(.5)일 때 2.44~2.90:1 이라, 알파 하한을 .72 로 둔다 (그 지점에서도 8.6:1 이상)
.ba__badge--before { left: $sp-3; opacity: calc(.72 + .28 * var(--reveal-num)); }
.ba__badge--after { right: $sp-3; opacity: calc(1 - .28 * var(--reveal-num)); }
.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: $sp-1;
  transform: translateX(-50%);
  background: $stage-yellow;
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $sp-8;
  height: $sp-8;
  border-radius: $r-pill;
  background: $stage-yellow;
  transform: translate(-50%, -50%);
  box-shadow: $shadow-press;
}

.ba.is-demo { animation: reveal-loop $dur-loop $easing infinite; }

@keyframes reveal-loop {
  0%, 8%   { --reveal: 20%; --reveal-num: 0.2; }
  50%      { --reveal: 80%; --reveal-num: 0.8; }
  92%, 100% { --reveal: 20%; --reveal-num: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .ba.is-demo { animation: none; --reveal: 50%; --reveal-num: 0.5; }
}

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

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  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);
  touch-action: none;
  cursor: ew-resize;
  font: 700 12px/1 system-ui, sans-serif;
  --reveal: 50%;
  --reveal-num: 0.5;
}

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

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

.ba__before {
  background: linear-gradient(155deg, #17141a 0%, #fff7e6 65%);
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

.ba__badge {
  position: absolute;
  top: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffd23f;
  color: #17141a;
  letter-spacing: 0.04em;
}

.ba__badge--before {
  left: 12px;
  opacity: calc(0.72 + 0.28 * var(--reveal-num));
}

.ba__badge--after {
  right: 12px;
  opacity: calc(1 - 0.28 * var(--reveal-num));
}

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 4px;
  transform: translateX(-50%);
  background: #ffd23f;
}

.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffd23f;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}

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

@keyframes reveal-loop {
  0%, 8% {
    --reveal: 20%;
    --reveal-num: 0.2;
  }
  50% {
    --reveal: 80%;
    --reveal-num: 0.8;
  }
  92%, 100% {
    --reveal: 20%;
    --reveal-num: 0.2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ba.is-demo {
    animation: none;
    --reveal: 50%;
    --reveal-num: 0.5;
  }
}

(function () {
  var el = document.getElementById("ba");
  var dragging = false;
  function set(pct) {
    pct = Math.max(0, Math.min(100, pct));
    el.style.setProperty("--reveal", pct + "%");
    el.style.setProperty("--reveal-num", (pct / 100).toFixed(3));
  }
  function fromX(x) {
    var r = el.getBoundingClientRect();
    return ((x - r.left) / r.width) * 100;
  }
  el.addEventListener("pointerdown", function (e) {
    el.classList.remove("is-demo");
    dragging = true;
    el.setPointerCapture(e.pointerId);
    set(fromX(e.clientX));
  });
  el.addEventListener("pointermove", function (e) { if (dragging) set(fromX(e.clientX)); });
  el.addEventListener("pointerup", function () { dragging = false; });
})();

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

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

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

/** BEFORE·AFTER 알약 배지가 경계선 위치에 맞춰 opacity 로 옅어지고 짙어진다. */
export default function BeforeAfterLabels({
  duration = "2s",
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#17141a",
}: BeforeAfterLabelsProps) {
  const ref = useRef<HTMLDivElement | null>(null);
  const [reveal, setReveal] = useState(50);
  const [demo, setDemo] = useState(true);
  const dragging = useRef(false);

  const setFromX = useCallback((x: number) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setReveal(Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100)));
  }, []);

  const onDown = useCallback((e: PointerEvent<HTMLDivElement>) => {
    setDemo(false);
    dragging.current = true;
    (e.currentTarget as HTMLDivElement).setPointerCapture(e.pointerId);
    setFromX(e.clientX);
  }, [setFromX]);
  const onMove = useCallback((e: PointerEvent<HTMLDivElement>) => { if (dragging.current) setFromX(e.clientX); }, [setFromX]);
  const onUp = useCallback(() => { dragging.current = false; }, []);

  const vars: Vars = {
    "--reveal": `${reveal}%`,
    "--revealNum": (reveal / 100).toFixed(3),
    ["--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}
      onPointerDown={onDown}
      onPointerMove={onMove}
      onPointerUp={onUp}
    >
      <div className={styles.after} />
      <div className={styles.before} />
      <span className={`${styles.badge} ${styles.badgeBefore}`}>BEFORE</span>
      <span className={`${styles.badge} ${styles.badgeAfter}`}>AFTER</span>
      <div className={styles.handle}>
        <span className={styles.grip} />
      </div>
    </div>
  );
}