# Cover Ring
URL: https://remocn.dev/docs/typography/cover-ring

An audio-style bar meter appears above a headline line that collapses into a closing caption over green light.

- Install: `npx shadcn@latest add @remocn/cover-ring`
- Vibe: premium
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cover-ring
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoverRing } from "@/components/remocn/cover-ring";

const CoverRingScene = () => (
  <CoverRing
    images={[staticFile("shots/one.jpg"), staticFile("shots/two.jpg")]}
    line="Launch videos aren't edited anymore"
    caption="They're composed."
  />
);

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

Photo tiles flip in around a setup line, the line blurs away as the tiles collapse into a bar meter, and the caption lands with a pulse. Pass `images` with your own image paths (the defaults only exist in the Remocn repo), plus `line` and `caption`; 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 |
|---|---|---|---|
| `images` | `string[]` | — | Image URLs for the tiles; pass your own, defaults are remocn-only |
| `line` | `string` | `"Launch videos aren't edited anymore"` | Setup line shown over the tiles |
| `caption` | `string` | `"They're composed."` | Closing caption shown after the collapse |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `background` | `string` | — | Overrides the theme's stage color |
| `ink` | `string` | — | Text color override |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `fog` | `string[]` | — | Gradient colors for the ground; overrides the theme |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |

## Use when
- A launch statement over a collage of product photos that collapses into a punchline caption.
- A beat that moves from a long setup line to a short payoff with an audio-style meter.

## Don't use when
- You have no photos and want text only - use `staggered-fade-up`.
- You want a typed caption instead of a collapse - use `cooling-type`.
- The scene is a single line with no setup - use `tracking-in`.