Ruler Align
A ruler slides under a messy line of text and straightens its letters onto the edge.
$ pnpm dlx shadcn@latest add @remocn/ruler-alignUsage
// src/Root.tsx
import { Composition } from "remotion";
import { RulerAlign } from "@/components/remocn/ruler-align";
const RulerAlignScene = () => <RulerAlign text="Made to measure." accent="#3B5BFD" />;
export const RemotionRoot = () => (
<Composition
id="RulerAlign"
component={RulerAlignScene}
durationInFrames={225}
fps={30}
width={1280}
height={720}
/>
);The letters appear scattered at uneven heights, a ruler slides in beneath them, levels, then lifts so high letters drop onto its edge. Two taps then nudge the spacing tight. Pass text for your own line; letters without descenders sit best on the edge. It takes a theme prop and ships light and dark.
Props4
| Prop | Type | Default |
|---|---|---|
| text | string"Made to measure." The line the ruler straightens. Letters without descenders sit best on the edge. | |
| accent | string"#3B5BFD" The ruler's straight edge. | |
| theme | "dark" | "light""dark" Light or dark ground; the component ships both. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- textstring
The line the ruler straightens. Letters without descenders sit best on the edge.
Default
"Made to measure." - accentstring
The ruler's straight edge.
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark ground; the component ships both.
Default
"dark" - speednumber
Playback speed multiplier for the whole timeline.
Default
1