Logos
Logo Assemble
A ring of image cards revolves and drains to the centre, giving birth to a simple logo that slides left as the brand name reveals to its right
- Type
- Animation
- Duration
- 3.6s
- Category
- Logos
- Source
- snapcn
Install
Installation
$ pnpm dlx shadcn@latest add @snapcn/logo-assembleNeeds an existing Remotion project and a components.json. Two-minute setup if this is your first snapcn component.
Component code
The exact file shadcn add copies into your project.
Usage
A logo build in three beats:
- Orbit — a single ring of image cards revolves around the centre, holding a line of
middleTextin the clear middle. - Collapse — the ring spins inward and drains to the centre, the cards vanishing.
- Reveal — a simple, monochrome logo is born at the centre, then slides left, and the brand name reveals to its right.
Pass your logoSrc (kept simple/monochrome), your brandName, the middleText, and the
images that ride the ring. Everything is frame-driven, so scrubbing and rendering are
deterministic.
// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { LogoAssemble } from "@/components/snap-cn/logo-assemble";
const Sting = () => (
<LogoAssemble
logoSrc={staticFile("logo/snapcn-white.png")}
brandName="snapcn"
middleText={"Cinematic components\nfor React"}
/>
);
export const RemotionRoot = () => (
<Composition
id="LogoAssemble"
component={Sting}
durationInFrames={108}
fps={30}
width={1280}
height={720}
/>
);Assets take a root-relative /… path (served by Next in the Player, rewritten through
staticFile() in a render) or an http(s)/data URL.
This is a fast collapse and a scale-on-imagery landing, which a live <Player> mispaces on a
high-refresh display — so the docs preview plays the rendered mp4. Re-render after any change:
pnpm run render:previews --only logo-assemble.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logoSrc | string | "/logo/snapcn-white.png" | The logo mark, kept simple/monochrome on the dark backdrop |
brandName | string | "snapcn" | Brand name that reveals to the right of the settled logo |
middleText | string | "Cinematic components\nfor React" | Text held in the middle of the ring while the images revolve (\n for line breaks) |
images | string[] | — | Image URLs for the ring, cycled around the circle. Defaults to the showcase assets |
count | number | 10 | How many image cards ride the ring |
background | string | theme.background (dark) | Backdrop color behind the ring |
speed | number | 1 | Global playback multiplier applied to the whole sequence |
className | string | — | Optional className passed to the outer wrapper |
theme | Partial<SnapCnTheme> | — | Design-system token overrides. Anything you leave out falls back to the shadcn defaults |
mode | "light" | "dark" | — | Which end of the design system to resolve tokens against |
Frequently asked questions
How do I add Logo Assemble to a Remotion project?
Run npx shadcn@latest add @snapcn/logo-assemble. The source is copied into components/snap-cn/ (or wherever your components.json points) with anything it depends on, and you own the code from then on — there is no runtime package to keep installed.
What is Logo Assemble?
Logo Assemble is a Remotion logo assemble animation for React. A ring of image cards revolves and drains to the centre, giving birth to a simple logo that slides left as the brand name reveals to its right.
What do I need before using Logo Assemble?
An existing Remotion project (npx create-video@latest) with a components.json. shadcn init does not recognise Remotion, so the installation guide has you write that file by hand — it takes two minutes. The component is MIT licensed and free.