如何创建“浮动”和“位移”效果？使用React，CSS3

Question

我希望构建一个简单的登录页面，该页面有些不同。这是我快速整理的样机：

这很简单：

• 中间的大文本标题（例如，网站/公司的名称）
• 由许多元素包围，大小各异的SVG图像（在模型中，由彩色矩形和圆形表示）。

我要添加的第一个效果是使该网站与众不同，是元素“浮动”它们在随机方向上缓慢移动。

如果它们相互碰撞，它们会改变方向，从而不会重叠。

最后，将鼠标悬停在元素上时，鼠标/光标/点具有类似的位移效果。

这是我尝试在gif中捕获此行为的方法：

我以前从未尝试过构建像这样的东西，是否有一个最适合帮助我实现这样的东西的javascript库？

在我自己的研究中，我发现TwoJS的particle sandbox demo似乎在展示我想要构建的某些功能。