1.跟随鼠标效果
在这种效果中，一个小元素，如圆圈，跟随鼠标移动。为了实现这种效果，我们首先需要跟踪光标每次移动时的位置。我们将鼠标位置的x和y值存储在状态变量中。然后，我们创建一个在pointermove上运行函数的效果。要获得鼠标相对于跟随鼠标的对象的位置，我们将向该元素添加ref。在pointermove函数中，我们使用窗口的clientX和clientY属性作为对象参数。以下是代码中的效果：

在这里，element是指ref对象（在我们的情况下将跟随鼠标的圆圈）当前引用的DOM元素。x和y坐标是通过从屏幕上指针位置（clientX和clientY）的水平和垂直坐标中减去offsetLeft和offsetTop来计算的。最后，我们从上面计算的值中减去元素宽度和高度的一半，以确保指针位于圆的中心。接下来，我们使用motion.div组件创建圆，为其分配ref对象。x和y值将使用状态的值进行动画，我们还将添加一个弹簧过渡，以创建很酷的反弹效果。

2.可拖动列表
在大多数列表中找到的常见功能，如待办事项列表、已保存的项目列表或简单的自定义选项卡，是通过拖放功能重新排列项目。让我们深入研究如何在React中使用Framer Motion创建可拖动列表。为此，我们将使用Framer Motion中可用的ReOrder.Group组件。列表将由此组件包装，或者你可以直接映射此组件中的列表项。一些可用于ReOrder.Group组件的很炫酷的道具：·as：确定赞助你所希望希望列表是按顺序排列还是按顺序排列。·axis：指定列表的方向。例如，待办事项列表为垂直，选项卡为水平。·values：用作源的值数组。·onReorder(newOrder)：这是一个回调函数，当项目被拖动和重新排序时运行。通常，如果列表项存储在状态数组中，则会传递stateSetter函数。此外，Reorder.Item组件还有一些有用的道具。你可以在官网中查看它们。基础知识非常简单。要创建可拖动列表的演示，以下代码提供了基础知识：

在这里，我们正在映射一个列表项的状态数组。每个项目在Reorder.Group中表示为aReorderReorder.Item。轴是垂直的，而默认的道具是一个无序的列表。

3.视差效应
视差效应是一种广泛使用的技术，用于在用户滚动网页时以不同速度移动元素来创造深度和活力。我们只能使用Framer Motion的几行代码来创建此效果。在我们的示例中，我们将在全屏图像上显示一些文本。与背景相比，文本将以不同的速度移动。为了创造这种效果，我们将首先计算页面相对于参考点（我们案例中的文本）的垂直滚动进度。然后，我们将利用useTransform钩子将该值映射到[-60，60]的范围内，该范围表示文本沿y轴的最大和最小位移。然后，将此转换值作为文本样式

scrollYProgress给我们一个从0到1的值，具体取决于引用textRef的页面滚动的百分比。