Components
Loading preview...
Letter-spacing collapses and blur clears with a springy entrance.
@Remocn
npx shadcn@latest add https://21st.dev/r/kapish_dima/tracking-in"use client";
import { Player } from "@remotion/player";
import { useEffect, useState } from "react";
import { TrackingIn } from "@/components/ui/tracking-in";
function usePrefersDark() {
const [isDark, setIsDark] = useState(false);
useEffect(() => {
const media = window.matchMedia("(prefers-color-scheme: dark)");
const update = () => setIsDark(media.matches);
update();
media.addEventListener("change", update);
return () => media.removeEventListener("change", update);
}, []);
return isDark;
}
const TrackingInScene = ({ isDark }: { isDark: boolean }) => (
<TrackingIn
text="REMOCN"
startTracking={0.6}
startBlur={14}
fontSize={96}
color={isDark ? "#f5f5f5" : "#171717"}
background={isDark ? "#111111" : "white"}
/>
);
export default function DemoDefault() {
const isDark = usePrefersDark();
return (
<div
className={
isDark
? "w-full min-h-screen overflow-hidden bg-neutral-950"
: "w-full min-h-screen overflow-hidden bg-white"
}
>
<Player
component={() => <TrackingInScene isDark={isDark} />}
durationInFrames={90}
fps={30}
compositionWidth={800}
compositionHeight={600}
controls={false}
autoPlay
loop
style={{ width: "100vw", height: "100vh" }}
/>
</div>
);
}