Mono Settle

Two lines set in monospace settle into proportional type, with the last words in the accent.

Installation

$ pnpm dlx shadcn@latest add @remocn/mono-settle

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MonoSettle } from "@/components/remocn/mono-settle";
 
const MonoSettleScene = () => (
  <MonoSettle lines={["From your editor", "to the edit."]} highlight="the edit." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MonoSettle"
    component={MonoSettleScene}
    durationInFrames={125}
    fps={30}
    width={1280}
    height={720}
  />
);

The lines rise in monospace, a wave of morphing turns each glyph into proportional type, and highlight takes the accent color. Pass lines and highlight; it ships light and dark through theme.

Props6

Prop	Type	Default
lines	string[]["From your editor", "to the edit."] Lines of text shown top to bottom
highlight	string"the edit." Words in the lines shown in the accent color
accent	string— Accent color (any valid CSS color)
background	string— Overrides the theme's stage color
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

linesstring[]
Lines of text shown top to bottom
Default["From your editor", "to the edit."]
highlightstring
Words in the lines shown in the accent color
Default"the edit."
accentstring
Accent color (any valid CSS color)
backgroundstring
Overrides the theme's stage color
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"