The Logo wall component is designed to display a large number of partner or client logos within a fixed grid layout. Unlike static grids, this component "breathes" by randomly replacing one logo at a time with a new one from your list.
How it Works
Smart Shuffling: Instead of random chaos, the component uses a "Deck of Cards" logic. It tracks which grid slots have been updated recently. It ensures every single slot on the grid is updated once before any slot is updated a second time.
Smooth Transitions: Logos fade out and in using a slow, 2s cross-fade (total 5s transition), creating a calm, premium feel.
Rest Cycles: You control the "Cycle Time"—the quiet period between animations—so the wall isn't constantly flickering.
Properties
Logos: Connect your array of logo components here.
Rows / Columns: Define the grid structure (e.g., 2x3, 4x4).
Gap: Sets the pixel spacing between grid items.
Cycle Time: The pause duration (in seconds) between one swap finishing and the next one starting.
Use Cases
Trust Signals: Display 20+ client logos in a section that only takes up space for 12.
Portfolio Grids: Rotate through project thumbnails in a hero section.
Partner Walls: A footer widget that cycles through sponsor logos without cluttering the design.
Best Practices
Ensure your list of Logos is larger than the number of grid slots (Rows × Columns), otherwise, no animation will occur.
Tim Yeng
