# Up Close
URL: https://remocn.dev/docs/media/up-close

An image starts zoomed in on one detail, then pulls back into a framed shot with a second caption.

- Install: `npx shadcn@latest add @remocn/up-close`
- Vibe: clean
- Natural length: 78f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/up-close
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { UpClose } from "@/components/remocn/up-close";

const UpCloseScene = () => (
  <UpClose
    src="/shots/product.png"
    close="Up close, it’s code."
    wide="From here, it’s your launch."
    focus={{ x: 0.58, y: 0.52 }}
  />
);

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

The image fills the frame zoomed in on the `focus` point under the `close` caption. It then pulls back into a framed shot and the `wide` caption writes in while the first caption lifts. Pass your own image through `src` and tune `zoom` and `focus`; the default is a `staticFile` image from the Remocn repo. The timeline scales with the composition length, and it ships light and dark through `theme`.

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 |
|---|---|---|---|
| `close` | `string` | `"Up close, it’s code."` | Caption shown while zoomed in. |
| `wide` | `string` | `"From here, it’s your launch."` | Caption shown after pulling back. |
| `src` | `string` | — | Image URL. Defaults to a repo-only file. |
| `aspect` | `number` | `1200 / 630` | Aspect ratio of the image. |
| `focus` | `{ x: number; y: number }` | `{ x: 0.58, y: 0.52 }` | Point of interest as fractions of width and height, 0 to 1. |
| `zoom` | `number` | `3` | Initial zoom factor on the focus point. |
| `accent` | `string` | — | Accent color for the zoom readout. Defaults depend on theme. |
| `background` | `string` | — | Solid background. Use 'transparent' to drop the ground. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |

## Use when
- A two-part line such as up close it is one thing, from afar another, anchored on a real image.
- Highlighting a detail of a screenshot, like code in a product, before revealing the full picture.
- A calm, two-caption beat that moves from macro to wide.

## Don't use when
- The sentence should end with a thumbnail growing into the image — use `looks-like-this`.
- A question should turn into an answer next to the image — use `shot-answers`.
- Several regions need visiting in turn — use `screenshot-tour`.