Inline Highlight

Animate one word inside a sentence from a base color to a brand color

Installation

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

Usage

tsx

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

Props8

Prop	Type	Default
beforerequired	string— Text rendered before the highlighted word
highlightrequired	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	number48 Font size in pixels
fontWeight	number600 CSS font-weight
className	string— Optional className passed to the underlying span

beforerequiredstring
Text rendered before the highlighted word
highlightrequiredstring
The word that animates color
afterstring
Text rendered after the highlighted word
Default""
baseColorstring
Starting color of the highlighted word and color of the surrounding text
Default"#171717"
highlightColorstring
Final color of the highlighted word
Default"#ff5e3a"
fontSizenumber
Font size in pixels
Default48
fontWeightnumber
CSS font-weight
Default600
classNamestring
Optional className passed to the underlying span