# Less More
URL: https://remocn.dev/docs/typography/less-more

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

- Install: `npx shadcn@latest add @remocn/less-more`
- Vibe: clean
- Natural length: 104f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A short manifesto beat that sets old effort against new payoff.
- A two-line contrast in a pricing or positioning scene.
- A quick tagline that needs hierarchy, with the weaker idea dimmed.

## Don't use when
- You have a longer list of points to step through — use `what-sticks`.
- The contrast should show as an edit — use `diff-swap`.
- A word should flip rather than a full line — use `pinned-word`.