Quadtree Mark

The R mark is built from subdividing pixel squares that refine into a sharp logo, then the name appears.

Installation

$ pnpm dlx shadcn@latest add @remocn/quadtree-mark

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { QuadtreeMark } from "@/components/remocn/quadtree-mark";
 
const QuadtreeMarkScene = () => (
  <QuadtreeMark
    name="emocn"
    accent="#3B5BFD"
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="QuadtreeMark"
    component={QuadtreeMarkScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Coarse pixel squares subdivide step by step around the R mark until the edges are sharp, the camera pans, and the name appears beside the mark. Pass logo as an SVG path (or several) to subdivide your own mark and name for the text after it. Ships light and dark.

Props5

Prop	Type	Default
logo	string \| string[]— SVG path or paths of the mark to subdivide; defaults to the R.
name	string"emocn" Text set after the mark; emocn reads as the logo.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

logostring | string[]
SVG path or paths of the mark to subdivide; defaults to the R.
namestring
Text set after the mark; emocn reads as the logo.
Default"emocn"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1