URL Bar CTA

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

Installation

$ pnpm dlx 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.

Props16

Prop	Type	Default
url	string"remocn.dev" Address typed into the bar.
children	React.ReactNode— Custom page content. Replaces the built-in landing page.
typingSpeed	number1 Typing speed multiplier for the address.
showCursor	booleantrue 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	number1 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.

urlstring
Address typed into the bar.
Default"remocn.dev"
childrenReact.ReactNode
Custom page content. Replaces the built-in landing page.
typingSpeednumber
Typing speed multiplier for the address.
Default1
showCursorboolean
Show the blinking text caret in the address bar.
Defaulttrue
suggestionTitlestring
Title shown on the first suggestion row.
Default"Launch videos from components"
headlinestring
Headline of the landing page.
Default"Ship your launch video this afternoon."
bodystring
Body text under the headline.
Default"Remotion components you install with one command and own the code."
ctastring
Label of the primary button.
Default"Browse components"
commandstring
Install command shown on the page.
Default"npx shadcn add remocn/zoom-blur"
imagestring
Image shown in the clip card. Defaults to a repo-only file.
clipNamestring
Name shown on the clip card.
Default"Zoom Blur"
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
accentstring
Accent color for the button and highlights.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.