Motion

npm install motion

import { motion } from "motion/react";

export function ProjectCard() {
  return (
    <motion.article
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -4 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 320, damping: 24 }}
      className="project-card"
    >
      <h2>Motion</h2>
      <p>Production-ready animations for React and JavaScript.</p>
    </motion.article>
  );
}

import { AnimatePresence, motion } from "motion/react";

export function ProjectList({ projects }: { projects: string[] }) {
  return (
    <motion.ul layout>
      <AnimatePresence mode="popLayout">
        {projects.map((project) => (
          <motion.li
            layout
            key={project}
            initial={{ opacity: 0, scale: 0.96 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.96 }}
          >
            {project}
          </motion.li>
        ))}
      </AnimatePresence>
    </motion.ul>
  );
}

import { motion } from "motion/react";

export function Tabs({
  items,
  active,
  onChange,
}: {
  items: string[];
  active: string;
  onChange: (value: string) => void;
}) {
  return (
    <div role="tablist">
      {items.map((item) => (
        <button
          key={item}
          role="tab"
          aria-selected={item === active}
          onClick={() => onChange(item)}
        >
          {item}
          {item === active ? (
            <motion.span layoutId="active-tab" className="active-tab" />
          ) : null}
        </button>
      ))}
    </div>
  );
}

import { motion, useScroll, useSpring } from "motion/react";

export function ScrollProgress() {
  const { scrollYProgress } = useScroll();
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 24,
  });

  return (
    <motion.div
      aria-hidden="true"
      style={{ scaleX, transformOrigin: "0 50%" }}
      className="scroll-progress"
    />
  );
}

import {
  MotionConfig,
  motion,
  useReducedMotion,
} from "motion/react";

function Sidebar({ open }: { open: boolean }) {
  const reduceMotion = useReducedMotion();

  return (
    <motion.aside
      animate={{
        opacity: open ? 1 : 0,
        x: open || reduceMotion ? 0 : "-100%",
      }}
    />
  );
}

export function App() {
  return (
    <MotionConfig reducedMotion="user">
      <Sidebar open />
    </MotionConfig>
  );
}

import { animate, stagger } from "motion";

animate(
  ".project-card",
  {
    opacity: [0, 1],
    y: [20, 0],
  },
  {
    duration: 0.45,
    delay: stagger(0.06),
    ease: "easeOut",
  },
);

npm run dev

# 发布前执行项目自己的检查
npm run typecheck
npm run build