Scroll Fade Effect

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/scroll-fade-effect.json

Usage

Copy
import { ScrollFadeEffect } from "@/components/ui/scroll-fade-effect"
 
export default function Example() {
  return (
    <ScrollFadeEffect className="h-72 w-48">
      <div className="p-4">
        {/* Your scrollable content */}
      </div>
    </ScrollFadeEffect>
  )
}

Examples

Adjustable Intensity

Use a slider to dynamically control the fade intensity. The intensity prop accepts pixel values.

Horizontal Scroll

Use orientation="horizontal" for horizontally scrollable content with fade effects on the left and right edges.

Copy
<ScrollFadeEffect orientation="horizontal" className="h-24 w-full">
  <div className="flex gap-4 p-4">
    {Array.from({ length: 15 }, (_, i) => (
      <div
        key={i}
        className="flex h-16 w-24 shrink-0 items-center justify-center rounded-lg bg-muted"
      >
        Item {i + 1}
      </div>
    ))}
  </div>
</ScrollFadeEffect>

Custom Intensity

Control the fade size using the intensity prop. Values are in pixels.

Copy
{/* Light fade */}
<ScrollFadeEffect intensity={32} className="h-48 w-48">
  {/* content */}
</ScrollFadeEffect>
 
{/* Default fade */}
<ScrollFadeEffect intensity={64} className="h-48 w-48">
  {/* content */}
</ScrollFadeEffect>
 
{/* Heavy fade */}
<ScrollFadeEffect intensity={128} className="h-48 w-48">
  {/* content */}
</ScrollFadeEffect>

API Reference

ScrollFadeEffect

Features

• Scroll-driven Animations: Fade effects respond to scroll position - top fade appears when scrolled down, bottom fade hides when reaching the end
• CSS Mask Gradient: Uses CSS mask-image for smooth, hardware-accelerated fading
• Bidirectional Support: Works with both vertical and horizontal scrolling
• Configurable Intensity: Fine-tune the fade size in pixels
• Minimal Bundle Size: Pure CSS solution with scroll-driven animations

Accessibility

• Maintains native scroll behavior for assistive technologies
• Content remains fully accessible to screen readers
• Supports keyboard navigation with standard scroll shortcuts