useDust

UsageCopy Anchor Link

import { useDust } from "@remold-ui/react/canvas";

function Inbox() {
  const card = useRef<HTMLElement>(null);
  const trail = useDust(card, { palette: ["var(--ink)", "var(--muted)", "var(--surface)"] });

  async function archive(row: HTMLElement) {
    setHidden(row.id); // hide it as its dust takes over
    await trail.away(row, archiveTab.current!);
    removeRow(row.id);
  }

  async function undo(row: HTMLElement) {
    await trail.back(row, archiveTab.current!); // the same dots pour back out
    setHidden(null);
  }

  return <section ref={card}>…</section>;
}

In plain JavaScript, dust(container, options) from @remold-ui/canvas gives you the same away, back and destroy.

• Each pour samples the elements as they look (backgrounds, text and images), so every dot keeps its colour, then gathers them into a heap at the target's middle.
• The dots are drawn on a canvas laid over the container for the length of the pour, and it's removed once they land. Nothing runs between pours.
• Positions are measured in the container's own pixels, so pours line up inside a CSS transform, such as a scaled-down preview.
• The palette takes var(--name), read from the container when the pour starts, so dust follows dark mode. Make the last colour the one the elements sit on, so anti-aliased edges vanish into it.

OptionsCopy Anchor Link

ReturnsCopy Anchor Link