FadeShadow

a component that fades the shadow of an element when the user scrolls down.

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/FadeShadow.json

Usage

import FadeShadow from "@/components/ui/FadeShadow";

<div className="relative mx-auto h-40 w-full max-w-7xl">
  <FadeShadow
    orientation="horizontal"
    positionX="left"
    className="w-30 from-red-500/50"
  />
  <FadeShadow
    orientation="horizontal"
    positionX="right"
    className="w-30 from-red-500/50"
  />
</div>