Search Results Populate
A query typing itself, results streaming back, and the list re-ranking to put the best match on top.
Scene
$ npx remotion-ui@latest add search-results-populateThe query types itself, an indeterminate bar runs while the index works, results stream in one by one, and then the list re-ranks so the best match rises to the top.
The order of results is arrival order (the order the index handed them back),
and score decides where each one ends up. Give the highest score to something
other than the first entry and you get the beat this component exists for: a
fourth arrival climbing past three rows to first place. Pass them already sorted
and the re-rank is a no-op.
Rows are never re-sorted in the DOM. Each one interpolates from its arrival slot to its ranked slot, so React does not remount a row mid-flight and the travel stays continuous even when two rows swap.
Typing is setup here, not the subject. When the fields themselves are the story
(focus, validation, a submit button arming), use form-fill-sequence.
The re-rank is the payoff: give the highest score to something other than the first entry and a late arrival climbs past the rows above it. Rows interpolate from arrival slot to ranked slot rather than being re-sorted, so React never remounts one mid-flight.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/search-results-populate- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: query, results, placeholder, countLabel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { SearchResultsPopulate } from "@/remotion/scenes/search-results-populate";
<SearchResultsPopulate
query="transition between scenes"
results={[
{ title: "Slide transition", detail: "docs/transitions/slide", score: 0.64 },
{ title: "Cross-fade two compositions", detail: "docs/transitions/fade", score: 0.98 },
]}
holdSeconds={4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| query | string | "transition between scenes" | Text typed into the field. |
| results | SearchResult[] | 5 sample results | Title, detail line and 0–1 score. Array order is arrival order; score decides the final rank. |
| placeholder | string | "Search the docs" | Greyed prompt shown before the first character lands. |
| countLabel | string | "{n} results" | Line above the list. {n} is replaced with the result count. |
| topLabel | string | "Best match" | Tag pinned to the top-ranked result once the list settles. |
| charsPerSecond | number | 30 | Typing rate for the query. |
| searchSeconds | number | 0.34 | Seconds the indeterminate bar runs between the query and the first row. |
| holdSeconds | number | - | Seconds the ranked list holds before the card retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Active field border, top-result tag and score. |
| backgroundColor | string | - | Page behind the card. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |