Scroll Based Velocity

"use client";

import { ScrollVelocityContainer, ScrollVelocityRow } from "@/lab/magicui/ui/scroll-based-velocity";

export default function ScrollBasedVelocityDemo() {
  return (
    <div className="@container relative flex h-full w-full flex-col items-center justify-center overflow-hidden text-neutral-950">
      <ScrollVelocityContainer className="text-[clamp(2rem,8cqw,4.5rem)] leading-tight font-bold tracking-[-0.02em]">
        <ScrollVelocityRow baseVelocity={20} direction={1}>
          Velocity Scroll&nbsp;
        </ScrollVelocityRow>
        <ScrollVelocityRow baseVelocity={20} direction={-1}>
          Velocity Scroll&nbsp;
        </ScrollVelocityRow>
      </ScrollVelocityContainer>
      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-gradient-to-r from-[#fbfaf7]"></div>
      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-gradient-to-l from-[#fbfaf7]"></div>
    </div>
  );
}