Logo Enter · remocn

Installation

$ pnpm dlx 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:

// 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:

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:

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.