Youtube_useBlurImage

useBlurImage.tsx

import { useEffect, useState } from "react";

export const useDynamicSrc = (hd: string, low: string) => {
  const [src, set] = useState(low ?? "");

  useEffect(() => {
    const img = new Image();
    img.src = src;

    img.onload = () => {
      set(hd);
    };
  }, [hd, src]);

  return [src, src !== hd];
};

export const BlurImage = ({
  src,
  lowSrc,
}: {
  src: string;
  lowSrc?: string;
}) => {
  const [dSrc, blur] = useDynamicSrc(src, lowSrc);
  return (
    <img
      style={{
        width: "100%",
        filter: blur ? "blur(20px)" : "none",
        clipPath: "inset(0)",
        transition: "filter 1s ease-out",
      }}
      src={dSrc}
      alt="zelda"
    />
  );
};