# Browser Extension
URL: https://remocn.dev/docs/product-scenes/browser-extension

A browser extension highlights key lines in an article and saves a generated summary to a reading list.

- Install: `npx shadcn@latest add @remocn/browser-extension`
- Vibe: clean
- Natural length: 184f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/browser-extension
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BrowserExtension } from "@/components/remocn/browser-extension";

const BrowserExtensionScene = () => (
  <BrowserExtension
    title="Why small teams ship faster"
    extensionName="Acme"
    collection="Reading list"
    saveLabel="Save to Acme"
  />
);

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

A browser window shows an article; the cursor clicks the extension icon, a popup reads the page, three passages are highlighted, a bullet summary fills in and the save button files it into a collection, ending with a toast. Pass `title`, `paragraphs`, `highlights` (text fragments that appear inside the paragraphs), `summary` and `extensionName` for your own story. Ships light and dark.

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` | `"quarry.blog/notes/why-small-teams-ship-faster"` | Address shown in the browser bar |
| `siteName` | `string` | `"Quarry Journal"` | Site name in the page header |
| `kicker` | `string` | `"Notes · 6 min read"` | Small label above the article title |
| `title` | `string` | `"Why small teams ship faster"` | Article headline |
| `dek` | `string` | `"On the short loop between a decision and a deploy."` | Subheading under the headline |
| `author` | `string` | `"Priya Raman"` | Article author name |
| `date` | `string` | `"Oct 14, 2026"` | Article date label |
| `paragraphs` | `string[]` | `DEFAULT_PARAGRAPHS` | Article body paragraphs |
| `highlights` | `string[]` | `DEFAULT_HIGHLIGHTS` | Text fragments inside the paragraphs that get highlighted |
| `summary` | `string[]` | `DEFAULT_SUMMARY` | Bullet points the extension writes in its popup |
| `extensionName` | `string` | `"remocn"` | Name shown in the extension popup |
| `collection` | `string` | `"Reading list"` | Name of the list the summary is saved to |
| `saveLabel` | `string` | `"Save to remocn"` | Label on the save button |
| `highlightColor` | `string` | — | Highlight color; defaults to a tint of the accent |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A browser-extension, web-clipper or AI-summarizer launch where the value is acting on the page you are already on.
- A three-step payoff scene: highlight, summarize, save.
- A reading or research workflow video where the article is your own copy, passed as `paragraphs`.

## Don't use when
- The product is a web app with its own UI, not an overlay on another page — use `url-bar-cta`.
- You want a zoom tour over a screenshot — use `screenshot-tour`.
- You want a data table with filters and bulk actions — use `table-filter`.