09Quote that swaps lines on hover

<main class="stage">
  <figure class="qx is-demo" id="qx" aria-label="Quote that swaps on hover">
    <svg class="qx__mark" id="qx-mark" viewBox="0 0 256 256" width="20" height="20" fill="currentColor" aria-hidden="true"><g><path d="M108 72v72H40a8 8 0 0 1-8-8V72a8 8 0 0 1 8-8h60a8 8 0 0 1 8 8m108-8h-60a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h68V72a8 8 0 0 0-8-8" opacity=".2"/><path d="M100 56H40a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16m0 80H40V72h60Zm116-80h-60a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-8-16m0 80h-60V72h60Z"/></g></svg>
    <div class="qx__swap" aria-live="polite">
      <p class="qx__line is-on" aria-hidden="false">Code is written to be read.</p>
      <p class="qx__line" aria-hidden="true">Screens should respect the people waiting.</p>
      <p class="qx__line" aria-hidden="true">Numbers keep their digits steady.</p>
    </div>
    <figcaption class="qx__foot">
      <span class="qx__dots" aria-hidden="true">
        <span class="qx__dot is-on"></span>
        <span class="qx__dot"></span>
        <span class="qx__dot"></span>
      </span>
      <button class="qx__next" id="qx-next" type="button">Next quote</button>
    </figcaption>
  </figure>
</main>

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

// 랜딩 히어로 아래 도는 문구 — 세 인용을 같은 칸에 겹쳐 두고(grid-area 1/1) 한 번에 하나만 보이게 한다.
// 격자 미리보기 루프는 steps(1, end) 컷으로 세 문장을 2초에 세 번 바꾼다(33%·67% 지점).
// 실사용은 hover 와 버튼이 JS 로 is-on 을 옮긴다 — 크로스페이드가 아니라 짧은 오퍼시티 전환.
$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-ink;

@include stage($stage-ink);

.qx {
  box-sizing: border-box;
  width: min(300px, 92vw);
  margin: 0;
  padding: $sp-4 $sp-5;
  border-radius: $r-card;
  background: $subject-cream;
  color: $subject-ink;
  display: grid;
  gap: $sp-3;
  font-family: inherit;
}
.qx * { box-sizing: border-box; }

.qx__mark { color: $subject-blue; }

.qx__swap {
  display: grid;
  min-height: 48px;
}
// 세 문장을 한 칸에 겹친다 — 높이는 제일 긴 문장이 결정한다
.qx__line {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: $subject-ink;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 140ms;
}
.qx__line.is-on { opacity: 1; }

.qx__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $sp-3;
}
.qx__dots {
  display: flex;
  gap: $sp-2;
}
.qx__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(23, 20, 26, .25);
  transition-property: transform, background-color;
  transition-duration: 140ms;
}
.qx__dot.is-on {
  background: $subject-ink;
  transform: scale(1.15);
}
.qx__next {
  border: 0;
  border-radius: $r-pill;
  padding: $sp-2 $sp-4;
  background: $subject-ink;
  color: $subject-cream;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.qx__next:focus-visible {
  outline: 2px solid $subject-blue;
  outline-offset: 2px;
}

// 실사용: 교체를 알리는 따옴표 튕김(240ms 한 번)
.qx__mark.is-bump {
  animation-name: qxBumpOnce;
  animation-duration: 240ms;
  animation-timing-function: $easing;
  animation-iteration-count: 1;
}
@keyframes qxBumpOnce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

// ── 미리보기 루프(정적 규칙 먼저, 그 위에 덧씌움) ─────────────────
.qx.is-demo .qx__line {
  transition: none;
}
.qx.is-demo .qx__line { animation-timing-function: steps(1, end); animation-duration: $duration; animation-iteration-count: infinite; }
.qx.is-demo .qx__line:nth-child(1) { animation-name: qxLine1; }
.qx.is-demo .qx__line:nth-child(2) { animation-name: qxLine2; }
.qx.is-demo .qx__line:nth-child(3) { animation-name: qxLine3; }
.qx.is-demo .qx__dot { animation-timing-function: steps(1, end); animation-duration: $duration; animation-iteration-count: infinite; }
.qx.is-demo .qx__dot:nth-child(1) { animation-name: qxDot1; }
.qx.is-demo .qx__dot:nth-child(2) { animation-name: qxDot2; }
.qx.is-demo .qx__dot:nth-child(3) { animation-name: qxDot3; }
.qx.is-demo .qx__mark {
  animation-name: qxMarkLoop;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
}

// 세 문장 — 33%·67% 정각에 동시 교체(중간 반투명 프레임도, 한 프레임 빈 칸도 없다)
@keyframes qxLine1 {
  0%        { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes qxLine2 {
  0%        { opacity: 0; }
  33%       { opacity: 1; }
  67%, 100% { opacity: 0; }
}
@keyframes qxLine3 {
  0%, 66%   { opacity: 0; }
  67%, 100% { opacity: 1; }
}
// 점 표시 — 문장과 같은 지점에 컷(크기와 색을 함께 바꾼다 — 색을 안 넣으면 어두운 점이 그대로 남는다)
@keyframes qxDot1 {
  0%        { transform: scale(1.15); background-color: rgba(23, 20, 26, 1); }
  33%, 100% { transform: scale(1);    background-color: rgba(23, 20, 26, .25); }
}
@keyframes qxDot2 {
  0%, 33%   { transform: scale(1);    background-color: rgba(23, 20, 26, .25); }
  33.01%    { transform: scale(1.15); background-color: rgba(23, 20, 26, 1); }
  67%, 100% { transform: scale(1);    background-color: rgba(23, 20, 26, .25); }
}
@keyframes qxDot3 {
  0%, 66%   { transform: scale(1);    background-color: rgba(23, 20, 26, .25); }
  67%, 100% { transform: scale(1.15); background-color: rgba(23, 20, 26, 1); }
}
// 따옴표 — 컷 직후마다 짧게 튄다(컷만 있으면 움직인 프레임이 모자란다 — 252 함정)
@keyframes qxMarkLoop {
  0%        { transform: translateY(0); }
  3%        { transform: translateY(-5px); }
  7%, 34%   { transform: translateY(0); }
  37%       { transform: translateY(-5px); }
  41%, 68%  { transform: translateY(0); }
  71%       { transform: translateY(-5px); }
  75%, 100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .qx.is-demo .qx__line,
  .qx.is-demo .qx__dot,
  .qx.is-demo .qx__mark {
    animation: none !important;
  }
  .qx__line, .qx__dot { transition: none !important; }
}

@media (max-width: 340px) {
  .qx { padding: $sp-3 $sp-4; }
  .qx__line { font-size: 13px; }
  .qx__swap { min-height: 44px; }
}

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);
}

.qx {
  box-sizing: border-box;
  width: min(300px, 92vw);
  margin: 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: #fff7e6;
  color: #17141a;
  display: grid;
  gap: 12px;
  font-family: inherit;
}

.qx * {
  box-sizing: border-box;
}

.qx__mark {
  color: #2f6df6;
}

.qx__swap {
  display: grid;
  min-height: 48px;
}

.qx__line {
  grid-area: 1/1;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: #17141a;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 140ms;
}

.qx__line.is-on {
  opacity: 1;
}

.qx__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qx__dots {
  display: flex;
  gap: 8px;
}

.qx__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(23, 20, 26, 0.25);
  transition-property: transform, background-color;
  transition-duration: 140ms;
}

.qx__dot.is-on {
  background: #17141a;
  transform: scale(1.15);
}

.qx__next {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: #17141a;
  color: #fff7e6;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.qx__next:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.qx__mark.is-bump {
  animation-name: qxBumpOnce;
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: 1;
}

@keyframes qxBumpOnce {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
.qx.is-demo .qx__line {
  transition: none;
}

.qx.is-demo .qx__line {
  animation-timing-function: steps(1, end);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.qx.is-demo .qx__line:nth-child(1) {
  animation-name: qxLine1;
}

.qx.is-demo .qx__line:nth-child(2) {
  animation-name: qxLine2;
}

.qx.is-demo .qx__line:nth-child(3) {
  animation-name: qxLine3;
}

.qx.is-demo .qx__dot {
  animation-timing-function: steps(1, end);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.qx.is-demo .qx__dot:nth-child(1) {
  animation-name: qxDot1;
}

.qx.is-demo .qx__dot:nth-child(2) {
  animation-name: qxDot2;
}

.qx.is-demo .qx__dot:nth-child(3) {
  animation-name: qxDot3;
}

.qx.is-demo .qx__mark {
  animation-name: qxMarkLoop;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes qxLine1 {
  0% {
    opacity: 1;
  }
  33%, 100% {
    opacity: 0;
  }
}
@keyframes qxLine2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  67%, 100% {
    opacity: 0;
  }
}
@keyframes qxLine3 {
  0%, 66% {
    opacity: 0;
  }
  67%, 100% {
    opacity: 1;
  }
}
@keyframes qxDot1 {
  0% {
    transform: scale(1.15);
    background-color: rgb(23, 20, 26);
  }
  33%, 100% {
    transform: scale(1);
    background-color: rgba(23, 20, 26, 0.25);
  }
}
@keyframes qxDot2 {
  0%, 33% {
    transform: scale(1);
    background-color: rgba(23, 20, 26, 0.25);
  }
  33.01% {
    transform: scale(1.15);
    background-color: rgb(23, 20, 26);
  }
  67%, 100% {
    transform: scale(1);
    background-color: rgba(23, 20, 26, 0.25);
  }
}
@keyframes qxDot3 {
  0%, 66% {
    transform: scale(1);
    background-color: rgba(23, 20, 26, 0.25);
  }
  67%, 100% {
    transform: scale(1.15);
    background-color: rgb(23, 20, 26);
  }
}
@keyframes qxMarkLoop {
  0% {
    transform: translateY(0);
  }
  3% {
    transform: translateY(-5px);
  }
  7%, 34% {
    transform: translateY(0);
  }
  37% {
    transform: translateY(-5px);
  }
  41%, 68% {
    transform: translateY(0);
  }
  71% {
    transform: translateY(-5px);
  }
  75%, 100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qx.is-demo .qx__line,
  .qx.is-demo .qx__dot,
  .qx.is-demo .qx__mark {
    animation: none !important;
  }
  .qx__line, .qx__dot {
    transition: none !important;
  }
}
@media (max-width: 340px) {
  .qx {
    padding: 12px 16px;
  }
  .qx__line {
    font-size: 13px;
  }
  .qx__swap {
    min-height: 44px;
  }
}

// 손을 얹거나(hover) 버튼을 누르면 다음 인용으로 바뀐다 — 격자 루프의 steps 컷과 달리
// 실사용에서는 is-on 클래스가 움직이는 문장을 결정하고, 따옴표가 짧게 튀어 교체를 알린다.
var qxRoot = document.getElementById('qx');
var qxLines = qxRoot.querySelectorAll('.qx__line');
var qxDots = qxRoot.querySelectorAll('.qx__dot');
var qxMark = document.getElementById('qx-mark');
var qxIndex = 0;

function qxDraw() {
  for (var i = 0; i < qxLines.length; i++) {
    qxLines[i].classList.toggle('is-on', i === qxIndex);
    qxLines[i].setAttribute('aria-hidden', i === qxIndex ? 'false' : 'true');
    qxDots[i].classList.toggle('is-on', i === qxIndex);
  }
  qxMark.classList.remove('is-bump');
  void qxMark.offsetWidth; // 리플로우를 한 번 걸어 튕김 애니메이션을 다시 시작하게 한다
  qxMark.classList.add('is-bump');
}
function qxGo() {
  qxIndex = (qxIndex + 1) % qxLines.length;
  qxDraw();
}
// 카드에 손을 얹으면 격자 루프(.is-demo)를 뗀다 — 이때부터 클래스가 곧 상태다
qxRoot.addEventListener('mouseenter', function () {
  qxRoot.classList.remove('is-demo');
  qxGo();
});
// 버튼은 키보드 경로다 — 마우스 클릭(event.detail > 0)은 진입(hover)에서 이미 한 번
// 진행됐으므로 무시한다. 두 번 건너뛰는 것을 막는다.
document.getElementById('qx-next').addEventListener('click', function (event) {
  if (event.detail > 0) return;
  qxGo();
});

// QuoteHoverSwap — vanilla 판(run/282/demo/09-quote-hover-swap) 의 React 포트.
import { useState } from "react";
import type { CSSProperties, MouseEvent as ReactMouseEvent } from "react";
import styles from "./QuoteHoverSwap.module.scss";

export type QuoteLine = { id: string; text: string };

export type QuoteHoverSwapProps = {
  lines?: QuoteLine[];
  nextLabel?: string;
  groupLabel?: string;
  /** 격자 미리보기용 2초 자동 루프. 사람이 손대면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };

const DEFAULT_LINES: QuoteLine[] = [
  { id: "read", text: "코드는 읽히기 위해 쓴다." },
  { id: "wait", text: "화면은 기다리는 사람을 배려한다." },
  { id: "digits", text: "숫자는 자릿수를 지킨다." },
];

function QuotesMark({ bump }: { bump: boolean }) {
  const cls = [styles.mark, bump ? styles.isBump : ""].filter(Boolean).join(" ");
  return (
    <svg className={cls} viewBox="0 0 256 256" width="20" height="20" fill="currentColor" aria-hidden="true"><g><path d="M108 72v72H40a8 8 0 0 1-8-8V72a8 8 0 0 1 8-8h60a8 8 0 0 1 8 8m108-8h-60a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h68V72a8 8 0 0 0-8-8" opacity=".2"/><path d="M100 56H40a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-16-16m0 80H40V72h60Zm116-80h-60a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h60v8a32 32 0 0 1-32 32a8 8 0 0 0 0 16a48.05 48.05 0 0 0 48-48V72a16 16 0 0 0-8-16m0 80h-60V72h60Z"/></g></svg>
  );
}

export default function QuoteHoverSwap({
  lines = DEFAULT_LINES,
  nextLabel = "다음 인용",
  groupLabel = "손을 얹으면 바뀌는 인용구",
  demo = true,
  duration = 2000,
  easing = "cubic-bezier(.2, .8, .2, 1)",
  color = "#2f6df6",
}: QuoteHoverSwapProps) {
  const [live, setLive] = useState(demo);
  const [index, setIndex] = useState(0);
  const [bump, setBump] = useState(false);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  // 다음 인용으로 — 교체를 알리는 따옴표 튕김을 한 번 되돌렸다 켠다
  function applyNext(next: number) {
    setIndex(next);
    setBump(false);
    setTimeout(() => setBump(true), 0);
  }
  function goNext() {
    applyNext((index + 1) % lines.length);
  }
  // 카드에 손을 얹으면 격자 루프를 뗀다 — 이때부터 상태가 곧 화면이다
  function onEnter() {
    setLive(false);
    applyNext((index + 1) % lines.length);
  }
  // 버튼은 키보드 경로다 — 마우스 클릭(detail > 0)은 진입(hover)에서 이미 한 번
  // 진행됐으므로 무시한다. 두 번 건너뛰는 것을 막는다.
  function onNextClick(event: ReactMouseEvent<HTMLButtonElement>) {
    if (event.detail > 0) return;
    goNext();
  }

  const cls = [styles.qx, live ? styles.isDemo : ""].filter(Boolean).join(" ");
  return (
    <figure className={cls} style={vars} aria-label={groupLabel} onMouseEnter={onEnter}>
      <QuotesMark bump={bump} />
      <div className={styles.swap} aria-live="polite">
        {lines.map((line, i) => (
          <p
            key={line.id}
            className={[styles.line, i === index ? styles.isOn : ""].filter(Boolean).join(" ")}
            aria-hidden={i === index ? "false" : "true"}
          >
            {line.text}
          </p>
        ))}
      </div>
      <figcaption className={styles.foot}>
        <span className={styles.dots} aria-hidden="true">
          {lines.map((line, i) => (
            <span key={line.id} className={[styles.dot, i === index ? styles.isOn : ""].filter(Boolean).join(" ")}></span>
          ))}
        </span>
        <button className={styles.next} type="button" onClick={onNextClick}>{nextLabel}</button>
      </figcaption>
    </figure>
  );
}