Inline Highlight

A typography primitive that splits a sentence into before, highlight, and after parts and animates the color of the middle word using interpolateColors from Remotion.

Installation

$ pnpm dlx shadcn@latest add @remocn/inline-highlight

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { InlineHighlight } from "@/components/remocn/inline-highlight";

const InlineHighlightScene = () => (
  <InlineHighlight
    before="Ship faster with "
    highlight="remocn"
    highlightColor="#ff5e3a"
    fontSize={72}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="InlineHighlight"
    component={InlineHighlightScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props

Prop	Type	Default	Description
`before`required	`string`	—	Text rendered before the highlighted word.
`highlight`required	`string`	—	The word that animates color.
`after`	`string`	`""`	Text rendered after the highlighted word.
`baseColor`	`string`	`"#171717"`	Starting color of the highlighted word and color of the surrounding text.
`highlightColor`	`string`	`"#ff5e3a"`	Final color of the highlighted word.
`fontSize`	`number`	`48`	Font size in pixels.
`fontWeight`	`number`	`600`	CSS font-weight.
`className`	`string`	—	Optional className passed to the underlying span.

Notes

Smooth color blending

interpolateColors blends in RGB space, so transitions between contrasting hues stay smooth without going through muddy intermediate colors.