Trailing Scroll
element go slower or faster based on scroll and more cooler
Installation
npx shadcn@latest add http://localhost:3000/labs/r/trailing-scroll.jsonyarn dlx shadcn@latest add http://localhost:3000/labs/r/trailing-scroll.jsonpnpx shadcn@latest add http://localhost:3000/labs/r/trailing-scroll.jsonbunx shadcn@latest add http://localhost:3000/labs/r/trailing-scroll.jsonUsage
import { TrailingScroll } from "@/components/trailing-scroll";
export default function Page() {
return (
<TrailingScroll
elements={[
{
id: "star-1",
component: (
<Star20
className="stroke-foreground text-main size-8 scale-300 stroke-3 md:size-12"
size={48}
/>
),
speed: 10,
className: "absolute left-[15%] top-[10%] blur-[1px]",
},
// ...
]}
containerClassName="absolute inset-0 z-20 opacity-[92%] pointer-events-none"
speedMultiplier={25}
/>
);
}