Meridian Docs
Recipe

Customer Logo Strip Design

A horizontally scrolling trust bar that showcases customer logos with consistent sizing, grayscale treatment, and smooth animation.

Preview

Acme
Vertex
Nova
Prism
Flux
Orbit

Ingredients

  • Tailwind animate with custom keyframes
  • Flexbox row with shrink-0 items
  • Grayscale filter via grayscale utility
  • Duplicated logo set for seamless infinite loop

Tailwind Config

module.exports = {
  theme: {
    extend: {
      keyframes: {
        scroll: {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-50%)' },
        },
      },
      animation: {
        scroll: 'scroll 20s linear infinite',
      },
    },
  },
};

Usage Notes

Duplicate the logo set inside the scrolling container so the loop appears seamless. The translateX(-50%) keyframe shifts exactly half the total width.

Apply grayscale and uniform sizing to all logos so the strip reads as a cohesive trust signal rather than a cluttered brand collage.

Pause animation on hover with hover:[animation-play-state:paused] for accessibility.

← All RecipesNext: Testimonial Grid →