Blocks

Logo shuffle block

A customer wall with more names than slots. Every few seconds one slot turns over to a name not on show, the old name lifting away as the new one rises, so the wall stays alive without anything sliding past.

Pro

pnpm dlx shadcn@latest add @caliper/logo-shuffle-block

Customers

Trusted by teams who close on time

Installs components/ui/logo-shuffle-block.tsxDepends on lucide-reactMotion shared motion tokens

When to use

Use it for

Social proof with more customers than fit in a row.
A calm alternative to a scrolling logo marquee.

Skip it when

Fewer names than slots; use the static logo row.
Pages where attention belongs elsewhere at that moment.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

One turn at a time: Only one slot changes per turn, and never the same slot twice running, so the eye is never asked to follow two changes.
Stops when looked at: Hover, focus, offscreen, the pause button and reduced motion all stop the turns. Every name is in a hidden list.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/logo-shuffle-block

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { LogoShuffleBlock } from "@/components/ui/logo-shuffle-block"

The worked example comes with Pro

The 12-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference