npm install framer-motion

"use client";

import { useRef, useState } from "react";
import { AnimatePresence, useMotionValueEvent, useScroll, motion } from "framer-motion";

export const FloatingPreview = () => {
  // 表示状態を管理
  const [isVisible, setIsVisible] = useState(false);
  // どの要素を超えたら実行したいか
  const triggerRef = useRef(null);
  // 対象の要素までの距離を測る
  const { scrollYProgress } = useScroll({
    target: triggerRef
  });

  // スクロールイベント的なやつ
  useMotionValueEvent(scrollYProgress, "change", (e) => {
    // eの中にはtriggerRefまでの距離が格納されている。
    // eが0になると表示条件を満たしたとみなす
    // ちなみにeが0のときはこのイベントは自動的に止まってくれるすごいやつ！（リサイズ処理も勝手にやってくれる）
    if (e === 0) {
      setIsVisible(true); // 表示状態する
    } else if (isVisible && e !== 0) {
      setIsVisible(false); // 非表示状態にする
    }
  });

  return (
    <>
      <div ref={triggerRef}></div>
      <FloatingPreview isVisible={isVisible} />
    </>
  );
}

// にょきっと表示させたい要素を作る
const FloatingPreviewElement = ({isVisible = false}) => {
  // AnimatePresence はDOMから要素が完全に消えるときもアニメーションを動かせるようにしてくれる。
  // initialは初期値
  // animateは表示の際に使われるアニメーション
  // exitは非表示になる際に使われるアニメーション
  // transitionはイージング（無くても動く。 https://easings.net/ などを参考にすると良い ）

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{
            transform: "translateY(-100%)",
          }}
          animate={{
            transform: "translateY(0)",
          }}
          exit={{
            transform: "translateY(-100%)",
            opacity: 0,
          }}
          transition={{ ease: [0.16, 1, 0.3, 1] }}
          className="fixed top-0 w-full h-10 z-10 bg-white">
          <p>はろー！</p>
        </motion.div>
      )}
    </AnimatePresence>
  );
}