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-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}
  />
);

Props21

Prop	Type	Default
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	number52 Base font size in pixels
fontWeight	number400 CSS font-weight shared by the sentence and pill
pillWidth	number260 Expanded pill width in pixels; tune this when changing insert text
expandFrames	number12 Frames used for the initial width-and-height reveal
pillRevealHeightScale	number0.35 Starting height as a fraction of the full pill height
pillGrowAt	number12 Frame on which the local width-and-height growth begins
pillGrowFrames	number24 Frames used for the local width-and-height growth
pillGrowWidthScale	number1.08 Final local scale applied only to the pill width
pillGrowHeightScale	number1.16 Final local scale applied only to the pill height
outerExitFrames	number18 Frames used to blur and remove the outer copy
takeoverAt	number12 Frame on which the camera approach begins
takeoverScale	number2.15 Final scale held after the takeover settles
blur	number12 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	number1 Playback speed multiplier
className	string— Optional className passed to the component root

beforerequiredstring
Text rendered before the expanding pill
insertrequiredstring
Text centered inside the pill and revealed through its clip
afterrequiredstring
Text rendered after the expanding pill
fontSizenumber
Base font size in pixels
Default52
fontWeightnumber
CSS font-weight shared by the sentence and pill
Default400
pillWidthnumber
Expanded pill width in pixels; tune this when changing insert text
Default260
expandFramesnumber
Frames used for the initial width-and-height reveal
Default12
pillRevealHeightScalenumber
Starting height as a fraction of the full pill height
Default0.35
pillGrowAtnumber
Frame on which the local width-and-height growth begins
Default12
pillGrowFramesnumber
Frames used for the local width-and-height growth
Default24
pillGrowWidthScalenumber
Final local scale applied only to the pill width
Default1.08
pillGrowHeightScalenumber
Final local scale applied only to the pill height
Default1.16
outerExitFramesnumber
Frames used to blur and remove the outer copy
Default18
takeoverAtnumber
Frame on which the camera approach begins
Default12
takeoverScalenumber
Final scale held after the takeover settles
Default2.15
blurnumber
Maximum blur applied to the disappearing outer text in pixels
Default12
colorstring
Outer text color
Default"#fff3df"
pillColorstring
Pill background color
Default"#fffaf0"
pillTextColorstring
Pill text color
Default"#1c1210"
speednumber
Playback speed multiplier
Default1
classNamestring
Optional className passed to the component root