Query Cascade

Search queries rush past in a blur until one lands in the search box and resolves into an answer.

Installation

$ pnpm dlx shadcn@latest add @remocn/query-cascade

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { QueryCascade } from "@/components/remocn/query-cascade";
 
const QueryCascadeScene = () => (
  <QueryCascade
    hero="how to make a launch video"
    term="launch video"
    answerBefore="Your"
    answerAfter="is ready."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="QueryCascade"
    component={QueryCascadeScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

A long list of queries scrolls past with motion blur and decelerates until the hero query sits in a search box. The term inside it is highlighted, the box clears, and the line resolves into answerBefore, the term and answerAfter. Pass your own hero, term and answer words; it ships light and dark through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props11

Prop	Type	Default
queries	string[]QUERIES Search queries that scroll past. The hero is inserted among them.
hero	string"how to make a launch video" The query that lands in the search box.
term	string"launch video" Phrase inside the hero that is highlighted and kept for the answer.
answerBefore	string"Your" Answer text before the term.
answerAfter	string"is ready." Answer text after the term.
showLogo	booleantrue Show the built-in wordmark at the end.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.
speed	number1 Playback speed multiplier for the whole timeline.
accent	string— Declared but not used by the current source.

queriesstring[]
Search queries that scroll past. The hero is inserted among them.
DefaultQUERIES
herostring
The query that lands in the search box.
Default"how to make a launch video"
termstring
Phrase inside the hero that is highlighted and kept for the answer.
Default"launch video"
answerBeforestring
Answer text before the term.
Default"Your"
answerAfterstring
Answer text after the term.
Default"is ready."
showLogoboolean
Show the built-in wordmark at the end.
Defaulttrue
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1
accentstring
Declared but not used by the current source.