Logo Enter

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

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:

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>

Props7

Prop	Type	Default
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	number118 Chip diameter in px — the mark is sized to 52% of it
overlap	number38 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	number7 Frames between each chip springing in
speed	number1 Animation speed multiplier

logosLogo[]
Chips to stack — each is { mark: ReactNode; bg?: string }. Defaults to a sample set of AI-tool marks; swap for your own
DefaultSAMPLE_LOGOS
diameternumber
Chip diameter in px — the mark is sized to 52% of it
Default118
overlapnumber
How many px each chip tucks under the previous one
Default38
ringColorstring
Color of the 5px ring around each chip
Default"#0B0B0C"
orientation"horizontal" | "vertical"
Stacking axis — row (overlap left, rise in) or column (overlap up, slide in)
Default"horizontal"
staggernumber
Frames between each chip springing in
Default7
speednumber
Animation speed multiplier
Default1

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.