Thread Weave

A figure or mark is woven row by row on a loom of cream cells, then a caption settles.

Installation

$ pnpm dlx shadcn@latest add @remocn/thread-weave

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ThreadWeave } from "@/components/remocn/thread-weave";
 
const ThreadWeaveScene = () => (
  <ThreadWeave value="24" caption="frames per second" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ThreadWeave"
    component={ThreadWeaveScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

Warp threads set up the loom, then every row of the pattern is woven across in alternating directions until the figure appears in blue and orange cells. A caption settles under it. Pass value and caption, or set motif to mark to weave the Remocn mark; it ships light and dark through theme.

Props6

Prop	Type	Default
value	string"24" Short figure to weave, as text.
motif	"value" \| "mark""value" Weave the value as text or the Remocn mark.
caption	string"frames per second" Small line that settles under the cloth.
accent	string"#3B5BFD" Accent color for highlights and small marks.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuestring
Short figure to weave, as text.
Default"24"
motif"value" | "mark"
Weave the value as text or the Remocn mark.
Default"value"
captionstring
Small line that settles under the cloth.
Default"frames per second"
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"