Components
Loading preview...
Animates one word inside a sentence from a base color to a brand color.
@Remocn
npx shadcn@latest add https://21st.dev/r/kapish_dima/inline-highlight"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>
);
}