Skip to content

v0.1.0

Latest

Choose a tag to compare

@JC-02 JC-02 released this 07 Sep 08:58
· 1 commit to main since this release

Improvements to using plexure with shapes. Before, a shape masked the field: particles drifted through the whole box and you saw the part that fell inside your shape. Now they live within the shape's fit seamlessly.

Confine a field to a shape

createPlexure(el, { clipTo: { path: 'M 0 0 L 100 0 ...' } })

Particles start inside the shape and stay there. fit controls how the path maps onto your container: 'contain', 'cover' or 'none'.

Show one field through several containers

createPlexure(wrapper, { clipTo: { windows: '.card' } })

One field spans the wrapper and shows through each card. A particle that drifts out of one card turns up in the next. Corner radii come from each card's own CSS, so you don't have to repeat them.

Smaller things

  • cursor.mode: 'repel' pushes particles away instead of pulling them in.
  • count: null and seed: null clear an option and go back to the default.
  • A field that can't draw stops itself and warns once, instead of throwing every frame.
  • 303 tests now run against Node and headless Chromium.

New change

plexure is a peer dependency of @plexure/react now, so install both:

npm install @plexure/react plexure

That keeps one copy of the engine on the page. Two copies would each run their own animation loop.