# Serif Rise
URL: https://remocn.dev/docs/typography/serif-rise

A large serif line rises into place, 'From rough cut to final cut.', end phrase in red

- Install: `npx shadcn@latest add @remocn/serif-rise`
- Vibe: premium
- Natural length: 92f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/serif-rise
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SerifRise } from "@/components/remocn/serif-rise";

const SerifRiseScene = () => (
  <SerifRise lines={["From rough cut", "to final cut."]} highlight="final cut." />
);

export const RemotionRoot = () => (
  <Composition
    id="SerifRise"
    component={SerifRiseScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Large serif lines rise into place one after another under thin rules, then a sweep lights the highlight phrase in the accent colour. Pass `lines` and `highlight`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `["From rough cut", "to final cut."]` | Headline lines, each rising in turn. |
| `highlight` | `string` | `"final cut."` | Phrase set in the accent colour. |
| `accent` | `string` | — | Highlight colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- An emotional or editorial line, like a before-and-after claim, that should feel crafted rather than techy.
- A closing statement where the final phrase is emphasised in colour.

## Don't use when
- The line is a bold sans statement that should slam in — use `full-bleed-type`.
- You want a soft blur-in instead of a rise — use `focus-blur-resolve`.