react-moving-mesh
is a React component that animates a number of vertices connected by lines, creating a dynamic, moving mesh effect.
- Demo app source code : https://github.com/stujo/react-moving-mesh-demo
- Demo app live : https://react-moving-mesh-demo.vercel.app/
You can install react-moving-mesh
from npm:
npm install react-moving-mesh
Here's a basic example of how to use the MovingMesh component:
import React from "react";
import MovingMesh from "react-moving-mesh";
function App() {
return (
<div className="App">
<MovingMesh />
</div>
);
}
export default App;
In this example, the MovingMesh component is used in a simple React app. You can customize the MovingMesh component with various props to adjust the appearance and behavior of the mesh.
Here are the props you can use to customize the MovingMesh component:
-
fps
: Frames per second for the animation. Default value is 15. -
vertexCount
: Number of vertices in the mesh. Default value is 5. -
velocity
: Velocity of the vertices. Default value is 0.1. -
maxVelocity
: Maximum velocity of the vertices. Default value is 1.5. -
entropy
: Entropy factor affecting the randomness of vertex movement. Default value is 0.9. -
radius
: Radius of the vertices. Default value is 5. -
dVelocity
: Delta velocity applied to the vertices. Default value is 0.05. -
vertexFill
: Fill color of the vertices. Default value is "white". -
vertexStroke
: Stroke color of the vertices. Default value is "white". -
vertexStrokeWidth
: Stroke width of the vertices. Default value is 0. -
lineStroke
: Stroke color of the connecting lines. Default value is "white". -
lineStrokeWidth
: Stroke width of the connecting lines. Default value is 2. -
gravity
: Gravity applied to the vertices. Default value is 0.
Contributions are welcome! Please open an issue if you encounter any problems, or open a pull request if you want to add new features or fix bugs.
react-moving-mesh is MIT licensed.