react-moving-mesh
v1.0.17
Published
Animated SVG React Component with moving verticies connected with lines
Downloads
44
Readme
react-moving-mesh
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/
Installation
You can install react-moving-mesh
from npm:
npm install react-moving-mesh
Usage
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.
Props
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.
Screenshot
Contributing
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.
License
react-moving-mesh is MIT licensed.