Blocks

Logo Wall Shuffle

An integrations wall of staggered logo tiles where one mark at a time lifts away and the next rises in behind it.

A ready-made integrations section. Tiles sit in staggered columns, and on a loop a single card lifts its mark away while the next one rises into place behind it, blurring through the change. Every tile is visited once before any repeats, so no card sits stale. The loop pauses off-screen and in background tabs.

New tab

Your entire tech stack, perfectly connected

Seamlessly integrate with your favorite tools and bring all your workflows into one unified platform.

Installation

pnpm dlx shadcn@latest add @tween-ui/logo-wall-shuffle

Usage

logos is required — these are your integrations, so the component ships no brand marks of its own.

app/page.tsx

import LogoWallShuffle from '@/components/tweenui/logo-wall-shuffle';
 
const LOGOS = [
  { src: '/logos/slack.svg', alt: 'Slack' },
  { src: '/logos/figma.svg', alt: 'Figma' },
  { src: '/logos/notion.svg', alt: 'Notion' },
  { src: '/logos/linear.svg', srcDark: '/logos/linear-dark.svg', alt: 'Linear' },
];
 
export default function Page() {
  return <LogoWallShuffle logos={LOGOS} />;
}

Reshape the wall with columns — each number is one column's tile count, and every other column drops down to stagger the grid:

<LogoWallShuffle logos={LOGOS} columns={[2, 3, 4, 3, 2]} />

Props

Prop	Type	Default	Description
`title`	`ReactNode`	sample heading	Section heading.
`description`	`string`	sample line	Supporting line under the heading.
`logos`	`LogoWallLogo[]`	—	Required. Marks cycled through the wall.
`columns`	`number[]`	`[1, 2, 3, 2, 3, 2, 1]`	Tiles per column, left to right.

Extends native <section> attributes (className, style, …).

`LogoWallLogo`

Field	Type	Description
`src`	`string`	Logo URL.
`srcDark`	`string`	Swapped in under `.dark`. Optional.
`alt`	`string`	Alt text.

Pass more logos than tiles or the wall has nothing new to rotate in. The default pattern is 14 tiles, so aim for 16+ marks.

Accessibility

Every mark keeps its own alt, so the wall reads as a list of named integrations rather than decoration. Under prefers-reduced-motion: reduce the loop never starts — tiles render their first logo and stay put.

Your entire tech stack, perfectly connected

Installation#

Usage#

Props#

LogoWallLogo#