Logo Assemble

Installation

$ pnpm dlx shadcn@latest add @snapcn/logo-assemble

Component code

The exact file shadcn add copies into your project.

Usage

A logo build in three beats:

1. Orbit — a single ring of image cards revolves around the centre, holding a line of middleText in the clear middle.
2. Collapse — the ring spins inward and drains to the centre, the cards vanishing.
3. 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