Vibeset

Elastic mesh

The text is drawn once on an auxiliary canvas and pasted, piece by piece, onto a mesh of points. Each point is tied to its place by a spring and to its neighbours by a softer one; when you grab the text the nearby points follow the pointer, and on release they return with a sway that spreads from one to the next. It deforms without WebGL: the mesh is a grid of triangles and each is painted with an affine transform (three points of the text and the three where they have ended up determine a single rotation, scale and shear). The triangles are widened slightly when clipping, or neighbours would leave a gap. The physics uses Verlet with a fixed step and the loop stops when everything is still. It is a toy: the container is an image named by the text and the real text must also exist outside the canvas.

And the React Bits original: Elastic Mesh

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Elastic Mesh, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For a toy on a creative site: a logo that stretches. It is decoration, not a way to present content.

Watch out for

At 50 KB of source it is among the heaviest of the ones we analyse here: a lot for a toy. Load it lazily and only if the toy is the point.

Accessibility

It respects the system reduced-motion setting and carries three aria signals. It stops off screen.