Search Results Populate
A query typing itself, results streaming back, and the list re-ranking to put the best match on top.
SceneScenes
$ 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. |