@harry-cramp/react-kinetics

Breathe life into your interfaces with react-kinetics — a React library for stunning and dynamic particle systems that turn static images into living, interactive art on the web.

Install

npm install @harry-cramp/react-kinetics

Dependencies

| Dependency | Version | |---|---| | react | >=18 | | react-dom | >=18 |

React and React DOM are peer dependencies so they won't be installed automatically. Make sure your project already has them.

Quick Start

import { useRef } from 'react';
import { DroneShow } from '@harry-cramp/react-kinetics';

function App() {
  const magnetRef = useRef(false);

  return (
    <div style={{ width: 400, height: 400 }}>
      <DroneShow
        imagePath="/logo.png"
        magnetRef={magnetRef}
        primaryColor="#ff6b6b"
        secondaryColor="#1a1a2e"
      />
    </div>
  );
}

Toggle magnetRef.current to true to pull the particles into the shape of your image, or set it to false to let them drift freely.

Components

DroneShow

A component that extracts edge data from an image and renders it as an animated floating particle cloud. Particles scatter randomly on mount and can be "magnetised" into the shape of the source image on demand.

Props

| Prop | Type | Default | Description | |---|---|---|---| | imagePath | string | required | URL or path to the source image. The image is processed at 256×256 internally. | | magnetRef | React.RefObject<boolean> | required | A ref controlling whether particles are attracted to their origin positions (true) or float freely (false). | | primaryColor | string | "#9e2a2b" | The primary colour of the particle gradient (applied at the top of the image). Accepts hex (#rrggbb) or rgb(r,g,b). | | secondaryColor | string | "#9e2a2b" | The secondary colour of the particle gradient (applied at the bottom of the image). Accepts hex or rgb(). |

Sizing

DroneShow fills 100% of its parent's width and height. Wrap it in a sized container to control dimensions.

Tip: Magnet on Hover

Use onMouseEnter and onMouseLeave on the wrapper to pull particles into shape when the user hovers:

import { useRef } from 'react';
import { DroneShow } from '@harry-cramp/react-kinetics';

function HoverDemo() {
  const magnetRef = useRef(false);

  return (
    <div
      style={{ width: 400, height: 400 }}
      onMouseEnter={() => (magnetRef.current = true)}
      onMouseLeave={() => (magnetRef.current = false)}
    >
      <DroneShow imagePath="/logo.png" magnetRef={magnetRef} />
    </div>
  );
}

License

ISC