3D perspective marquee wall

import { cn } from "@/lib/utils"
import { Marquee } from "@/components/magicui/marquee"

const reviews = [
  { name: "Person One", username: "@handle1", body: "Placeholder quote one.", img: "https://avatar.vercel.sh/one" },
  { name: "Person Two", username: "@handle2", body: "Placeholder quote two.", img: "https://avatar.vercel.sh/two" },
]

const ReviewCard = ({ img, name, username, body }) => (
  <figure className={cn("relative h-full w-fit cursor-pointer overflow-hidden rounded-xl border p-4 sm:w-36", "border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]", "dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]")}>
    <div className="flex flex-row items-center gap-2">
      <img className="rounded-full" width="32" height="32" alt="" src={img} />
      <div className="flex flex-col">
        <figcaption className="text-sm font-medium dark:text-white">{name}</figcaption>
        <p className="text-xs font-medium dark:text-white/40">{username}</p>
      </div>
    </div>
    <blockquote className="mt-2 text-sm">{body}</blockquote>
  </figure>
)

export function Marquee3D() {
  return (
    <div className="relative flex h-96 w-full flex-row items-center justify-center gap-4 overflow-hidden [perspective:300px]">
      <div className="flex flex-row items-center gap-4" style={{ transform: "translateX(-100px) translateY(0px) translateZ(-100px) rotateX(20deg) rotateY(-10deg) rotateZ(20deg)" }}>
        <Marquee pauseOnHover vertical className="[--duration:20s]">
          {reviews.map((r) => <ReviewCard key={r.username} {...r} />)}
        </Marquee>
        <Marquee reverse pauseOnHover vertical className="[--duration:20s]">
          {reviews.map((r) => <ReviewCard key={r.username} {...r} />)}
        </Marquee>
      </div>
    </div>
  )
}