09Reduced motion — killing shimmer and stagger for a list that appears instantly

<main class="stage">
<div class="rm" id="rm">
  <div class="rm__row">
    <input class="rm__input" type="text" value="peach" readonly aria-label="Search fruit" aria-expanded="false" id="rmInput" role="combobox" aria-owns="rmList" aria-haspopup="listbox">
    <button class="rm__switch" type="button" role="switch" aria-checked="false" id="rmSwitch" aria-label="Reduce motion">
      <span class="rm__knob"></span>
    </button>
  </div>
  <ul class="rm__list" id="rmList" role="listbox" aria-label="Suggestion list"></ul>
</div>
</main>

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

$duration: $dur-base;
$easing: $ease-out;
$color: $subject-blue-light;

@include stage($stage-ink);

.rm {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: $sp-2;
}

.rm__row {
  display: flex;
  align-items: center;
  gap: $sp-2;
  background: $subject-cream;
  border-radius: $r-control;
  padding: $sp-1 $sp-1 $sp-1 $sp-3;
  box-shadow: $shadow-press;
}

.rm__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: 500;
  font-size: 13px;
  color: $subject-ink;
}

.rm__switch {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border: 0;
  border-radius: $r-pill;
  background: rgba($subject-ink, .24);
  padding: $sp-1;
  cursor: pointer;
  transition: background-color $duration $easing;
}

.rm__knob {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: $subject-cream;
  transform: translateX(0);
  transition: transform $duration $easing;
}

.is-reduced .rm__switch {
  background: $color;
}

.is-reduced .rm__knob {
  transform: translateX(14px);
}

.rm__list {
  margin: 0;
  padding: $sp-1;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: $sp-1;
  background: $subject-cream;
  border-radius: $r-card;
  box-shadow: $shadow-press;
  min-height: 40px;
}

.rm__item {
  padding: $sp-1 $sp-2;
  border-radius: $r-sm;
  font-weight: 500;
  font-size: 12px;
  color: $subject-ink;
  background: $color;
  opacity: 0;
  transform: translateY(16px);
  transition-property: opacity, transform, background-color;
  transition-duration: $duration;
  transition-timing-function: $easing;
  transition-delay: var(--delay, 0ms);
}

.is-open .rm__item {
  opacity: 1;
  transform: translateY(0);
  background: $subject-cream;
}

.is-reduced .rm__item {
  transition-duration: $dur-instant;
}

@media (max-width: 340px) {
  .rm { max-width: 240px; }
  .rm__input { font-size: 12px; }
  .rm__list { max-height: 116px; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rm__item {
    transition: none !important;
  }
}

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

.rm {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm__row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff7e6;
  border-radius: 12px;
  padding: 4px 4px 4px 12px;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}

.rm__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: 500;
  font-size: 13px;
  color: #17141a;
}

.rm__switch {
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.24);
  padding: 4px;
  cursor: pointer;
  transition: background-color 300ms ease-out;
}

.rm__knob {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff7e6;
  transform: translateX(0);
  transition: transform 300ms ease-out;
}

.is-reduced .rm__switch {
  background: #5b8cf8;
}

.is-reduced .rm__knob {
  transform: translateX(14px);
}

.rm__list {
  margin: 0;
  padding: 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff7e6;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  min-height: 40px;
}

.rm__item {
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 12px;
  color: #17141a;
  background: #5b8cf8;
  opacity: 0;
  transform: translateY(16px);
  transition-property: opacity, transform, background-color;
  transition-duration: 300ms;
  transition-timing-function: ease-out;
  transition-delay: var(--delay, 0ms);
}

.is-open .rm__item {
  opacity: 1;
  transform: translateY(0);
  background: #fff7e6;
}

.is-reduced .rm__item {
  transition-duration: 140ms;
}

@media (max-width: 340px) {
  .rm {
    max-width: 240px;
  }
  .rm__input {
    font-size: 12px;
  }
  .rm__list {
    max-height: 116px;
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rm__item {
    transition: none !important;
  }
}

// 리듀스 모션(09) — 항목마다 등장 지연을 index * step 으로 계산해 순서대로 뜨는
// 스태거를 만들고, prefers-reduced-motion(matchMedia 실제 감지) 이거나 스위치가
// 켜지면 step 을 0 으로 눌러 같은 목록이 지연 없이 한 번에 뜬다 — 기능은 그대로,
// 모션만 사라진다. 디바운스 대기 시간(요청 절약) 은 모션과 무관하므로 건드리지 않는다.
(function () {
  var root = document.getElementById('rm');
  var input = document.getElementById('rmInput');
  var list = document.getElementById('rmList');
  var switchBtn = document.getElementById('rmSwitch');
  if (!root || !input || !list || !switchBtn) return;

  var WORDS = ['peach', 'strawberry', 'mango', 'grapefruit', 'cherry'];
  var STEP_MS = 50;

  var systemReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var reduced = systemReduced;

  function setSwitch(on) {
    reduced = on;
    switchBtn.setAttribute('aria-checked', on ? 'true' : 'false');
    root.classList.toggle('is-reduced', on);
  }
  setSwitch(reduced);

  function close() {
    input.setAttribute('aria-expanded', 'false');
    list.innerHTML = '';
  }

  function open() {
    var step = reduced ? 0 : STEP_MS;
    list.innerHTML = WORDS.map(function (w, i) {
      return '<li class="rm__item" role="option" style="--delay:' + (i * step) + 'ms">' + w + '</li>';
    }).join('');
    input.setAttribute('aria-expanded', 'true');
    requestAnimationFrame(function () {
      requestAnimationFrame(function () {
        list.classList.add('is-open');
      });
    });
  }

  function reopen() {
    list.classList.remove('is-open');
    close();
    requestAnimationFrame(function () { open(); });
  }

  open();
  list.classList.add('is-open');

  var playing = true;
  function stop() { playing = false; }
  switchBtn.addEventListener('click', function () {
    stop();
    setSwitch(!reduced);
    reopen();
  });
  root.addEventListener('pointerdown', function (e) {
    if (e.target !== switchBtn && !switchBtn.contains(e.target)) stop();
  });

  if (!systemReduced && playing) {
    setInterval(function () {
      if (!playing) return;
      setSwitch(!reduced);
      reopen();
    }, 500);
  }
})();

// SearchAutocompleteReducedMotionStatic — vanilla 판(run/335/demo/09-search-autocomplete-reduced-motion-static/index.html)
// 의 React 포트. 항목마다 등장 지연을 index * step 으로 계산해 순서대로 뜨는 스태거를
// 만들고, prefers-reduced-motion(matchMedia 실제 감지) 이거나 스위치가 켜지면 step 을
// 0 으로 눌러 같은 목록이 지연 없이 한 번에 뜬다 — 기능은 그대로, 모션만 사라진다.
import { useEffect, useRef } from "react";
import styles from "./SearchAutocompleteReducedMotionStatic.module.scss";

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

const ARIA_LABEL = "과일 검색";
const SWITCH_LABEL = "모션 줄이기";
const LIST_LABEL = "제안 목록";

const WORDS = ["복숭아", "딸기", "망고", "자몽", "체리"];
const STEP_MS = 50;

export default function SearchAutocompleteReducedMotionStatic({
  duration = "300ms",
  easing = "ease-out",
  color = "#5b8cf8"
}: SearchAutocompleteReducedMotionStaticProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const listRef = useRef<HTMLUListElement | null>(null);
  const switchRef = useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    const root = rootRef.current;
    const input = inputRef.current;
    const list = listRef.current;
    const switchBtn = switchRef.current;
    if (!root || !input || !list || !switchBtn) return;

    const systemReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let reduced = systemReduced;

    function setSwitch(on: boolean): void {
      reduced = on;
      switchBtn!.setAttribute("aria-checked", on ? "true" : "false");
      root!.classList.toggle(styles.isReduced, on);
    }
    setSwitch(reduced);

    function close(): void {
      input!.setAttribute("aria-expanded", "false");
      list!.innerHTML = "";
    }

    function open(): void {
      const step = reduced ? 0 : STEP_MS;
      list!.innerHTML = WORDS.map(
        (w, i) => '<li class="' + styles.item + '" role="option" style="--delay:' + i * step + 'ms">' + w + "</li>"
      ).join("");
      input!.setAttribute("aria-expanded", "true");
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          list!.classList.add(styles.isOpen);
        });
      });
    }

    function reopen(): void {
      list!.classList.remove(styles.isOpen);
      close();
      requestAnimationFrame(() => {
        open();
      });
    }

    open();
    list.classList.add(styles.isOpen);

    let playing = true;
    function stop(): void {
      playing = false;
    }
    function onSwitchClick(): void {
      stop();
      setSwitch(!reduced);
      reopen();
    }
    function onPointerDown(e: PointerEvent): void {
      const target = e.target as Node;
      if (target !== switchBtn && !switchBtn!.contains(target)) stop();
    }
    switchBtn.addEventListener("click", onSwitchClick);
    root.addEventListener("pointerdown", onPointerDown);

    let interval = 0;
    if (!systemReduced) {
      interval = window.setInterval(() => {
        if (!playing) return;
        setSwitch(!reduced);
        reopen();
      }, 500);
    }

    return () => {
      playing = false;
      window.clearInterval(interval);
      switchBtn.removeEventListener("click", onSwitchClick);
      root.removeEventListener("pointerdown", onPointerDown);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.rm} ref={rootRef}>
        <div className={styles.row}>
          <input
            className={styles.input}
            ref={inputRef}
            type="text"
            defaultValue="복숭아"
            readOnly
            aria-label={ARIA_LABEL}
            aria-expanded="false"
            role="combobox"
            aria-owns="rm09ListReact"
            aria-haspopup="listbox"
            style={{ caretColor: color, transitionDuration: duration, transitionTimingFunction: easing }}
          />
          <button className={styles.switch} ref={switchRef} type="button" role="switch" aria-checked="false" aria-label={SWITCH_LABEL}>
            <span className={styles.knob} />
          </button>
        </div>
        <ul className={styles.list} id="rm09ListReact" ref={listRef} role="listbox" aria-label={LIST_LABEL} />
      </div>
    </main>
  );
}