Semantic Search Rerank
First-pass hits travel to their meaning-ranked places while each relevance bar grows to its score.
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, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Semantic Search Rerank
*
* Keyword hits settling into meaning order: the rows travel to their new
* places on a shared layout animation, and each relevance bar grows toAbout this pattern
Two-stage retrieval made visible: cheap keyword hits land immediately, a reranker scores them a moment later, and the panel reorders itself instead of blinking to a new list. Every item takes a shared layout animation to its new slot, so a reader who was already looking at the third result can follow it up or down rather than having to re-read the page. Positions animate but boxes do not stretch, and the relevance bars grow behind the moves — the number that justified the reorder arrives with it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Search results
Result lists that re-sort in place as ranking updates rather than repainting wholesale.
Related patterns
- Sentiment Tint ShiftEach row's edge and wash ease from neutral toward the tone the classifier detected.
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.