Horizontal Depth Fade

Galleries 78

About

A scroll-driven horizontal image strip that keeps the centered image in sharp focus while blurring, dimming and desaturating the others for a cinematic depth-of-field effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Horizontal Depth Fade to your project and fits it to your theme.

Code

How Horizontal Depth Fade is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { HorizontalDepthFade } from "@/components/ui/horizontal-depth-fade";
import { useMemo, useRef } from "react";

export default function HorizontalDepthFadeDemo() {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  const images = useMemo(
    () =>
      Array.from({ length: 12 }, (_, i) => ({
        src: `https://picsum.photos/seed/hbs${i + 1}/540/690`,
        alt: `Demo image ${i + 1}`,
      })),
    [],
  );

  return (
    <div
      ref={scrollContainerRef}
      className="relative h-screen w-full overflow-y-auto bg-background"
    >
      <HorizontalDepthFade
        images={images}
        scrollContainerRef={scrollContainerRef}
        brightnessBoost={55}
        focusSpread={0.14}
        scaleEffect={0.11}
        scrollLength={360}
      />
    </div>
  );
}