04Focus that keeps only the paragraph you are reading sharp

<main class="stage">
  <section class="rf is-demo" id="rf" aria-label="Reading-paragraph focus">
    <header class="rf__head">
      <p class="rf__title">Terms of service</p>
      <p class="rf__state" id="rf-state">Now: paragraph 1</p>
    </header>
    <div class="rf__body">
      <div class="rf__rail" aria-hidden="true"><span class="rf__dot" id="rf-dot"></span></div>
      <div class="rf__view" id="rf-view" tabindex="0" role="region" aria-label="Terms body">
        <div class="rf__pad">
          <p class="rf__p">The first paragraph explains what the service is. It dims as it passes and sharpens in the middle.</p>
          <p class="rf__p">The second paragraph covers accounts and signing up.</p>
          <p class="rf__p">The third paragraph is where the rules you follow while using it are written.</p>
          <p class="rf__p">The fourth paragraph carries guidance on refunds and withdrawal.</p>
          <p class="rf__p">The last paragraph ends with contact details and a note that you can always come back.</p>
        </div>
      </div>
    </div>
  </section>
</main>

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

// 지금 읽는 문단만 또렷해지는 초점 — aria-current 문단은 진하게, 나머지는 opacity 로 물러난다
$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue-deep;

@include stage($stage-paper);

.rf {
  box-sizing: border-box;
  width: min(312px, 92vw);
  border-radius: $r-card;
  background: #f4f4f6;
  color: $subject-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  border: 1px solid rgba(23, 20, 26, .08);
}

.rf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: $sp-2;
  padding: $sp-2 $sp-3 0;
}
.rf__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.rf__state {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: $color;
  font-weight: 700;
}

.rf__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: $sp-2;
  padding: $sp-2 $sp-3 $sp-3;
}

// 왼쪽 레일 — 점이 내려가며 지금 문단을 가리킨다
.rf__rail {
  position: relative;
  width: 8px;
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .08);
}
.rf__dot {
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: $color;
  // 정적 경로 — JS 가 문단 인덱스 × 20px 로 translateY 한다
  transition: transform $dur-quick $ease-spring;
}

.rf__view {
  box-sizing: border-box;
  height: 148px;
  overflow-y: auto;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
  &:focus-visible { outline: 2px solid $color; outline-offset: 2px; }
}
.rf__pad {
  display: grid;
  gap: $sp-3;
  padding: 0 $sp-1 64px;
}
.rf__p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: $subject-ink;
  // 정적(실제 사용) 경로 — .is-cur 문단만 진하게
  opacity: .35;
  transition: opacity $dur-quick $easing;
}
.rf__p.is-cur,
.rf__p[aria-current="true"] {
  opacity: 1;
  font-weight: 700;
}

// ── 격자 미리보기 루프 — 초점이 문단에서 문단으로 흘러 내려간다 ──
@keyframes rf-focus {
  0% { opacity: .35; }
  6% { opacity: 1; }
  14% { opacity: 1; }
  20%, 100% { opacity: .35; }
}
// 문단 다섯 개가 0.4s 간격으로 위 키프레임을 돈다 (2s 루프의 다섯 조각)
.rf.is-demo .rf__p:nth-child(1) { animation-name: rf-focus; animation-duration: $duration; animation-timing-function: $easing; animation-iteration-count: infinite; animation-delay: 0s;    animation-fill-mode: backwards; }
.rf.is-demo .rf__p:nth-child(2) { animation-name: rf-focus; animation-duration: $duration; animation-timing-function: $easing; animation-iteration-count: infinite; animation-delay: .4s;  animation-fill-mode: backwards; }
.rf.is-demo .rf__p:nth-child(3) { animation-name: rf-focus; animation-duration: $duration; animation-timing-function: $easing; animation-iteration-count: infinite; animation-delay: .8s;  animation-fill-mode: backwards; }
.rf.is-demo .rf__p:nth-child(4) { animation-name: rf-focus; animation-duration: $duration; animation-timing-function: $easing; animation-iteration-count: infinite; animation-delay: 1.2s; animation-fill-mode: backwards; }
.rf.is-demo .rf__p:nth-child(5) { animation-name: rf-focus; animation-duration: $duration; animation-timing-function: $easing; animation-iteration-count: infinite; animation-delay: 1.6s; animation-fill-mode: backwards; }

// 점은 같은 박자로 다섯 칸을 지나간다 (0·20·40·60·80px) — 루프 끝에 첫 칸으로 되돌아온다
@keyframes rf-dot-move {
  0%, 8% { transform: translateY(0); }
  28% { transform: translateY(20px); }
  48% { transform: translateY(40px); }
  68% { transform: translateY(60px); }
  88%, 90% { transform: translateY(80px); }
  98%, 100% { transform: translateY(0); }
}
.rf.is-demo .rf__dot {
  animation-name: rf-dot-move;
  animation-duration: $duration;
  animation-timing-function: $ease-spring;
  animation-iteration-count: infinite;
}

@keyframes rf-say {
  0%, 27% { opacity: 1; }
  28%, 47% { opacity: .4; }
  48%, 67% { opacity: 1; }
  68%, 87% { opacity: .4; }
  88%, 100% { opacity: 1; }
}
.rf.is-demo .rf__state {
  animation-name: rf-say;
  animation-duration: $duration;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@media (max-width: 340px) {
  .rf__view { height: 124px; }
  .rf__p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rf.is-demo .rf__p,
  .rf.is-demo .rf__dot,
  .rf.is-demo .rf__state { animation: none !important; transform: none !important; }
  // 정지 상태에서도 초점의 뜻은 보인다 — 3번 문단만 진하게
  .rf.is-demo .rf__p:nth-child(3) { opacity: 1 !important; font-weight: 700; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

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

.rf {
  box-sizing: border-box;
  width: min(312px, 92vw);
  border-radius: 16px;
  background: #f4f4f6;
  color: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  border: 1px solid rgba(23, 20, 26, 0.08);
}

.rf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 0;
}

.rf__title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.rf__state {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: #0a4fe8;
  font-weight: 700;
}

.rf__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 8px 12px 12px;
}

.rf__rail {
  position: relative;
  width: 8px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.08);
}

.rf__dot {
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0a4fe8;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rf__view {
  box-sizing: border-box;
  height: 148px;
  overflow-y: auto;
  scrollbar-width: none;
}
.rf__view::-webkit-scrollbar {
  display: none;
}
.rf__view:focus-visible {
  outline: 2px solid #0a4fe8;
  outline-offset: 2px;
}

.rf__pad {
  display: grid;
  gap: 12px;
  padding: 0 4px 64px;
}

.rf__p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #17141a;
  opacity: 0.35;
  transition: opacity 220ms ease-out;
}

.rf__p.is-cur,
.rf__p[aria-current=true] {
  opacity: 1;
  font-weight: 700;
}

@keyframes rf-focus {
  0% {
    opacity: 0.35;
  }
  6% {
    opacity: 1;
  }
  14% {
    opacity: 1;
  }
  20%, 100% {
    opacity: 0.35;
  }
}
.rf.is-demo .rf__p:nth-child(1) {
  animation-name: rf-focus;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-fill-mode: backwards;
}

.rf.is-demo .rf__p:nth-child(2) {
  animation-name: rf-focus;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0.4s;
  animation-fill-mode: backwards;
}

.rf.is-demo .rf__p:nth-child(3) {
  animation-name: rf-focus;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 0.8s;
  animation-fill-mode: backwards;
}

.rf.is-demo .rf__p:nth-child(4) {
  animation-name: rf-focus;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.2s;
  animation-fill-mode: backwards;
}

.rf.is-demo .rf__p:nth-child(5) {
  animation-name: rf-focus;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-delay: 1.6s;
  animation-fill-mode: backwards;
}

@keyframes rf-dot-move {
  0%, 8% {
    transform: translateY(0);
  }
  28% {
    transform: translateY(20px);
  }
  48% {
    transform: translateY(40px);
  }
  68% {
    transform: translateY(60px);
  }
  88%, 90% {
    transform: translateY(80px);
  }
  98%, 100% {
    transform: translateY(0);
  }
}
.rf.is-demo .rf__dot {
  animation-name: rf-dot-move;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes rf-say {
  0%, 27% {
    opacity: 1;
  }
  28%, 47% {
    opacity: 0.4;
  }
  48%, 67% {
    opacity: 1;
  }
  68%, 87% {
    opacity: 0.4;
  }
  88%, 100% {
    opacity: 1;
  }
}
.rf.is-demo .rf__state {
  animation-name: rf-say;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@media (max-width: 340px) {
  .rf__view {
    height: 124px;
  }
  .rf__p {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rf.is-demo .rf__p,
  .rf.is-demo .rf__dot,
  .rf.is-demo .rf__state {
    animation: none !important;
    transform: none !important;
  }
  .rf.is-demo .rf__p:nth-child(3) {
    opacity: 1 !important;
    font-weight: 700;
  }
}

// 지금 읽는 문단만 또렷해지는 초점 — IntersectionObserver 가 가운데 띠를 지나는 문단 하나만 고른다
var rf = document.getElementById('rf');
var view = document.getElementById('rf-view');
var dot = document.getElementById('rf-dot');
var state = document.getElementById('rf-state');
var ps = Array.prototype.slice.call(document.querySelectorAll('.rf__p'));
var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) {
    if (!e.isIntersecting) return;
    var i = ps.indexOf(e.target);
    ps.forEach(function (p, j) {
      p.classList.toggle('is-cur', i === j);
      if (i === j) p.setAttribute('aria-current', 'true'); else p.removeAttribute('aria-current');
    });
    dot.style.transform = 'translateY(' + (i * 20) + 'px)';
    state.textContent = 'Now: paragraph ' + (i + 1);
  });
}, { root: view, rootMargin: '-45% 0px -45% 0px', threshold: 0 });
ps.forEach(function (p) { io.observe(p); });
// 격자 루프는 사람이 손댄 순간에만 끝난다 — IO 는 페이지 열자마자도 뛰므로 여기서 끄지 않는다
['wheel', 'pointerdown', 'touchstart', 'keydown'].forEach(function (ev) {
  view.addEventListener(ev, function () { rf.classList.remove('is-demo'); }, { passive: true, once: true });
});

import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ReadFocusParagraph.module.scss";

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

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
// ambient 가 얇아 DOM 요소 타입을 못 쓴다 — 필요한 꼴만 로컬 타입으로 선언
type ScrollBox = { scrollTop: number; clientHeight: number };
type ParaBox = { offsetTop: number; offsetHeight: number };

const DEFAULT_PARAGRAPHS = [
  "첫 문단은 서비스가 무엇인지 설명합니다. 지나치면 흐려지고 가운데 오면 또렷해져요.",
  "두 번째 문단은 계정과 회원가입에 관한 이야기를 담습니다.",
  "세 번째 문단은 이용 중 지켜야 할 규칙을 적는 자리입니다.",
  "네 번째 문단은 환불과 철회에 관한 안내를 담습니다.",
  "마지막 문단은 문의처와 언제든 되돌아올 수 있다는 말로 끝나요.",
];

export default function ReadFocusParagraph({
  title = "서비스 이용약관",
  stateFormat = "지금: 문단 {n}",
  paragraphs = DEFAULT_PARAGRAPHS,
  groupLabel = "읽는 문단 초점",
  bodyLabel = "약관 본문",
  demo = true,
  duration = 2000,
  easing = "ease-out",
  color = "#2f6df6",
}: ReadFocusParagraphProps) {
  const [current, setCurrent] = useState(0);
  const [live, setLive] = useState(demo);
  const viewRef = useRef<ScrollBox>(null);
  const paraRefs = useRef<(ParaBox | null)[]>([]);

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  // 가운데 띠(-45% ~ -45%)를 지나는 문단 하나만 고른다.
  // 로컬 타입(ScrollBox·ParaBox)과 DOM 의 Element 는 겹치지 않으므로 관측기에 넘길 때만 unknown 을 거쳐 단언한다
  useEffect(() => {
    const view = viewRef.current;
    if (!view) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (!e.isIntersecting) return;
          const list = paraRefs.current || [];
          const i = list.indexOf(e.target as unknown as ParaBox);
          if (i >= 0) setCurrent(i);
        });
      },
      { root: view as unknown as Element, rootMargin: "-45% 0px -45% 0px", threshold: 0 }
    );
    (paraRefs.current || []).forEach((p) => { if (p) io.observe(p as unknown as Element); });
    return () => io.disconnect();
  }, []);

  function touch() {
    setLive(false);
  }

  const cls = [styles.rf, live ? styles.isDemo : ""].filter(Boolean).join(" ");

  return (
    <section className={cls} style={vars} aria-label={groupLabel}>
      <header className={styles.head}>
        <p className={styles.rtitle}>{title}</p>
        <p className={styles.state}>{stateFormat.replace("{n}", String(current + 1))}</p>
      </header>
      <div className={styles.body}>
        <div className={styles.rail} aria-hidden="true">
          <span className={styles.dot} style={{ transform: `translateY(${current * 20}px)` }}></span>
        </div>
        <div
          className={styles.view}
          ref={viewRef}
          tabIndex={0}
          role="region"
          aria-label={bodyLabel}
          onWheel={touch}
          onPointerDown={touch}
          onTouchStart={touch}
          onKeyDown={touch}
        >
          <div className={styles.pad}>
            {paragraphs.map((p, i) => (
              <p
                key={p}
                ref={(el: ParaBox | null) => { if (paraRefs.current) paraRefs.current[i] = el; }}
                className={`${styles.p} ${styles["p" + (i + 1)]} ${i === current ? styles.cur : ""}`}
                aria-current={i === current ? "true" : undefined}
              >
                {p}
              </p>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}