UIPackage
Vue React

Logos 02

block marketing
Edit on GitHub

Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.

Also available for React ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/logos-02.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/logos-02

Examples

Files (1)

  • app/components/blocks/Logos02.vue 5.2 kB 
    <script setup lang="ts">
// Single-row infinite marquee. The track is rendered twice back-to-back
// and translated -50% over the duration so the seam between the two
// copies is invisible.
const LOGOS = [
  { label: 'Vercel', d: 'm12 1.608 12 20.784H0Z' },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]
</script>

<template>
  <section class="bg-muted/30 border-y">
    <div class="mx-auto max-w-6xl px-6 py-14">
      <p class="text-muted-foreground mb-10 text-center text-xs font-medium tracking-widest uppercase">
        Trusted by teams at
      </p>

      <!-- Marquee viewport: edges fade out via mask-image so logos appear/disappear softly -->
      <div
        class="group relative overflow-hidden"
        style="
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
        "
      >
        <!-- Track: brands rendered twice so the -50% slide loops seamlessly -->
        <div class="logos02-track flex w-max gap-12 will-change-transform">
          <div
            v-for="logo in [...LOGOS, ...LOGOS]"
            :key="logo.label + Math.random()"
            class="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
          >
            <svg viewBox="0 0 24 24" class="size-5 shrink-0" fill="currentColor" role="img" :aria-label="logo.label">
              <title>{{ logo.label }}</title>
              <path :d="logo.d" />
            </svg>
            <span class="text-base font-semibold tracking-tight">{{ logo.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style>
@keyframes logos-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.logos02-track {
  animation: logos-marquee 30s linear infinite;
}
.group:hover .logos02-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .logos02-track {
    animation: none !important;
  }
}
</style>

Raw manifest: https://uipkge.dev/r/vue/logos-02.json