Inline Highlight

Text 123

About

Animates one word inside a sentence from a base color to a brand color.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Inline Highlight to your project and fits it to your theme.

Code

How Inline Highlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect, useState } from "react";
import { Player } from "@remotion/player";
import { InlineHighlight } from "@/components/ui/inline-highlight";

function usePrefersDarkMode() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const update = () => setIsDark(mediaQuery.matches);

    update();
    mediaQuery.addEventListener("change", update);
    return () => mediaQuery.removeEventListener("change", update);
  }, []);

  return isDark;
}

function InlineHighlightScene({
  background,
  baseColor,
  highlightColor,
}: {
  background: string;
  baseColor: string;
  highlightColor: string;
}) {
  return (
    <InlineHighlight
      before="Ship faster with "
      highlight="remocn"
      after="."
      background={background}
      baseColor={baseColor}
      highlightColor={highlightColor}
      fontSize={72}
      fontWeight={600}
      speed={1}
    />
  );
}

export default function DemoDefault() {
  const isDark = usePrefersDarkMode();
  const background = isDark ? "#000000" : "#ffffff";
  const baseColor = isDark ? "#fafafa" : "#171717";
  const highlightColor = isDark ? "#ff7a59" : "#ff5e3a";

  return (
    <div
      className="w-full min-h-screen overflow-hidden"
      style={{ backgroundColor: background }}
    >
      <Player
        component={InlineHighlightScene}
        inputProps={{ background, baseColor, highlightColor }}
        durationInFrames={90}
        fps={30}
        compositionWidth={1280}
        compositionHeight={720}
        controls={false}
        autoPlay
        loop
        style={{ width: "100vw", height: "100vh" }}
      />
    </div>
  );
}