# Integrations Hero With An Isometric Grid Of Floating Brand Tiles

> Split marketing hero for an integrations or MCP product: outline badge, two-line headline, subtitle, blue primary action with an outline companion, an assurance row under a separator, and an isometric grid of eleven extruded brand tiles floating over a masked ground plane with a dot field backdrop.

A paid shadcn/ui block sold by the [@reui](https://reui.io/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/hero-5).

- Page, with a preview: https://shadcn.exchange/r/reui/hero-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/hero-5-light-85321d20f7fbd359.png
- Listed: 2026-10-13

## Buy and install

@reui sells this block, and its code is not on shadcn.exchange. Buy it from the registry, which installs it for those who have: https://shadcn.exchange/out/reui/hero-5

## Dependencies

- npm packages: `cn`, `motion`
- Registry items: `@reui/badge`, `button`, `separator`

## Notes from the registry

## Purpose
A conversion hero for a product whose value is what it connects to. The left column runs badge, headline, subtitle, a primary and outline action pair, and three assurances under a separator. The right column is an isometric grid of extruded tiles, each carrying a real brand mark, floating over a masked ground plane.

## Best Fit
Top of a marketing page for an integrations platform, an MCP server catalog, an automation tool, or anything whose pitch is breadth of ecosystem. The grid reads as a catalog at a glance, so it does the work a logo wall usually does while staying a product shot.

## Main Pieces
- `page.tsx` renders the section edge to edge.
- `components/hero.tsx` composes the dark surface, the conversion column, and the scaled grid mount.
- `components/stack-grid.tsx` projects every tile with a 2D matrix, sweeps its thickness from the same matrix, draws the ground plane and its guide runs, and owns entrance, float and hover.
- `components/hero-dot-field.tsx` tiles the section-wide dot pattern.
- `components/data.tsx` holds the grid geometry, the brand marks, and the assurance labels.

## LLM Guidance
The surface is dark in both themes, so the ink values are literal rather than token driven. The conversion column is a `@container`, so the headline scales with the column rather than the viewport.

The grid is drawn on a fixed 624 by 600 canvas and scaled with `calc(100cqw/624)`, so never convert its coordinates to percentages. `ISO_MATRIX` is the ground projection and `TILE_EXTRUDE` is the 20 unit thickness in the face's own space; `extrusionShadow` sweeps the rounded face along it, so a new tile needs only a left/top and a mark, never hand drawn side faces. Brand marks lie on the face under the same matrix, which is what the design does: its 24 unit square logo measures 24 * sqrt(3) wide as an instance, and that only holds under this projection.

Entrance, ambient float, the hover lift and the guide-run pulse are Motion and sit on separate elements, because the wrapper that carries the entrance already owns a transform. The pointer listener sits on a wrapper that never transforms; putting it on the element that lifts makes the tile slide out from under the cursor and flicker. `MotionConfig reducedMotion="user"` is what honours the OS setting. Swap `STACK_TILES` for the real integration set; the ground plane and caption stay put.