Using a figure.

Each figure is a single HTML file. The drawing, animation, and controls are included.

Download and open

Choose a figure from the collection and select Download HTML. Open the file in your browser. It works offline without installing anything.

Every figure opens in Construction. Change the finish or playback settings using the toolbar at the bottom.

Embed in a webpage

Place the file with your site’s assets and add an iframe. Give it a descriptive title and enough height for the controls.

<iframe
  src="/motive-synthesis.html"
  title="Different sources becoming one shared understanding"
  style="width:100%;height:640px;border:0"
  loading="lazy"
></iframe>

You can also link to the HTML file to open it on its own. Motive currently ships HTML files; it does not have a React component or a JavaScript package.

Four finishes

Construction: Graphite shapes with outlines, axes, and drawing guides. The default.
Graphite: Filled shapes with the drawing guides removed.
Light: Outlined forms on a white background.
Dark: Bright outlines and dimmer inner contours on a dark background.

The movement stays the same when you change finishes.

Playback and controls

Intensity adjusts how far the shapes move or deform. The standalone viewer also includes Speed and a Settings menu for inspecting a position in the loop and changing the guides.

Figures start paused when your device requests reduced motion. You can still choose to play them. Collection previews play one at a time on hover or keyboard focus and stop when they leave view. On touch screens, open a figure to play it. Previews stay still when your device requests reduced motion.

When you use a figure to explain something, include the explanation in text too.