Inline Pill Takeover
A clipped pill expands inside a sentence, pushes the words apart, and takes over the frame
Installation
$ pnpm dlx shadcn@latest add @remocn/inline-pill-takeoverUsage
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.
// 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.
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 |
|---|---|---|---|
beforerequired | string | — | Text rendered before the expanding pill |
insertrequired | string | — | Text centered inside the pill and revealed through its clip |
afterrequired | 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 |