Components
Horizontal Depth Fade
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.
"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>
);
}