# Point Intro
URL: https://remocn.dev/docs/typography/point-intro

A headline is written word by word and a colored point lands after it: 'Introducing Remocn 2.0.'

- Install: `npx shadcn@latest add @remocn/point-intro`
- Vibe: paper
- Natural length: 150f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/point-intro
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PointIntro } from "@/components/remocn/point-intro";

const PointIntroScene = () => <PointIntro title="Introducing Acme 2.0" accent="#3B5BFD" />;

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

A colored point appears alone, breathes, then glides to the end of the line while the headline is written word by word and the point settles as its full stop. A grey subline fades in last. Pass `title` and `subline` for your own announcement; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Introducing remocn 2.0"` | The headline, written out word by word. The point lands after it. |
| `subline` | `string` | `"Animated components for Remotion. Free and open source."` | Small grey line under the headline. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the point. |
| `theme` | `"dark" \| "light"` | `"light"` | Colour scheme; ships light and dark. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |

## Use when
- A product announcement opener where one confident headline is written out and a colored point lands as the full stop.
- A release beat that wants a calm, paper-like feel with a small grey subline under the title.

## Don't use when
- You need several headlines swapping in sequence — use `rewrite-bars`.
- The headline should snap in with energy rather than being written calmly — use `staggered-fade-up`.