Embossed Mark

The R mark and wordmark are debossed into a brushed grey surface as a raking light sweeps across

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { EmbossedMark } from "@/components/remocn/embossed-mark";
 
const EmbossedMarkScene = () => <EmbossedMark name="emocn" />;
 
export const RemotionRoot = () => (
  <Composition
    id="EmbossedMark"
    component={EmbossedMarkScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

A mark is pressed into a grey surface; a raking light sweeps around it, deepening the shadows. The camera eases out, a foil fill appears in the mark and the name letters fade in after it. Pass a custom logo node (square slot, black fill) to replace the default R and set name to the letters that follow. Ships dark and light via theme.

Props5

Prop	Type	Default
logo	React.ReactNode— Custom mark to deboss instead of the R (square slot, black fill).
name	string"emocn" Letters printed after the mark; with the default R this reads Remocn.
accent	string"#3B5BFD" Color stop in the foil fill.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
speed	number1 Playback speed multiplier for the whole timeline.

logoReact.ReactNode
Custom mark to deboss instead of the R (square slot, black fill).
namestring
Letters printed after the mark; with the default R this reads Remocn.
Default"emocn"
accentstring
Color stop in the foil fill.
Default"#3B5BFD"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1