Scroll Fade Effect

Fade content edges as you scroll, for both vertical and horizontal layouts.

The Scroll Fade Effect component has been deprecated

Please use the shadcn/ui scroll-fade utilities instead.

Features

Content fades in and out smoothly as you scroll.
Supports both vertical and horizontal scrolling.

Use cases

Sidebars and menus that scroll inside a fixed height.
Tab bars that overflow horizontally on small screens.
Long lists inside a popover or dialog.

Browser compatibility

This component uses CSS animation-timeline: scroll(). Check the latest browser compatibility on MDN before using in production.

Installation

pnpm dlx shadcn@latest add @ncdai/scroll-fade-effect

Usage

import { ScrollFadeEffect } from "@/components/scroll-fade-effect"

<div className="rounded-lg border">
  <ScrollFadeEffect className="h-72 w-48">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium
    aenean pharetra. Orci eu lobortis elementum nibh tellus molestie. Vulputate
    dignissim suspendisse in est. Vel pharetra vel turpis nunc. Malesuada nunc
    vel risus commodo. Nisi vitae suscipit tellus mauris. Posuere morbi leo urna
    molestie at elementum eu. Urna duis convallis convallis tellus. Urna
    molestie at elementum eu. Nunc sed blandit libero volutpat.
  </ScrollFadeEffect>
</div>