# Macro Click
URL: https://remocn.dev/docs/product-scenes/macro-click

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

- Install: `npx shadcn@latest add @remocn/macro-click`
- Vibe: tech
- Natural length: 122f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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 |

## Use when
- A publishing or site-builder launch where one click is the pitch.
- A macro-style opener that starts tight on a control and pulls back to reveal the result.
- A one-line promise overlaid on the finished page, set through `title`.

## Don't use when
- You want a browser window with a landing page whose CTA is clicked — use `url-bar-cta`.
- You want the whole editor with a timeline and export — use `timeline-editor`.
- You want a build log and deploy status — use `deploy-pipeline`.