3d-marquee

1import { Marquee } from '@/components/ui/marquee';
2
3const logos = [
4  {
5    name: 'Microsoft',
6    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',
7  },
8  {
9    name: 'Apple',
10    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',
11  },
12  {
13    name: 'Google',
14    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',
15  },
16  {
17    name: 'Facebook',
18    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',
19  },
20  {
21    name: 'LinkedIn',
22    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',
23  },
24  {
25    name: 'Twitter',
26    img: 'https://images.unsplash.com/photo-1718954572423-2780fe600028?w=500&auto=format&fit=crop',
27  },
28];
29
30const Marquee3D = () => {
31  return (
32    <div className='relative flex h-full w-96 mx-auto flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border dark:bg-neutral-800 bg-neutral-50 px-20 md:shadow-xl'>
33      <div className='flex flex-row gap-4 perspective-near'>
34        <Marquee
35          className='h-96 justify-center overflow-hidden [--duration:60s] [--gap:1rem]'
36          vertical
37          style={{
38            transform:
39              'translateX(0px) translateY(0px) translateZ(-50px) rotateX(0deg) rotateY(-20deg) rotateZ(10deg) scale(1.5)',
40          }}
41        >
42          {logos.map((data, idx) => (
43            <img
44              key={idx}
45              src={data.img}
46              alt={data.name}
47              className='mx-auto h-full w-3/4 cursor-pointer rounded-xl border border-neutral-300 transition-all duration-300 hover:ring-1 hover:ring-neutral-300'
48            />
49          ))}
50        </Marquee>
51      </div>
52
53      <div className='pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-linear-to-r from-white dark:from-background'></div>
54      <div className='pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-linear-to-l from-white dark:from-background'></div>
55    </div>
56  );
57};
58
59export default Marquee3D;