Logo Construct

A blueprint grid draws the logo's construction lines, then the logo inks in and the wordmark settles.

Installation

$ pnpm dlx shadcn@latest add @remocn/logo-construct

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LogoConstruct } from "@/components/remocn/logo-construct";
 
const LogoConstructScene = () => (
  <LogoConstruct
    name="emocn"
    accent="#3B5BFD"
    theme="light"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LogoConstruct"
    component={LogoConstructScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);

A blueprint grid appears and the construction of the R is drawn: circles, guides, dimensions and an outline, which then fills with a mesh as the camera pulls back and the wordmark inks in. Pass name for the letters after the R, or logo to replace the R. The theme prop switches blueprint paper (default) to drafting film on black.

Props5

Prop	Type	Default
logo	React.ReactNode— Replaces the constructed R; your logo settles in its place.
name	string"emocn" Letters set after the R, on its baseline.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"light" \| "dark""light" Light is blueprint paper (default); dark is drafting film on black.

logoReact.ReactNode
Replaces the constructed R; your logo settles in its place.
namestring
Letters set after the R, on its baseline.
Default"emocn"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"light" | "dark"
Light is blueprint paper (default); dark is drafting film on black.
Default"light"