# Emerald registry hero with an animated isometric scene of floating product blocks

> Dark emerald marketing hero for a component registry: Next.js badge, highlighted headline, MCP and Agent Skills capability chips, lime primary call to action, trusted-by brand row, and an animated isometric scene of eight extruded product cards with staggered entrance, ambient float, hover lift, axis packets, and expanding ground pulses.

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-3).

- Page, with a preview: https://shadcn.exchange/r/reui/hero-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/hero-3-light-0683c6191c4ff1d1.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-3

## Dependencies

- npm packages: `cn`, `motion`
- Registry items: `@reui/badge`, `@reui/frame`, `@reui/icon-tile`, `avatar`, `button`, `button-group`, `card`, `dropdown-menu`, `empty`, `item`, `progress`, `select`, `separator`, `tabs`

## Notes from the registry

## Purpose
A conversion hero for a component registry or developer platform that wants to show the product itself rather than describe it. The left column carries the pitch; the right column renders eight real blocks as extruded solids on an isometric plane.

## Best Fit
Top of a marketing page for a registry, design system, or template library. The scene doubles as a product shot, so it suits pages where catalog breadth is the argument.

## Main Pieces
- `page.tsx` renders the section edge to edge.
- `components/hero.tsx` composes the emerald surface, the conversion column, and the scene mount.
- `components/isometric-scene.tsx` projects every solid with a 2D matrix, sweeps its thickness from the same matrix, and owns all motion as CSS keyframes.
- `components/scene-cards.tsx` holds the eight card faces, each composed from stock primitives.
- `components/hero-dot-field.tsx` tiles the section-wide dot pattern.
- `components/data.tsx` holds the scene geometry, capability chips, and brand marks.

## LLM Guidance
The surface is dark in both themes, so the greens and the lime accent are literal. The scene is drawn on a fixed 624 by 600 canvas and scaled with `calc(100cqw/624)`, so never convert its coordinates to percentages. Each card face is authored at a natural size and scaled onto its plane face, which is why `contentWidth / contentHeight` must keep the same ratio as `width / height`. `PROJECTIONS` carries the four matrices used in the scene together with the 6 unit extrusion in face space, and `extrusionShadow` sweeps the rounded face along it, so a new card needs only a projection name and never hand drawn side faces. The scene re-scopes the theme tokens to light, so card faces should use stock primitive surfaces and add no colour classes.