# Logos Grid Hover Reveal — React Logo Cloud

> A bordered logo grid where each cell rolls its wordmark up and away on hover or focus to reveal that customer's headline result and a case-study link.

- Category: [Logo Clouds](https://pixelpapa.com/components/logo-clouds.md)
- Tags: logos, grid, hover, case-study, reveal
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/logo-clouds/logos-grid-hover-reveal

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/logos-grid-hover-reveal
```

The file is written to `components/pixelpapa/logos-grid-hover-reveal.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/logo-clouds/logos-grid-hover-reveal.

## AI prompt

```text
Add the "Logos Grid Hover Reveal" component from PixelPapa UI to this project.

What it is: A bordered logo grid where each cell rolls its wordmark up and away on hover or focus to reveal that customer's headline result and a case-study link.
Category: Logo Clouds. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/logos-grid-hover-reveal
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/logos-grid-hover-reveal.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/logos-grid-hover-reveal.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/logos-grid-hover-reveal" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More logo clouds

- [Logos Marquee Fade](https://pixelpapa.com/components/logo-clouds/logos-marquee-fade.md): A single row of wordmarks drifting left forever, masked to fade at both edges; hovering slows the belt and lifts the logo under the cursor.
- [Logos Orbit Ring](https://pixelpapa.com/components/logo-clouds/logos-orbit-ring.md): Logo chips ride two counter-rotating rings that rise over the horizon behind the headline; each chip counter-spins so its wordmark stays upright.
- [Logos Spotlight Swap](https://pixelpapa.com/components/logo-clouds/logos-spotlight-swap.md) (Pro): Six fixed cells that take turns swapping their wordmark: every couple of seconds one cell blurs out its logo and focuses a new one from the pool.
- [Logos Two Row Opposing Marquee](https://pixelpapa.com/components/logo-clouds/logos-two-row-opposing-marquee.md): Two rows of logo chips glide in opposite directions; page scroll pushes them further apart in each direction, so the rows shear as you move.
- [Logos With Stat Header](https://pixelpapa.com/components/logo-clouds/logos-with-stat-header.md) (Pro): A logo strip led by a counting headline figure; the stat counts up on view, then the wordmarks rise in one by one along a hairline rule.