# Dark MCP usage hero with an animated isometric bar chart and a flagged usage spike

> Dark split marketing hero for an MCP usage product: status badge, highlighted headline, capability chips, dual call to action, brand row, and an animated isometric bar chart charting agent usage velocity with a flagged spike.

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

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

## Dependencies

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

## Notes from the registry

## Purpose
A conversion hero for developer tooling that has a usage or telemetry story to tell. The left column carries the pitch and the calls to action; the right column renders an isometric MCP usage chart that gives the surface its point of view.

## Best Fit
Top of a marketing page for an API, agent platform, or usage-metered product. The chart reads as product evidence rather than decoration, so it suits pricing-adjacent and developer-audience pages.

## Main Pieces
- `page.tsx` renders the section edge to edge.
- `components/hero.tsx` composes the dark surface, the conversion column, and the chart.
- `components/usage-velocity-chart.tsx` draws the isometric scene as one inline SVG on a fixed 624 by 600 canvas and animates it with CSS keyframes.
- `components/data.tsx` holds the bar geometry, capability chips, and brand marks.

## LLM Guidance
The surface is intentionally dark in both themes, so neutrals are literal while accents use the teal scale. The conversion column is a `@container`, so the headline scales with the column rather than the viewport. Bar `extrusion` is stored per bar because the source design sized the bars by eye; it is not derived from `value`. Swap `USAGE_BARS` for real readings and keep one bar flagged with `accent` so the callout still has a subject.