Hatch Shade

A serif number is shaded in with pen-drawn hatch lines in three passes, then outlined and captioned.

Installation

$ pnpm dlx shadcn@latest add @remocn/hatch-shade

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { HatchShade } from "@/components/remocn/hatch-shade";
 
const HatchShadeScene = () => <HatchShade value="24" caption="new components, drawn for launch week" />;
 
export const RemotionRoot = () => (
  <Composition
    id="HatchShade"
    component={HatchShadeScene}
    durationInFrames={155}
    fps={30}
    width={1280}
    height={720}
  />
);

A serif number is drawn in with pen-stroke hatch lines in three passes - two crossing passes in ink, then a copper pass - before a crisp outline appears and the caption fades in. Pass value as a string and caption. It ships light and dark through theme.

Props5

Prop	Type	Default
value	string"24" The number to shade in, as a string.
caption	string"new components, drawn for launch week" Caption that fades in below.
accent	string"#3B5BFD" Accent color for the copper pass.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuestring
The number to shade in, as a string.
Default"24"
captionstring
Caption that fades in below.
Default"new components, drawn for launch week"
accentstring
Accent color for the copper pass.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"