# Inline Pill Takeover
URL: https://remocn.dev/docs/typography/inline-pill-takeover

A clipped pill expands inside a sentence, pushes the words apart, and takes over the frame

- Install: `npx shadcn@latest add @remocn/inline-pill-takeover`
- Vibe: premium
- Natural length: 30f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/inline-pill-takeover
```

## Usage

The line starts with a short pill between `before` and `after`. Its first animation changes explicit background width and height values, so the shape expands outward from center without scaling its contents. The full-size `insert` text appears through a hard opacity switch and is cropped by `overflow: hidden` until the pill opens around it. When that reveal finishes, a second local pill animation increases the background width and height through independent controls without changing the text's local font size. An independent camera wrapper begins its approach at the same time, cuts instantly to 86% of its final close-up, then settles to 100%. The pill and camera therefore move toward one another, and the pill keeps growing briefly after the camera settles. All timings were measured frame-by-frame from the reference footage.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { InlinePillTakeover } from "@/components/remocn/inline-pill-takeover";

const InlinePillTakeoverScene = () => (
  <InlinePillTakeover
    before="powering 20%"
    insert="Start building"
    after="of the Internet."
  />
);

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

### With Backdrop

The component paints no background. The reference pairs warm white type and pill with an orange radial glow.

```tsx
import { Composition } from "remotion";
import { InlinePillTakeover } from "@/components/remocn/inline-pill-takeover";
import { Backdrop } from "@/components/remocn/backdrop";

const InlinePillTakeoverScene = () => (
  <Backdrop
    fill={{
      type: "gradient",
      value:
        "radial-gradient(circle at 50% 108%, #ffd77a 0%, #ff6840 31%, #f13d21 78%)",
    }}
  >
    <InlinePillTakeover
      before="powering 20%"
      insert="Start building"
      after="of the Internet."
    />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` (required) | `string` | — | Text rendered before the expanding pill |
| `insert` (required) | `string` | — | Text centered inside the pill and revealed through its clip |
| `after` (required) | `string` | — | Text rendered after the expanding pill |
| `fontSize` | `number` | `52` | Base font size in pixels |
| `fontWeight` | `number` | `400` | CSS font-weight shared by the sentence and pill |
| `pillWidth` | `number` | `260` | Expanded pill width in pixels; tune this when changing insert text |
| `expandFrames` | `number` | `12` | Frames used for the initial width-and-height reveal |
| `pillRevealHeightScale` | `number` | `0.35` | Starting height as a fraction of the full pill height |
| `pillGrowAt` | `number` | `12` | Frame on which the local width-and-height growth begins |
| `pillGrowFrames` | `number` | `24` | Frames used for the local width-and-height growth |
| `pillGrowWidthScale` | `number` | `1.08` | Final local scale applied only to the pill width |
| `pillGrowHeightScale` | `number` | `1.16` | Final local scale applied only to the pill height |
| `outerExitFrames` | `number` | `18` | Frames used to blur and remove the outer copy |
| `takeoverAt` | `number` | `12` | Frame on which the camera approach begins |
| `takeoverScale` | `number` | `2.15` | Final scale held after the takeover settles |
| `blur` | `number` | `12` | Maximum blur applied to the disappearing outer text in pixels |
| `color` | `string` | `"#fff3df"` | Outer text color |
| `pillColor` | `string` | `"#fffaf0"` | Pill background color |
| `pillTextColor` | `string` | `"#1c1210"` | Pill text color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the component root |

## Use when
- A sentence should transform an inline placeholder into a CTA without cutting to a separate title card.
- You want the inserted label to physically push the surrounding copy apart before taking visual control.
- A short beat needs both an inline reveal and a decisive camera punch-in.

## Don't use when
- Only one phrase should change color without affecting layout — use `inline-highlight`.
- The inserted copy should replace text rather than displace it — use `caret-swap`.
- The camera should track a long growing line instead of one CTA — use `zoom-words`.