npm install @react-spring/web

import { useSpring, animated } from '@react-spring/web';

function FadeIn() {
  const styles = useSpring({
    from: { opacity: 0, transform: 'translateY(20px)' },
    to: { opacity: 1, transform: 'translateY(0px)' },
  });

  return <animated.div style={styles}>淡入效果</animated.div>;
}

const styles = useSpring({
  from: { opacity: 0 },
  to: { opacity: 1 },
  config: {
    tension: 170,    // 張力越大彈越快(預設 170)
    friction: 26,    // 摩擦越大越快停(預設 26)
    mass: 1,         // 質量越大慣性越強(預設 1)
  },
});

import { config } from '@react-spring/web';

// config.default  — 普通(170/26/1)
// config.gentle   — 柔和(120/14/1)
// config.wobbly   — 彈性(180/12/1)
// config.stiff    — 硬挺(210/20/1)
// config.slow     — 慢(280/60/1)
// config.molasses — 超慢糖漿(280/120/1)

useSpring({ ..., config: config.wobbly });

import { useTrail, animated } from '@react-spring/web';

function StaggeredList({ items }: { items: string[] }) {
  const trail = useTrail(items.length, {
    from: { opacity: 0, transform: 'translateY(20px)' },
    to: { opacity: 1, transform: 'translateY(0px)' },
  });

  return (
    <ul>
      {trail.map((style, i) => (
        <animated.li key={items[i]} style={style}>
          {items[i]}
        </animated.li>
      ))}
    </ul>
  );
}

import { useTransition, animated } from '@react-spring/web';

function ModalToggle({ open, content }: Props) {
  const transitions = useTransition(open, {
    from: { opacity: 0, transform: 'scale(0.9)' },
    enter: { opacity: 1, transform: 'scale(1)' },
    leave: { opacity: 0, transform: 'scale(0.9)' },
  });

  return transitions((style, isOpen) =>
    isOpen ? (
      <animated.div style={style} className="modal">
        {content}
      </animated.div>
    ) : null
  );
}