replicating youtube effect in a speedrun : 2 hrs

youtube-video-efffect.tsx

"use client";
import { FC, useEffect, useRef } from "react";

interface pageProps {}

const Page: FC<pageProps> = ({}) => {
  return (
    <div className="flex min-h-screen  bg-black relative items-center justify-center min-w-full">
      <video
        className="w-[600px] max-w-full h-auto absolute z-20 translate-x-1/2 translate-y-[60%] scale-[1.5_1.3] rounded-[30%] blur-[100px] saturate-200 opacity-50"
        autoPlay
        loop
        muted
        playsInline
        id="videoGojo"
      >
        <source src="/videos/gojo.mp4" type="video/mp4" />
      </video>

      <video
        className="w-[600px] max-w-full h-auto absolute z-30 "
        autoPlay
        loop
        muted
        playsInline
        id="videoGojo"
      >
        <source src="/videos/gojo.mp4" type="video/mp4" />
      </video>
    </div>
  );
};

export default Page;