Reactで、スクロールして見えた要素をふわっと表示する方法

import { useEffect, useRef, useState } from 'react';

type Options = { rootMargin?: string; threshold?: number };

// 要素が画面に入ったら true にする。一度 true になったら、見張るのをやめる
export function useReveal<T extends Element>({
  rootMargin = '0px 0px -10% 0px',
  threshold = 0,
}: Options = {}) {
  const ref = useRef<T>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin, threshold },
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [rootMargin, threshold]);

  return [ref, visible] as const;
}

.reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.6s ease-out, translate 0.6s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

import type { CSSProperties, ReactNode } from 'react';
import { useReveal } from './useReveal';

type Props = {
  children: ReactNode;
  delay?: number; // 表示を始めるまでの遅れ（ミリ秒）
  rootMargin?: string;
  id?: string;
};

export function Reveal({ children, delay = 0, rootMargin, id }: Props) {
  const [ref, visible] = useReveal<HTMLDivElement>({ rootMargin });
  return (
    <div
      ref={ref}
      id={id}
      className={visible ? 'reveal is-visible' : 'reveal'}
      style={{ '--reveal-delay': `${delay}ms` } as CSSProperties}
    >
      {children}
    </div>
  );
}

<Reveal>
  <Card title="カード2" />
</Reveal>

読み込んで 50ミリ秒後（カード1は最初から画面の中） → c1: is-visible あり / opacity 0.05 / translate 0px 22.8845px  |  c2: is-visible なし / opacity 0.00 / translate 0px 24px
さらに 700ミリ秒後 → c1: is-visible あり / opacity 1.00 / translate 0px  |  c2: is-visible なし / opacity 0.00 / translate 0px 24px

カード2の上端を画面の高さの95%の位置へ → c2: is-visible なし / opacity 0.00 / translate 0px 24px
カード2の上端を85%の位置へ（100ミリ秒後） → c2: is-visible あり / opacity 0.22 / translate 0px 18.7325px
　　　　　　　　　　　　（800ミリ秒後） → c2: is-visible あり / opacity 1.00 / translate 0px
いちばん上へ戻した → c2: is-visible あり / opacity 1.00 / translate 0px

<div className="row">
  <Reveal delay={0}><Card title="横並び1" /></Reveal>
  <Reveal delay={100}><Card title="横並び2" /></Reveal>
  <Reveal delay={200}><Card title="横並び3" /></Reveal>
</div>

横並びの上端を85%の位置へ（合計 150ミリ秒後） → r1: is-visible あり / opacity 0.34 / translate 0px 15.8487px  |  r2: is-visible あり / opacity 0.09 / translate 0px 21.8154px  |  r3: is-visible あり / opacity 0.00 / translate 0px 24px
横並びの上端を85%の位置へ（合計 400ミリ秒後） → r1: is-visible あり / opacity 0.82 / translate 0px 4.31427px  |  r2: is-visible あり / opacity 0.65 / translate 0px 8.2968px  |  r3: is-visible あり / opacity 0.45 / translate 0px 13.141px

ページの最後までスクロール → footer: is-visible なし / opacity 0.00 / translate 0px 24px
  画面の高さ 600px / 画面の下から10%を除いた範囲の下端 540px
  footer の上端 560px・下端 600px（translate を除いたもとの位置の上端 536px）

<Reveal rootMargin="0px">
  <footer className="footer">ページの終わり</footer>
</Reveal>

最後の要素だけ rootMargin を 0px にして、ページの最後までスクロール → footer: is-visible あり / opacity 1.00 / translate 0px

スクロールする前（カード2は画面の外） → c2: is-visible なし / opacity 1.00 / translate none

const observer = new IntersectionObserver(
  ([entry]) => setVisible(entry.isIntersecting),
  { rootMargin: '0px 0px -10% 0px' },
);

カード2の上端を85%の位置へ → c2: is-visible あり / opacity 1.00 / translate 0px
いちばん上へ戻した → c2: is-visible なし / opacity 0.00 / translate 0px 24px
もう一度85%の位置へ（100ミリ秒後） → c2: is-visible あり / opacity 0.22 / translate 0px 18.7343px

@keyframes reveal {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  .reveal-css {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-css { animation: none; }
}

カード2の上端を100%（下端にちょうど接する）の位置へ → c2: opacity 0.00 / translate 0px 24px
カード2の上端を95%の位置へ → c2: opacity 0.19 / translate 0px 19.5px
カード2の上端を86.7%（カードの半分が入る）の位置へ → c2: opacity 0.50 / translate 0px 12px
カード2の上端を73.3%（カード全体が入る）の位置へ → c2: opacity 1.00 / translate 0px
カード2の上端を50%の位置へ → c2: opacity 1.00 / translate 0px
いちばん上へ戻した → c2: opacity 0.00 / translate 0px 24px
もう一度86.7%の位置へ → c2: opacity 0.50 / translate 0px 12px
そのまま1秒待った → c2: opacity 0.50 / translate 0px 12px