# Aurora Console Hero

> Split marketing hero for a component registry: Next.js badge, lime-highlighted headline, call to action with an inline star rating, brand row, and a rebuilt analytics console floating on a drifting gradient backdrop, with full dark mode.

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

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

## Dependencies

- npm packages: `cn`, `motion`
- Registry items: `@reui/badge`, `@reui/icon-tile`, `@reui/rating`, `avatar`, `button`, `card`, `item`, `kbd`, `progress`, `separator`, `table`

## Notes from the registry

## Purpose
A conversion hero for a developer product whose proof is the product itself. The left column runs badge, highlighted headline, subtitle, a call-to-action row that carries the star rating inline, and a brand row under a separator. The right column is a rebuilt analytics console floating on the design's own gradient backdrop rather than a screenshot.

## Best Fit
Top of a marketing page for a registry, component library, template store, or any tool that wants to show its interface and its social proof in the same glance. The rating sits inside the action row, so it reads as reassurance at the click rather than as a separate testimonial band.

## Main Pieces
- `page.tsx` renders the section edge to edge.
- `components/hero.tsx` composes the section, the conversion column, and the layered right column. The frame is pinned to 4:3, and its two insets are `cqw` shares of the frame width rather than breakpoint steps, so the whole assembly scales as one piece.
- `components/app-frame.tsx` rebuilds the product shot as real markup (`Card`, `Table`, `Item`, `Progress`, `Badge`, `IconTile`, `Avatar` and `Kbd`), exposed to assistive tech as a single `role="img"` so no focusable control is planted inside decorative art.
- `components/frame-backdrop.tsx` is the photographic backdrop, loaded from Unsplash's CDN rather than approximated with gradient stops or inlined as base64. `rot=180` is baked into the URL, so the element needs no rotation of its own and the drift keeps `transform` to itself. It is the block's only other client component, which is what keeps `motion` off the static conversion column.
- `components/data.tsx` holds the brand marks and the rating figures.

## LLM Guidance
The conversion column is a `@container`, so the headline scales with the column rather than the viewport. The lime highlight is an inline `box-decoration-clone` span with its ink pinned, because lime stays light in both themes.

The console is authored at a real desktop size (1400 x 1000) and scaled down as one piece, which is what makes it read as a screenshot; authoring it at final size forces type up to a ~23px desktop equivalent and the panels crowd. Retheming it means editing the `PANEL` constant and the paired `dark:` classes in `app-frame.tsx` rather than the block's tokens, because it stands on a photograph rather than on the page: neutrals invert, tinted status pills become low-alpha fills of their own hue, and the chart hues stay identical in both themes so a series keeps its identity.

Motion is split on purpose. The backdrop drift is one always-on loop, so it uses the `motion` library with `useReducedMotion`, and its `initial` scale is server-rendered so the first paint has nothing to pop from. The console keeps CSS keyframes injected via `<style>`, killed by a `prefers-reduced-motion` rule: it runs 65 ambient layers, 52 of them sparkline and stacked bars, and 7 of them are `td::after` pseudo-elements no JS library can target. Do not port those to `motion`, it would move 65 compositor animations onto the main thread. Ambient loops in the console are staggered by a `--hero2-delay` custom property set per element, which is what stops the four KPI values rising on the same frame; periods are mutually non-harmonic so they never resolve into one pulse. Swap `HERO_BRANDS` for real logos and `HERO_RATING` for real figures; the star row is `aria-hidden` because the line under it states the same numbers. Swap the backdrop by editing `FRAME_BACKDROP_SRC`: any wide abstract image works, and the CDN query owns the crop, so drop `rot=180` unless the replacement also needs turning. Leave `auto=format` off, this gradient encodes larger as AVIF than as JPEG.