Glyph Matrix

A round LED dot matrix counts 3-2-1, then its dots hop into a pixel R and the name types in.

Installation

$ pnpm dlx shadcn@latest add @remocn/glyph-matrix

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GlyphMatrix } from "@/components/remocn/glyph-matrix";
 
const GlyphMatrixScene = () => (
  <GlyphMatrix
    label="remocn"
    accent="#3B5BFD"
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GlyphMatrix"
    component={GlyphMatrixScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A round LED dot matrix shows 3, 2, 1, then its dots arc and hop into a pixel R, which slides aside as label types in beside it. Pass label; Remocn types emocn so the lockup reads as the real logo. Ships light and dark.

Props4

Prop	Type	Default
label	string"remocn" Word typed in beside the pixel R; Remocn types emocn.
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	"dark" \| "light""dark" Dark or light palette and ground.

labelstring
Word typed in beside the pixel R; Remocn types emocn.
Default"remocn"
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"dark" | "light"
Dark or light palette and ground.
Default"dark"