React Dancing Lines

react-dancing-lines is a simple react wrapper for a website effect, originally created by 何问起 hovertree.com.

It is a cool cursor effect to be used in the web front page and it would be even greater if I can use it in React as a component! So I tweaked a bit the code and now you can use it as a React component!

Demo Website: https://zhiyueyi.github.io/react-dancing-lines/

Installation

npm install react-dancing-lines --save

Usage

Just include the DancingLines component in your own components and that's it!

export function App() {
  return (
    <div
      style={{
        height: '100vh',
        width: '100vw',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
      }}
    >
      <DancingLines></DancingLines>
      <h1>Hello, world!</h1>
    </div>
  );
}