# Query Cascade
URL: https://remocn.dev/docs/ui-blocks/query-cascade

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

- Install: `npx shadcn@latest add @remocn/query-cascade`
- Vibe: tech
- Natural length: 148f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `boolean` | `true` | 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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `accent` | `string` | — | Declared but not used by the current source. |

## Use when
- A search or answer-engine launch showing the one question that matters among many.
- A beat that turns a user query into a statement, such as a search for a result that then reads as done.
- A fast, kinetic opener that settles on a single phrase.

## Don't use when
- The answer should come with cited sources — use `ai-answer-sources`.
- A search pill should type and reveal a graphic panel — use `search-reveal`.
- You want a smooth feed scroll on a phone — use `phone-scroll`.