Tailwind-based component that adds a subtle blur gradient at the end of its container

end-blur.tsx

import { cn } from "@/lib/cn";
import { useLayoutEffect } from "react";
import { useState } from "react";
import { useRef } from "react";

export function EndBlur() {
	const [showBlur, setShowBlur] = useState(false);
	const containerRef = useRef<HTMLDivElement>(null);

	useLayoutEffect(() => {
		const container = containerRef.current?.parentElement;
		if (!container) return;

		const handleScroll = () => {
			setShowBlur(
				// Only show blur if:
				// 1. Content is taller than container (has scrollable content)
				container.scrollHeight > container.clientHeight &&
					// 2. Not scrolled all the way to bottom
					// (scrollTop + container height < total scroll height)
					container.scrollTop < container.scrollHeight - container.clientHeight,
			);
		};

		const resizeObserver = new ResizeObserver(handleScroll);
		resizeObserver.observe(container);

		container.addEventListener("scroll", handleScroll);
		handleScroll(); // Check initial state

		return () => {
			container.removeEventListener("scroll", handleScroll);
			resizeObserver.disconnect();
		};
	}, []);

	return (
		<div
			ref={containerRef}
			className={cn(
				"absolute bottom-0 left-0 right-0 h-8 pointer-events-none transition-opacity duration-300 z-(--z-end-blur)",
				"backdrop-blur-[1px] [mask-image:linear-gradient(to_bottom,transparent_0%,black_100%)] mix-blend-multiply",
				showBlur ? "opacity-100" : "opacity-0",
			)}
		/>
	);
}