Another oss project by

Renature

A physics-based animation library for React inspired by the natural world.

npm install renature

Documentation

Features

Declarative React hooks for animating with ease

Tweak your physics parameters, set from and to values for your CSS properties, and let renature do the rest.

Gravity, Friction, Fluid Resistance, and more

Renature explores forces that other physics-based animation libraries typically leave out, giving your animations unique feeling and intuitive motion.

An animation library for physics nerds

Renature emphasizes mathematical precision and correctness, all backed by the type safety and speed of ReScript.

Beautiful, Simple Animations


import React from 'react';
import { useFriction } from 'renature';

function FrictionAnimation() {
  const [props] = useFriction({
    from: {
      transform: 'scale(0) rotate(0deg)',
      background: 'magenta',
    },
    to: {
      transform: 'scale(1) rotate(360deg)',
      background: 'coral',
    },
    config: { mu: 0.5, mass: 300, initialVelocity: 10 },
    repeat: Infinity
  });

  return (
    <div
      className="lp__m lp__m--lg"
      {...props}
    />
  );
}


import React from 'react';
import { useFriction } from 'renature';
function FrictionAnimation() {
  const [props] = useFriction({
    from: {
      transform: 'scale(0) rotate(0deg)',
      background: 'magenta',
    },
    to: {
      transform: 'scale(1) rotate(360deg)',
      background: 'coral',
    },
    config: { mu: 0.5, mass: 300, initialVelocity: 10 },
    repeat: Infinity
  });
  return (
    <div
      className="lp__m lp__m--lg"
      {...props}
    />
  );
}


import React from 'react';
import { useFluidResistance } from 'renature';

function FluidResistanceAnimation() {
  const [toggle, setToggle] = React.useState(true);

  const [props] = useFluidResistance({
    from: {
      opacity: toggle ? 0 : 1,
      transform: toggle
        ? 'scale(0) rotate(0deg)'
        : 'scale(1) rotate(180deg)',
    },
    to: {
      opacity: toggle ? 1 : 0,
      transform: toggle
        ? 'scale(1) rotate(180deg)'
        : 'scale(0) rotate(0deg)',
    }
  });

  return (
    <div className="lp__toggle">
      <Toggle
        onChange={() => setToggle(prevToggle => !prevToggle)}
        checked={toggle}
      />
      <div
        className="lp__m lp__m--lg"
        {...props}
      />
    </div>
  );
};


import React from 'react';
import { useFluidResistance } from 'renature';
function FluidResistanceAnimation() {
  const [toggle, setToggle] = React.useState(true);
  const [props] = useFluidResistance({
    from: {
      opacity: toggle ? 0 : 1,
      transform: toggle
        ? 'scale(0) rotate(0deg)'
        : 'scale(1) rotate(180deg)',
    },
    to: {
      opacity: toggle ? 1 : 0,
      transform: toggle
        ? 'scale(1) rotate(180deg)'
        : 'scale(0) rotate(0deg)',
    }
  });
  return (
    <div className="lp__toggle">
      <Toggle
        onChange={() => setToggle(prevToggle => !prevToggle)}
        checked={toggle}
      />
      <div
        className="lp__m lp__m--lg"
        {...props}
      />
    </div>
  );
};


import React from 'react';
import { useGravity2D } from 'renature';

function Gravity2DAnimation() {
  const [center, setCenter] = React.useState({ top: 0, left: 0 });
  const node = React.useRef(null);

  React.useLayoutEffect(() => {
    if (node.current) {
      const top = node.current.clientHeight / 2;
      const left = node.current.clientWidth / 2;

      setCenter({ top, left });
    }
  }, []);


  const [props] = useGravity2D({
    config: {
      attractorMass: 1000000000000,
      moverMass: 10000,
      attractorPosition: [center.left, center.top],
      initialMoverPosition: [center.left, center.top - 100],
      initialMoverVelocity: [1, 0],
      threshold: {
        min: 20,
        max: 100,
      },
      timeScale: 100,
    },
  });

  return (
    <div className="lp__space" ref={node}>
      <div className="lp__m-2d" {...props} />
      <div
        className="lp__attractor-2d"
        style={center}
      />
    </div>
  );
}


import React from 'react';
import { useGravity2D } from 'renature';
function Gravity2DAnimation() {
  const [center, setCenter] = React.useState({ top: 0, left: 0 });
  const node = React.useRef(null);
  React.useLayoutEffect(() => {
    if (node.current) {
      const top = node.current.clientHeight / 2;
      const left = node.current.clientWidth / 2;
      setCenter({ top, left });
    }
  }, []);
  const [props] = useGravity2D({
    config: {
      attractorMass: 1000000000000,
      moverMass: 10000,
      attractorPosition: [center.left, center.top],
      initialMoverPosition: [center.left, center.top - 100],
      initialMoverVelocity: [1, 0],
      threshold: {
        min: 20,
        max: 100,
      },
      timeScale: 100,
    },
  });
  return (
    <div className="lp__space" ref={node}>
      <div className="lp__m-2d" {...props} />
      <div
        className="lp__attractor-2d"
        style={center}
      />
    </div>
  );
}

Get Started

Renature comes equipped with a lightweight set of production ready React hooks.
Dig into the documentation to start animating!

Documentation

More Open Source from Formidable

Victory

An ecosystem of modular data visualization components for React. Friendly and flexible.

urql

Universal React Query Library is a blazing-fast GraphQL client, exposed as a set of ReactJS components.

Spectacle

A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

Runpkg

The online package explorer. Runpkg turns any npm package into an interactive and informative browsing experience.

View All

Formidable is a Seattle, Denver, and London-based engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem. For more information about Formidable, please visit formidable.com.