Scroll Fade Effect

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

Features

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

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>