# URL Bar CTA
URL: https://remocn.dev/docs/ui-blocks/url-bar-cta

A URL bar types an address and docks into a browser window, then a landing page loads in.

- Install: `npx shadcn@latest add @remocn/url-bar-cta`
- Vibe: clean
- Natural length: 72f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/url-bar-cta
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { UrlBarCta } from "@/components/remocn/url-bar-cta";

const UrlBarCtaScene = () => (
  <UrlBarCta
    url="remocn.dev"
    headline="Ship your launch video this afternoon."
    cta="Browse components"
    image="/clip-thumb.jpg"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="UrlBarCta"
    component={UrlBarCtaScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A large address bar types the `url` with a suggestion list, presses Enter and docks into the toolbar of a browser window. The landing page then fades up with the `headline`, `body`, a `cta` button, an install `command` and a clip card. Pass your own `url`, `headline`, `body`, `cta` and `command`, an `image` for the clip card, or `children` to replace the page. The default clip image is a `staticFile` that only exists in the Remocn repo. It ships light and dark through `theme`. The length depends on the `url` length and `typingSpeed`.

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 |
|---|---|---|---|
| `url` | `string` | `"remocn.dev"` | Address typed into the bar. |
| `children` | `React.ReactNode` | — | Custom page content. Replaces the built-in landing page. |
| `typingSpeed` | `number` | `1` | Typing speed multiplier for the address. |
| `showCursor` | `boolean` | `true` | Show the blinking text caret in the address bar. |
| `suggestionTitle` | `string` | `"Launch videos from components"` | Title shown on the first suggestion row. |
| `headline` | `string` | `"Ship your launch video this afternoon."` | Headline of the landing page. |
| `body` | `string` | `"Remotion components you install with one command and own the code."` | Body text under the headline. |
| `cta` | `string` | `"Browse components"` | Label of the primary button. |
| `command` | `string` | `"npx shadcn add remocn/zoom-blur"` | Install command shown on the page. |
| `image` | `string` | — | Image shown in the clip card. Defaults to a repo-only file. |
| `clipName` | `string` | `"Zoom Blur"` | Name shown on the clip card. |
| `theme` | `"light" \| "dark"` | `"light"` | Color scheme. Ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the button and highlights. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A call-to-action beat that ends on a web address and the page it opens.
- A launch video that should show the site actually loading, with a headline, body and primary button.
- A closing scene that pairs a landing page with an install command.

## Don't use when
- You only need an address-like search pill that types and reveals a panel — use `search-reveal`.
- The destination is a mobile app listing, not a web page — use `app-store-listing`.
- You want to tour inside an existing page screenshot — use `screenshot-tour`.