08Tự động trễ bằng sibling-index()

<main class="stage">
  <div class="tiles is-demo">
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
  </div>
</main>

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

$duration: $dur-quick;                             // 타일 하나가 나타나는 시간
$easing: $ease-out;                                // 시작 빠르고 끝은 부드럽게
$stagger: 100ms;                                   // 형제 순서 1당 시차

@include stage($stage-paper);

// sibling-index() 는 --i 변수도 nth-child 반복문도 없이 형제 순서를 직접 읽는다 (Chrome/Edge 138+)
.tiles {
  display: flex;
  gap: clamp(6px, 2vw, 10px);

  span {
    width: clamp(30px, 8vw, 40px);
    height: clamp(30px, 8vw, 40px);
    border-radius: $r-control;
    background: $subject-blue;
    animation: tile-loop $dur-loop $easing infinite;
    animation-delay: calc(sibling-index() * #{$stagger});
  }
}

@keyframes tile-loop {
  0%, 6%    { opacity: 0; transform: scale(.5); }
  22%, 68%  { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .tiles span { animation: none; opacity: 1; transform: none; }
}

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

.tiles {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
}
.tiles span {
  width: clamp(30px, 8vw, 40px);
  height: clamp(30px, 8vw, 40px);
  border-radius: 12px;
  background: #2f6df6;
  animation: tile-loop 2s ease-out infinite;
  animation-delay: calc(sibling-index() * 100ms);
}

@keyframes tile-loop {
  0%, 6% {
    opacity: 0;
    transform: scale(0.5);
  }
  22%, 68% {
    opacity: 1;
    transform: scale(1);
  }
  88%, 100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tiles span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

import styles from "./SiblingIndexTiles.module.scss";

export type SiblingIndexTilesProps = {
  /** 타일 개수 (기본 6) — --i 도 nth-child 도 없이 sibling-index() 가 형제 순서를 읽는다 */
  count?: number;
};

export default function SiblingIndexTiles({ count = 6 }: SiblingIndexTilesProps) {
  return (
    <div className={styles.tiles}>
      {Array.from({ length: count }, (_, i) => (
        <span key={i} />
      ))}
    </div>
  );
}