Opa Ruan, obrigado!

Para a animação de troca de páginas, escolhi o gsap por conta do conrforto e o utilizei para criar as seguintes funções:

import gsap from "gsap";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";

export const animatePageIn = () => {
  const bannerOne = document.getElementById("banner-1");
  const bannerTwo = document.getElementById("banner-2");
  const bannerThree = document.getElementById("banner-3");
  const bannerFour = document.getElementById("banner-4");
  if (bannerOne && bannerTwo && bannerThree && bannerFour) {
    const tl = gsap.timeline();
    tl.set([bannerOne, bannerTwo, bannerThree, bannerFour], {
      yPercent: 0,
    }).to([bannerOne, bannerTwo, bannerThree, bannerFour], {
      yPercent: 100,
      stagger: 0.2,
    });
  }
};

export const animatePageOut = (href: string, router: AppRouterInstance) => {
  const bannerOne = document.getElementById("banner-1");
  const bannerTwo = document.getElementById("banner-2");
  const bannerThree = document.getElementById("banner-3");
  const bannerFour = document.getElementById("banner-4");
  if (bannerOne && bannerTwo && bannerThree && bannerFour) {
    const tl = gsap.timeline();
    tl.set([bannerOne, bannerTwo, bannerThree, bannerFour], {
      yPercent: -100,
    }).to([bannerOne, bannerTwo, bannerThree, bannerFour], {
      yPercent: 0,
      stagger: 0.2,
      onComplete: () => {
        if (href == "back") {
          router.back();
        } else {
          router.push(href);
        }
      },
    });
  }
};

com essas funções feitas, só falta criar o esqueleto da animação, para isso criei um arquivo chamado template.tsx no /app do meu projeto next e inseri o seguinte conteúdo:

"use client";

import { animatePageIn } from "@/utils/animation";
import { useEffect } from "react";

export default function Template({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    animatePageIn();
  }, []);
  return (
    <div className="">
      <div
        id="banner-1"
        className="min-h-screen bg-purple-500 z-[50] fixed top-0 left-0 w-[calc(25%+3px)] "
      />
      <div
        id="banner-2"
        className="min-h-screen bg-purple-500 z-[50] fixed top-0 left-1/4 w-[calc(25%+3px)] "
      />
      <div
        id="banner-3"
        className="min-h-screen bg-purple-500 z-[50] fixed top-0 left-2/4 w-[calc(25%+3px)] "
      />
      <div
        id="banner-4"
        className="min-h-screen bg-purple-500 z-[50] fixed top-0 left-3/4 w-[calc(25%+3px)] "
      />
      {children}
    </div>
  );
}

e quando eu quero trocar de páginas eu utilizo a função animatePageOut, você tem duas opção na verdade que é utilizar ela diretamente ou criar um componente, EU gosto de fazer dessa forma: animatePageOut('/course/learn-english-89a9sd9j', router) o router é a instância do useRouter do "next/navigation", mas a outra forma é esse componente aqui ó:

"use client";
import { animatePageOut } from "@/utils/animation";
import { usePathname, useRouter } from "next/navigation";

interface Props {
  href: string;
  children: React.ReactNode;
  className?: string;
  onClick?: any;
}

export default function TransitionLink({
  href,
  children,
  className,
  onClick,
}: Props) {
  const router = useRouter();
  const pathname = usePathname();
  const handleClick = () => {
    if (pathname !== href) {
      animatePageOut(href, router);
    }
  };
  return (
    <button
      className={` outline-none w-fit ${className}`}
      onClick={onClick ? onClick : handleClick}
    >
      {children}
    </button>
  );
}

ah, quase que esqueço da pergunta sobre o shadcn, não lembro exatamente, mas estou utilizando principalmente o Drawer, Dialog, Popup, Checkbox, Dropdown e Select.

Valeu Ruan!