# Logo Enter
URL: https://remocn.dev/docs/social/logo-enter

A stacked group of round brand chips that spring in one-by-one, then hold

- Install: `npx shadcn@latest add @remocn/logo-enter`
- Vibe: social
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/logo-enter
```

## Usage

Standalone in a Remotion `<Composition>` — ships with a sample set of AI-tool marks so the video renders immediately after install:

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LogoEnter } from "@/components/remocn/logo-enter";

const LogoEnterScene = () => (
  <LogoEnter
    diameter={118}
    overlap={38}
    ringColor="#0B0B0C"
    orientation="horizontal"
    stagger={7}
    speed={1}
  />
);

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

Each chip is a round, ring-bordered circle that springs in with a scale-up and a small slide, staggered one after another, then holds. The exit is left to your timeline — drop it in a `TransitionSeries.Sequence` and pair it with any transition.

### Swap the logos

The `logos` prop defaults to the exported `SAMPLE_LOGOS`. Each entry is `{ mark, bg }` — `mark` is any React node (an inline SVG works best), `bg` is the chip's fill. Edit the copied file to feature your own marks:

```tsx
import { LogoEnter, type Logo } from "@/components/remocn/logo-enter";

const MY_LOGOS: Logo[] = [
  { mark: <MyBrandMark />, bg: "#ffffff" },
  { mark: <PartnerMark />, bg: "#0A0A0A" },
];

<LogoEnter logos={MY_LOGOS} />
```

### With Backdrop

Renders transparent — supply the background via `Backdrop`:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { LogoEnter } from "@/components/remocn/logo-enter";

<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <LogoEnter orientation="horizontal" />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `logos` | `Logo[]` | `SAMPLE_LOGOS` | Chips to stack — each is { mark: ReactNode; bg?: string }. Defaults to a sample set of AI-tool marks; swap for your own |
| `diameter` | `number` | `118` | Chip diameter in px — the mark is sized to 52% of it |
| `overlap` | `number` | `38` | How many px each chip tucks under the previous one |
| `ringColor` | `string` | `"#0B0B0C"` | Color of the 5px ring around each chip |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Stacking axis — row (overlap left, rise in) or column (overlap up, slide in) |
| `stagger` | `number` | `7` | Frames between each chip springing in |
| `speed` | `number` | `1` | Animation speed multiplier |

## Notes

- **Own your marks:** the four sample marks (Claude, Codex, Cursor, Grok) are inline SVGs in the copied file — edit, reorder, or replace them directly. Each fills its chip via `width="100%"` so it scales with `diameter`.
- **Transparent:** the component paints no background or scrim — wrap it in `Backdrop` to set the scene.
- **Enter-only:** chips spring in and hold; compose the exit with a `TransitionSeries` transition.

## Use when
- Showing a cluster of brand/partner/integration logos arriving together ("works with…", an AI-tool lineup, an icon cloud).
- A positioning or proof beat needs several marks to land as a stacked, overlapping group.
- You want logo chips that spring in and hold, with the exit owned by your `TransitionSeries` transition.

## Don't use when
- You need a single product logo or wordmark lockup — this is a multi-chip cluster, not one mark; use a logo sting (`orbit-lock`, `spotlight`, `anamorphic-flare`) or resolve kinetic text (`kinetic-center-build`, `per-character-rise`) into the name.
- You're depicting one specific brand's product UI — use the matching card (`chat-gpt`, `claude-code`, `v0`, `opencode`).
- The logos must orbit or scatter in 3D rather than stack — compose your own layout; this one stacks on a single axis.