Mono Voice

Stacked lines shift voice mid-line from monospace to proportional type, ending on a large accent word.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MonoVoice } from "@/components/remocn/mono-voice";
 
const MonoVoiceScene = () => (
  <MonoVoice text={"Same script.\nA whole new\ndelivery."} highlight="delivery." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MonoVoice"
    component={MonoVoiceScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Lines rise in monospace, a sweep shifts each glyph into a proportional voice, and highlight grows large in the accent color. Pass text (newlines split lines) and highlight; it ships light and dark through theme.

Props6

Prop	Type	Default
text	string"Same script.\nA whole new\ndelivery." Lines separated by newlines
highlight	string"delivery." Final word set large 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

textstring
Lines separated by newlines
Default"Same script.\nA whole new\ndelivery."
highlightstring
Final word set large in the accent color
Default"delivery."
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"