# Device Grows Around
URL: https://remocn.dev/docs/product-scenes/device-grows-around

A live plays counter card grows a device frame around it, with range tabs and delta stats

- Install: `npx shadcn@latest add @remocn/device-grows-around`
- Vibe: data
- Natural length: 165f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/device-grows-around
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DeviceGrowsAround } from "@/components/remocn/device-grows-around";

const DeviceGrowsAroundScene = () => (
  <DeviceGrowsAround
    name="Launch Film"
    subtitle="Studio export"
    metric={48213}
    theme="dark"
  />
);

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

A project name and subtitle type in, a plays counter card appears, then a phone frame grows around it as the camera pushes back to show a chart, range tabs, a list and an all-time total counting up. Pass your own `name`, `subtitle`, `metric`, `delta`, `total` and `gain`. It ships dark and light through the `theme` prop.

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"` | Dark or light styling for the device and stage. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the typed text and highlights. |
| `name` | `string` | `"Launch Film"` | Project name typed in at the start. |
| `badge` | `string` | `"v2"` | Small badge shown next to the name; empty hides it. |
| `subtitle` | `string` | `"Remocn Studio export"` | Subtitle typed in under the name. |
| `metric` | `number` | `48213` | Main plays number shown on the counter card. |
| `delta` | `string` | `"6,904 (16.7%) today"` | Change text shown under the main number. |
| `total` | `number` | `1284507` | All-time total the final counter rolls up to. |
| `gain` | `number` | `412880` | Gain figure shown next to the total, counted up. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader preset parameters. |

## Use when
- A creator or media analytics launch that zooms out from one metric card to reveal the full app screen around it.
- A beat that types a project name and subtitle, then shows a big counter with a delta and chart.
- A portrait or landscape reveal where a phone bezel appears around a screen and the camera pulls back.

## Don't use when
- You want a phone screen scrolling through several app states — use `phone-scroll` instead.
- The focus is a funnel or breakdown chart rather than a growing device — use `analytics-funnel` instead.
- You want a fast headline counter with no device frame — use `live-ticker` instead.