# Photo Halo
URL: https://remocn.dev/docs/logo-stings/photo-halo

A headline pops up among scattered photos, which gather into a halo of thumbnails beside the logo.

- Install: `npx shadcn@latest add @remocn/photo-halo`
- Vibe: premium
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/photo-halo
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhotoHalo } from "@/components/remocn/photo-halo";

const PhotoHaloScene = () => (
  <PhotoHalo
    words={["Launch", "films", "for", "everything", "you", "ship"]}
    accentWord={3}
    images={["https://example.com/a.jpg", "https://example.com/b.jpg"]}
  />
);

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

A line of words appears while photo cards pop around it, then the text drops away and the photos converge into a row of circular thumbnails with the logo landing beside them. Pass `words`, `accentWord` for the highlighted word, and `images` as URLs (the default photos only exist in the Remocn repo). Ships light and dark.

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 |
|---|---|---|---|
| `words` | `string[]` | `DEFAULT_WORDS` | Headline words shown before the photos converge. |
| `accentWord` | `number` | `3` | Index of the word drawn in the accent colour. |
| `images` | `string[]` | — | Photo URLs; falls back to Remocn's demo photos when empty. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `background` | `string` | — | Stage fill colour; overrides the theme background. |
| `ink` | `string` | — | Headline text colour. |
| `blooms` | `string[]` | — | Colours for the shader ground's light blooms. |
| `ground` | `GshPresetId` | — | Shader preset id for the gradients.sh background ground. |
| `groundParams` | `Partial<GradientParams>` | — | Custom shader parameters for the ground, used instead of the theme default. |

## Use when
- A community or customer beat: a headline over real faces or screenshots that gather beside the logo.
- A launch recap that turns many photos into a compact social-proof row.
- A closing lockup that needs thumbnails of people or product next to the brand.

## Don't use when
- You have no imagery to show — use `spell-out`.
- Cards should explode through 3D space around a headline — use `word-burst-cards`.
- The closing lockup is a partnership between two brands — use `collab-lockup`.