Shed Weight

One line repeats at growing sizes, each cut redrawn with its own optical weight, with size labels.

Installation

$ pnpm dlx shadcn@latest add @remocn/shed-weight

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ShedWeight } from "@/components/remocn/shed-weight";
 
const ShedWeightScene = () => <ShedWeight text="Sharp at any size." sizes={5} />;
 
export const RemotionRoot = () => (
  <Composition
    id="ShedWeight"
    component={ShedWeightScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);

The same line is stacked at a growing size ladder, each row drawing in under a hairline rule with a small point-size label, and every size uses its own optical cut. Pass text and sizes for the number of rows; showSizes toggles the labels. It takes a theme prop and ships light and dark.

Props7

Prop	Type	Default
text	string"Sharp at any size." The line repeated down the size ladder.
sizes	number6 How many rows in the ladder, from 2 to 9.
showSizes	booleantrue Show the small point-size label beside each row.
accent	string— Spot color for the largest row, its rule and label.
background	string— Override the background color; use "transparent" to composite over your own.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.

textstring
The line repeated down the size ladder.
Default"Sharp at any size."
sizesnumber
How many rows in the ladder, from 2 to 9.
Default6
showSizesboolean
Show the small point-size label beside each row.
Defaulttrue
accentstring
Spot color for the largest row, its rule and label.
backgroundstring
Override the background color; use "transparent" to composite over your own.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"