Macro Click

A macro close-up of a site builder: a click publishes, the status flips to Live, and the view pulls back.

Installation

$ pnpm dlx shadcn@latest add @remocn/macro-click

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MacroClick } from "@/components/remocn/macro-click";
 
const MacroClickScene = () => (
  <MacroClick
    title="One click. It's live."
    url="acme.dev/launch"
    heroLine="Ship the launch today."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MacroClick"
    component={MacroClickScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera starts tight on the builder toolbar; the cursor clicks the publish button (publishLabel), which shows busyLabel and then liveLabel, the URL fills in, and the view pulls back to reveal the published hero page. The title headline fades in and a toast closes the beat. Pass title, docTitle, url, heroLine and pages. The hero photo defaults to a file that only exists in the Remocn repo, so pass your own src. Ships dark by default and light.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props14

Prop	Type	Default
theme	"dark" \| "light""dark" Light or dark palette
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
title	string"One click. It's live." Headline that fades in after the pull-back
docTitle	string"Launch site" Document name in the builder toolbar
publishLabel	string"Publish" Idle label of the publish button
busyLabel	string"Publishing" Button label while publishing
liveLabel	string"Live" Button label once the site is live
url	string"remocn.dev/launch" Address shown once published
toast	string"Your site is live" Toast text after the site goes live
pages	string[]["Home", "Pricing", "Changelog", "Docs"] Page names in the builder navigation
heroLine	string"Ship the launch today." Hero headline on the published page
src	string— Hero image URL; default exists only in the Remocn repo
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

theme"dark" | "light"
Light or dark palette
Default"dark"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
titlestring
Headline that fades in after the pull-back
Default"One click. It's live."
docTitlestring
Document name in the builder toolbar
Default"Launch site"
publishLabelstring
Idle label of the publish button
Default"Publish"
busyLabelstring
Button label while publishing
Default"Publishing"
liveLabelstring
Button label once the site is live
Default"Live"
urlstring
Address shown once published
Default"remocn.dev/launch"
toaststring
Toast text after the site goes live
Default"Your site is live"
pagesstring[]
Page names in the builder navigation
Default["Home", "Pricing", "Changelog", "Docs"]
heroLinestring
Hero headline on the published page
Default"Ship the launch today."
srcstring
Hero image URL; default exists only in the Remocn repo
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters