particles()
Thousands of dots that rebuild themselves into each new shape.
Usage
import { particles, sampleTextPoints } from "@remold-ui/canvas";
import { samplePath } from "@remold-ui/core";
const dots = particles(canvas, { points: sampleTextPoints("Hello", { count: 2000 }), label: "Hello" });
dots.to(samplePath(logoPath, { count: 2000 }), { label: "Our logo" });Each dot pairs with a nearby spot in the next shape and springs there; spare dots shrink away and new ones grow in. Dots near the pointer lean away.
Options
Prop
Type
Changing shape
to(points, options) flows the dots into the next shape.
Prop
Type
Scatter
dots.to(nextShape, { transition: "scatter" });
dots.to(nextShape, { transition: { type: "scatter", spread: 1.6, hold: 0.5 } });Prop
Type
With reduced motion the dots go straight to the new shape, scatter or not. In core, pointCloud().to(points, { scatter }) takes the same settings.
Sampling shapes
| Function | Gives points for |
|---|---|
samplePath(d, options) | An SVG path's inside, or its outline with mode: "outline". |
sampleTextPoints(text, options) | Text in a CSS font. Load web fonts first. |
loadPixels(source, { size }) | An image's RGBA pixels, from a URL, a picked file or an image on the page, for shapes.fromPixels in @remold-ui/core. |
sampleImagePoints(image, options) | An image's opaque, dark, light, or saturated pixels; pass the same palette (any CSS colours) to sample colour tones. Optional normalized details preserve tiny features outside the mask. |
sampleElementPoints(element, options) | A piece of the page as it looks: backgrounds, text and images, each dot toned from palette. Positions are in relativeTo's CSS pixels, so they land on the element under an overlay canvas with fit: "none". |
sampleMask(mask, options) | Any pixel data, such as ImageData. |
All take count (exactly that many points) or spacing, plus pattern and jitter.
dots.settled() resolves once the dots stop moving, so you can wait for a change to play out.
To pour part of the page somewhere else (a row into a bin, a product into a cart), use dust(container): await trail.away(row, bin) and await trail.back(row, bin). It's built from sampleElementPoints, which turns an element into coloured dots, and clusterPoints from core, which gathers them into a heap. See useDust.