import * as motion from "motion/react-client"

const box = {
  width: 100,
  height: 100,
  backgroundColor: "#ff0088",
  borderRadius: 5,
}

export default function App() {
    return (
        <motion.div
            style={box}
            animate={{ rotate: 360 }}
            transition={{ duration: 1 }}
        />
    )
}

import * as motion from "motion/react-client";
const ball = {
  width: 100,
  height: 100,
  backgroundColor: "#dd00ee",
  borderRadius: "50%",
};
export default function EnterAnimation() {
  return (
    <motion.div
      // 默认透明度是0，缩放为0
      initial={{ opacity: 0, scale: 0 }}
      // 动画结束时透明度为1，缩放为1
      animate={{ opacity: 1, scale: 1 }}
      // 动画持续时间0.4秒，缩放使用弹簧效果，视觉持续时间0.4秒，弹跳0.5次
      transition={{
        duration: 0.4,
        scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
      }}
      style={ball}
    />
  );
}

import { AnimatePresence, motion } from "motion/react";
import { boxVariants } from "./motions/variants";

const App = () => {
  return (
    <AnimatePresence>
      <motion.div
        initial="hidden"
        animate="visible"
        exit="hidden"
        variants={boxVariants}
        className="w-20 h-20 bg-blue-500 rounded-md"
      >
        <p>Hello</p>
      </motion.div>
    </AnimatePresence>
  );
};

export default App;

import { AnimatePresence, motion } from "motion/react";
import { itemVariants, listVariants } from "./motions/variants";
const listItems = ["Hello", "World", "React", "Motion", "Animation"];

const App = () => {
  return (
    <AnimatePresence>
      <motion.ul
        initial="hidden"
        animate="visible"
        exit="hidden"
        variants={listVariants}
        className="rounded-md list-none p-0 m-0"
      >
        {listItems.map((item) => (
          <motion.li
            variants={itemVariants}
            key={item}
            className="bg-blue-500 rounded-md p-2 m-2"
          >
            {item}
          </motion.li>
        ))}
      </motion.ul>
    </AnimatePresence>
  );
};

export default App;

import { motion } from "motion/react";

// 1. 定义一个可复用的 transition 对象
const basicTransition = {
  duration: 0.8, // 动画持续时间
  delay: 0.5, // 动画延迟开始的时间
  // ease 定义缓动曲线，这里是一个自定义的贝塞尔曲线
  ease: [0, 0.71, 0.2, 1.01], 
};

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      // 2. 将 transition 对象应用到 animate 属性
      animate={{ x: 200 }}
      transition={basicTransition}
    />
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      initial={{ x: -200, opacity: 0 }}
      animate={{
        x: 0,
        opacity: 1,
        // 在这里，x 和 opacity 都会使用这个 spring 过渡
        transition: {
          type: "spring",
        },
      }}
    />
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      initial={{ x: -200, opacity: 0 }}
      animate={{
        x: 0,
        opacity: 1,
        transition: {
          // 为所有未明确指定的属性设置默认过渡
          // stiffness：弹性系数 越高 动画越快
          default: { type: "spring", stiffness: 20 },
          // 为 opacity 属性设置专属过渡
          opacity: { ease: "linear", duration: 2 },
        },
      }}
    />
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      animate={{ rotate: 180 }}
      transition={{
        type: "tween", // 明确指定类型为 tween
        duration: 2,   // 持续 2 秒
        ease: "easeInOut", // 使用 "easeInOut" 缓动曲线
      }}
    />
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      whileHover={{ scale: 1.2 }}
      transition={{
        type: "spring",
        duration: 0.8,
        bounce: 0.5 // 适度的弹力
      }}
    />
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      whileTap={{ scale: 0.8 }}
      transition={{
        type: "spring",
        stiffness: 400, // 较高的刚度
        damping: 10,    // 较低的阻尼，会产生一些振荡
      }}
    />
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.div
      className="w-20 h-20 bg-blue-500 rounded-md"
      animate={{ rotate: 180 }}
      transition={{
        repeat: Infinity,        // 无限循环
        repeatType: "reverse",   // 往返运动
        duration: 2,             // 单次动画时长
        repeatDelay: 1,          // 每次重复间隔 1 秒
      }}
    />
  );
}

import { motion } from "motion/react";
import { itemVariants, listVariants } from "./motions/variants";

const listItems = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

export default function App() {
  return (
    <motion.ul
      className="p-0 m-0 list-none"
      initial="hidden"
      animate="visible"
      variants={listVariants}
    >
      {listItems.map((item) => (
        <motion.li
          key={item}
          className="bg-blue-500 text-white rounded-md p-4 m-2"
          variants={itemVariants}
        >
          {item}
        </motion.li>
      ))}
    </motion.ul>
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <motion.button
      className="bg-blue-500 text-white font-bold py-3 px-6 rounded-lg text-xl"
      // 鼠标悬停时，按钮放大 1.1 倍
      whileHover={{
        scale: 1.1,
        // 可以为特定手势定义专属的 transition
        transition: { type: "spring", stiffness: 300 },
      }}
      // 点击（按下）时，按钮缩小到 0.9 倍
      whileTap={{ scale: 0.9 }}
    >
      Click Me
    </motion.button>
  );
}

<motion.div
  className="w-20 h-20 bg-blue-500 rounded-full cursor-grab"
  drag // 启用拖拽
  whileTap={{ cursor: "grabbing" }} // 拖拽时改变鼠标样式
/>

import { motion } from "motion/react";
import { useRef } from "react";

export default function App() {
  // 1. 创建一个 ref 来引用约束容器
  const constraintsRef = useRef(null);
  return (
    // 2. 将 ref 绑定到容器元素上
    <div
      ref={constraintsRef}
      className="w-80 h-80 bg-slate-200 rounded-lg flex justify-center items-center mx-auto"
    >
      <motion.div
        className="w-20 h-20 bg-blue-500 rounded-full cursor-grab"
        drag
        // 3. 将 ref 作为拖拽约束
        dragConstraints={constraintsRef}
        whileTap={{ cursor: "grabbing" }}
      />
    </div>
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    // 为了演示，我们创建一个可滚动的容器
    <div className="h-[200vh] pt-[50vh]">
      <motion.div
        className="w-40 h-40 bg-blue-500 rounded-lg mx-auto"
        // 动画的初始状态
        initial={{ opacity: 0, scale: 0.5 }}
        // 当元素进入视口时，动画到这个状态
        whileInView={{ opacity: 1, scale: 1 }}
        // 可以定义过渡效果
        transition={{ duration: 0.8 }}
      />
    </div>
  );
}

import { motion } from "motion/react";

export default function App() {
  return (
    <div className="h-[200vh] pt-[50vh]">
      <motion.div
        className="w-40 h-40 bg-blue-500 rounded-lg mx-auto"
        initial={{ opacity: 0, y: 100 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        // 关键配置：让动画只播放一次
        viewport={{ once: true }}
      />
    </div>
  );
}

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

export default function App() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="w-40 h-40 flex flex-col items-center justify-between">
      <div className="w-full h-24">
        {/* 1. 使用 AnimatePresence 包裹条件渲染的组件 */}
        <AnimatePresence>
          {isVisible && (
            <motion.div
              // 2. 必须提供唯一的、稳定的 key
              key="interactive-box"
              className="w-20 h-20 bg-blue-500 rounded-md"
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.5 }}
              transition={{ type: "spring", stiffness: 300, damping: 20 }}
            />
          )}
        </AnimatePresence>
      </div>

      <motion.button
        className="bg-slate-200 rounded-md py-2 px-4 text-sm font-bold"
        onClick={() => setIsVisible(!isVisible)}
        whileTap={{ scale: 0.95 }}
      >
        {isVisible ? "Hide" : "Show"}
      </motion.button>
    </div>
  );
}

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

let idCounter = 4; // 用于生成唯一 ID

export default function App() {
  // 1. 使用 state 管理我们的列表数据
  const [items, setItems] = useState([
    { id: 1, text: "Notification 1" },
    { id: 2, text: "Notification 2" },
    { id: 3, text: "Notification 3" },
  ]);

  const addItem = () => {
    setItems([
      ...items,
      { id: idCounter++, text: `Notification ${idCounter}` },
    ]);
  };

  const removeItem = (id: number) => {
    setItems(items.filter((item) => item.id !== id));
  };

  return (
    <div className="w-64">
      <motion.button
        className="bg-blue-500 text-white w-full py-2 px-4 mb-4 rounded-md font-bold"
        onClick={addItem}
        whileTap={{ scale: 0.95 }}
      >
        Add Notification
      </motion.button>
      <ul className="p-0 m-0 list-none">
        {/* 2. AnimatePresence 包裹整个列表的映射 */}
        <AnimatePresence>
          {items.map((item) => (
            <motion.li
              // 3. key 必须是每个 item 唯一的、稳定的标识符
              key={item.id}
              className="bg-slate-200 rounded-md p-3 mb-2 flex justify-between items-center"
              initial={{ opacity: 0, y: 50, scale: 0.3 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
              layout // layout 属性让列表在增删时，其他元素能平滑移动到新位置
            >
              <span>{item.text}</span>
              <motion.button
                className="w-6 h-6 bg-white rounded-full flex items-center justify-center text-red-500 font-bold"
                onClick={() => removeItem(item.id)}
                whileTap={{ scale: 0.8 }}
              >
                &times;
              </motion.button>
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
    </div>
  );
}

import { Reorder, useMotionValue } from "motion/react";
import { useState } from "react";

// 自定义 Reorder.Item 以添加样式和交互
function Item({ item }: { item: string }) {
  const y = useMotionValue(0); // 用于创建拖拽时的垂直偏移视觉效果

  return (
    <Reorder.Item
      value={item}
      style={{ y }}
      className="bg-white p-4 my-2 rounded-lg shadow-md cursor-grab"
      whileTap={{ cursor: "grabbing", scale: 1.05 }}
    >
      <span>{item}</span>
    </Reorder.Item>
  );
}

export default function App() {
  const [items, setItems] = useState([
    "🍎 Apple",
    "🍌 Banana",
    "🍒 Cherry",
    "🍇 Grapes",
  ]);

  return (
    <div className="w-64">
      <h2 className="text-xl font-bold text-center mb-4">Fruit Basket</h2>
      {/* 1. Reorder.Group 包裹列表 */}
      <Reorder.Group
        // 2. 轴向和数据绑定
        axis="y"
        values={items}
        // 3. 关键：当重排发生时，用新顺序更新我们的 state
        onReorder={setItems}
        className="p-0 m-0 list-none"
      >
        {items.map((item) => (
          // 4. 为每个 item 渲染一个 Reorder.Item
          <Item key={item} item={item} />
        ))}
      </Reorder.Group>
    </div>
  );
}

import { useMotionValue } from "motion/react";

const x = useMotionValue(0); // 创建一个初始值为 0 的 MotionValue

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

export default function App() {
  // 1. 创建一个 MotionValue，初始值为 0
  const x = useMotionValue(0);

  // 在这个例子中，我们可以在某个事件中手动更新它
  // x.set(100); // 命令式地设置新值

  return (
    <div>
      {/* // 2. 将 MotionValue 直接传入 style 对象 
      // // 当 x 的值改变时，这里的
      translateX 会被直接更新，而无需组件重渲染 */}
      <motion.div
        className="w-20 h-20 bg-blue-500 rounded-full"
        style={{ x }} // { x } 是 { x: x } 的简写
      />
      <button onClick={() => x.set(100)}>Move</button>
    </div>
  );
}

import { motion, useMotionValue, useTransform } from "motion/react";

export default function App() {
  const x = useMotionValue(0);
  // 1. 创建一个派生 MotionValue
  // 当 x 的值在 [-200, 200] 范围变化时... 从小变大
  const scale = useTransform(x, [-200, 0, 200], [0.5, 1, 0.5]);
  // 当 x 的值在 [-200, 200] 范围变化时... 从左到右
  const rotate = useTransform(x, [-200, 200], [-45, 45]);
  // 当 x 的值在 [-200, 200] 范围变化时... 从红到蓝到绿
  const backgroundColor = useTransform(
    x,
    [-200, 0, 200],
    ["#ff0000", "#0000ff", "#00ff00"]
  );

  return (
    <div className="w-96 h-96 bg-slate-200 rounded-lg flex items-center justify-center mx-auto">
      <motion.div
        className="w-24 h-24 rounded-full bg-blue-500"
        // 2. 将派生的 MotionValue 应用于样式
        style={{ x, scale, rotate, backgroundColor }}
        drag="x" // 允许水平拖拽
        dragConstraints={{ left: -200, right: 200 }} // 设置拖拽边界
        whileTap={{ cursor: "grabbing" }}
      />
    </div>
  );
}

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

export default function App() {
  // 1. 调用 useScroll 获取滚动进度
  const { scrollYProgress } = useScroll();
  
  // 2. （可选）使用 useSpring 为进度条添加平滑效果
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  });

  return (
    <>
      {/* 3. 创建进度条元素 */}
      <motion.div
        className="fixed top-0 left-0 right-0 h-2 bg-blue-500 origin-left"
        // 4. 将 scaleX MotionValue 绑定到样式上
        style={{ scaleX }}
      />
      <div className="h-[200vh] p-8">
        <h1 className="text-3xl font-bold">Scroll Down</h1>
      </div>
    </>
  );
}

import { motion, useMotionValue, useSpring } from "motion/react";
import { useEffect } from "react";

export default function App() {
  // 1. 创建两个 MotionValue 来存储原始的鼠标坐标
  const mouse = {
    x: useMotionValue(0),
    y: useMotionValue(0),
  };

  // 2. 为每个坐标创建一个应用了 spring 效果的 MotionValue
  const smoothOptions = { stiffness: 300, damping: 20, mass: 0.5 };
  const smoothMouse = {
    x: useSpring(mouse.x, smoothOptions),
    y: useSpring(mouse.y, smoothOptions),
  };

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      // 3. 在事件回调中，更新原始的 MotionValue
      mouse.x.set(e.clientX);
      mouse.y.set(e.clientY);
    };

    window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return (
    <div className="w-full h-screen">
      <motion.div
        className="w-12 h-12 bg-blue-500 rounded-full fixed"
        // 4. 将平滑后的 MotionValue 应用于样式
        // 这里需要将坐标居中
        style={{
          translateX: smoothMouse.x,
          translateY: smoothMouse.y,
          x: "-50%",
          y: "-50%",
        }}
      />
    </div>
  );
}

import { motion } from "motion/react";
import { useState } from "react";

export default function App() {
  const [isToggled, setIsToggled] = useState(false);

  return (
    <div
      // 点击容器时切换状态
      onClick={() => setIsToggled(!isToggled)}
      className={`w-40 h-12 rounded-full flex items-center p-1.5 cursor-pointer transition-colors ${
        isToggled ? "bg-blue-500 justify-end" : "bg-gray-300 justify-start"
      }`}
    >
      <motion.div
        className="w-9 h-9 bg-white rounded-full shadow-md"
        // 关键所在：添加 layout 属性
        layout
        // (可选) 为 layout 动画自定义 transition
        transition={{ type: "spring", stiffness: 300, damping: 20 }}
      />
    </div>
  );
}

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

const imageUrl = "https://picsum.photos/400/300";

function Card({ id, onSelect }: { id: string; onSelect: (id: string) => void }) {
  return (
    <motion.img
      // 1. 在缩略图上设置 layoutId
      layoutId={id}
      onClick={() => onSelect(id)}
      src={imageUrl}
      alt="thumbnail"
      className="w-32 h-20 object-cover rounded-lg cursor-pointer"
    />
  );
}

function ExpandedCard({ id, onDeselect }: { id: string; onDeselect: () => void }) {
  return (
    // 使用一个遮罩层
    <motion.div 
      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" 
      onClick={onDeselect}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      <motion.img
        // 2. 在展开图上设置相同的 layoutId
        layoutId={id}
        src={imageUrl}
        alt="expanded"
        className="w-80 h-48 object-cover rounded-xl"
      />
    </motion.div>
  );
}

export default function App() {
  const [selectedId, setSelectedId] = useState<string | null>(null);

  return (
    <div className="flex gap-4">
      {["card-1"].map((id) => (
        <Card key={id} id={id} onSelect={setSelectedId} />
      ))}

      {/* 3. 使用 AnimatePresence 来管理展开卡片的出入场 */}
      <AnimatePresence>
        {selectedId && (
          <ExpandedCard id={selectedId} onDeselect={() => setSelectedId(null)} />
        )}
      </AnimatePresence>
    </div>
  );
}

import React, { useState } from "react";
import { motion, LayoutGroup } from "motion/react";

const App: React.FC = () => {
  const [items, setItems] = useState([
    { id: "1", title: "项目 A", color: "bg-red-400" },
    { id: "2", title: "项目 B", color: "bg-teal-400" },
    { id: "3", title: "项目 C", color: "bg-blue-400" },
  ]);

  const moveToTop = (id: string) => {
    setItems((prev) => {
      const item = prev.find((i) => i.id === id)!;
      return [item, ...prev.filter((i) => i.id !== id)];
    });
  };

  return (
    <LayoutGroup>
      <div className="p-5 max-w-sm">
        <h2 className="text-xl font-semibold mb-4">复杂布局动画协调示例</h2>

        {/* 列表区域 */}
        <div className="mb-5">
          {items.map((item) => (
            <motion.div
              key={item.id}
              layoutId={item.id}
              layout
              onClick={() => moveToTop(item.id)}
              className={`${item.color} p-4 my-2.5 rounded-lg cursor-pointer text-white`}
            >
              {item.title}
            </motion.div>
          ))}
        </div>
      </div>
    </LayoutGroup>
  );
};

export default App;