3d-marquee

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