マーキー

bun add react-fast-marquee

import {
  SiBun,
  SiCloudflare,
  SiGithub,
  SiNextdotjs,
  SiPlanetscale,
  SiPrisma,
  SiRadixui,
  SiReact,
  SiSupabase,
  SiStripe,
  SiTailwindcss,
  SiVercel,
} from '@icons-pack/react-simple-icons';
import { Slot } from '@radix-ui/react-slot';
import React from 'react';
import Marquee from 'react-fast-marquee';
 
const icons = [
  {
    icon: <SiNextdotjs />,
    label: 'Next.js',
  },
  {
    icon: <SiBun />,
    label: 'Bun',
  },
  {
    icon: <SiPlanetscale />,
    label: 'PlanetScale',
  },
  {
    icon: <SiSupabase />,
    label: 'Supabase',
  },
  {
    icon: <SiReact />,
    label: 'React',
  },
  {
    icon: <SiTailwindcss />,
    label: 'Tailwind CSS',
  },
  {
    icon: <SiRadixui />,
    label: 'Radix UI',
  },
  {
    icon: <SiVercel />,
    label: 'Vercel',
  },
  {
    icon: <SiGithub />,
    label: 'GitHub',
  },
  {
    icon: <SiCloudflare />,
    label: 'Cloudflare R2',
  },
  {
    icon: <SiPrisma />,
    label: 'Prisma',
  },
  {
    icon: <SiStripe />,
    label: 'Stripe',
  },
];
 
export default function Demo() {
  return (
    <div className="py-8 w-full overflow-hidden">
      <span className="sr-only">セクションタイトル</span>
      <Marquee
        gradient
        gradientColor="hsl(var(--background))"
        gradientWidth={120}
        className="text-muted-foreground"
      >
        {icons.map((icon) => (
          <div key={icon.label} className="mx-6">
            <Slot className="w-10 h-10">{icon.icon}</Slot>
          </div>
        ))}
      </Marquee>
    </div>
  );
}