Browser Extension

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

Installation

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

Props19

Prop	Type	Default
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	number1 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

urlstring
Address shown in the browser bar
Default"quarry.blog/notes/why-small-teams-ship-faster"
siteNamestring
Site name in the page header
Default"Quarry Journal"
kickerstring
Small label above the article title
Default"Notes · 6 min read"
titlestring
Article headline
Default"Why small teams ship faster"
dekstring
Subheading under the headline
Default"On the short loop between a decision and a deploy."
authorstring
Article author name
Default"Priya Raman"
datestring
Article date label
Default"Oct 14, 2026"
paragraphsstring[]
Article body paragraphs
DefaultDEFAULT_PARAGRAPHS
highlightsstring[]
Text fragments inside the paragraphs that get highlighted
DefaultDEFAULT_HIGHLIGHTS
summarystring[]
Bullet points the extension writes in its popup
DefaultDEFAULT_SUMMARY
extensionNamestring
Name shown in the extension popup
Default"remocn"
collectionstring
Name of the list the summary is saved to
Default"Reading list"
saveLabelstring
Label on the save button
Default"Save to remocn"
highlightColorstring
Highlight color; defaults to a tint of the accent
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters