Embedding Cluster Settle
Scattered points drift into labelled groups, the halos and captions landing after them.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useMemo, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Embedding Cluster Settle
*
* A scatter of points drifting into the groups a model found. The
* positions are generated from a fixed seed, so the same picture rendersAbout this pattern
The moment a similarity map resolves. Points begin spread across the plot and travel to their group on a well-damped spring with a per-point cascade, so the eye can follow the gathering instead of being shown a finished picture. Halos and captions arrive only once the points have settled, which frames the grouping as a conclusion rather than a grid the dots were poured into. Positions come from a fixed seed, so the same scatter renders on the server and in the browser and the motion is reproducible.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Analytics view
Embedding maps that animate points into their neighbourhoods.
Related patterns
- Progressive Image GenerationA generated picture resolves from blur to sharp across a few discrete refinement passes.
- Scan SweepA scan line travels across the surface being analyzed, then rests before the next pass.
- Sentiment Tint ShiftEach row's edge and wash ease from neutral toward the tone the classifier detected.