✳ Pictographic MotionLive WebGL

THE MOTION LIBRARY

A world of motion.
A simple import.

Static backgrounds, animated backgrounds, objects, and complete compositions. Preview every sample and copy the code to use it on your website.

TRY IT LIVE

Developer wave

Drag your pointer over interactive artwork

Use it on your website

Paste this into your HTML. The library includes the renderer and required assets.

Call art.configure({ speed: 2 }) to update it. Use art.destroy() when removing it from your page. Objects can sit over your own page background.

This sample’s usage & configuration ↗ · All documentation ↗ · API guide ↗ · Full catalog ↗

THE COMPLETE COLLECTION

All samples

Choose “Live preview” to explore an animation above, or copy a sample’s ready-to-paste HTML directly. Gallery images are still previews of the actual artwork.

Make it yours

Use the shared library to combine layers. Add your own headings and buttons as HTML above the artwork.

import { mountScene } from
  'https://motion.pictographic.ai/v1/library.js';

const art = await mountScene('#hero-art', {
  layers: [
    { id: 'background', asset: 'solid', color: '#10182c' },
    { id: 'shape', asset: 'developer-wave', speed: 1.5 }
  ]
});

art.configure({ speed: -2 }, 'shape');
art.pause(); art.play(); art.seek(4);
// When removing the component:
art.destroy();

The container needs a height or aspect ratio. Resizing is automatic. Playback respects reduced-motion preferences. Finite settings outside suggested ranges are retained; extreme settings can affect appearance and performance. See all methods and options ↗