Less More

A dimmed line is set against a bright accent line that lands below it.

Installation

$ pnpm dlx shadcn@latest add @remocn/less-more

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LessMore } from "@/components/remocn/less-more";
 
const LessMoreScene = () => (
  <LessMore less="Less explaining." more="More showing." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LessMore"
    component={LessMoreScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The less line enters and fades back while the more line lands below it in the accent color. Pass less and more for your own contrast pair. It ships in light and dark through the theme prop.

Props6

Prop	Type	Default
less	string"Less explaining." Line that dims.
more	string"More showing." Line that lands in the accent color.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

lessstring
Line that dims.
Default"Less explaining."
morestring
Line that lands in the accent color.
Default"More showing."
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"