# Split Registry Hero With A Console On A Drifting Photo Backdrop

> Split marketing hero for a component registry: live-status badge with a success dot, two-tone headline, subtitle, Next.js and v0 capability rows, a primary and outline action pair, and a rebuilt analytics console floating on a drifting photographic 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-4).

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

## Dependencies

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

## Notes from the registry

## Purpose
A conversion hero for a developer product whose proof is the product itself. The left column runs a live-status badge, a two-tone headline whose second line drops to muted ink, a subtitle, two capability rows, and a primary plus outline action pair. The right column is a rebuilt analytics console floating on the design's own photographic backdrop.

## Best Fit
Top of a marketing page for a registry, component library, or template store that wants the interface visible above the fold. The capability rows carry stack compatibility as plain statements rather than as a logo wall, so they read as facts rather than as social proof.

## 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` draws the backdrop and owns its drift, requesting the design's own photograph from the Unsplash CDN.
- `components/data.tsx` holds the capability rows and their brand marks.

## LLM Guidance
The conversion column is a `@container`, so the headline scales with the column rather than the viewport. The headline's second line is `text-muted-foreground`; that two-tone split is the design's own emphasis and should survive a copy change.

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.

The backdrop is cropped to the frame's 4:3 by the `rect` parameter on its request URL, so it needs no runtime `object-fit` and `transform` stays free for the drift. Do not re-fit it; swap the whole URL if you change the art. All motion is CSS keyframes injected via `<style>` in the component that owns it, and every animation is killed by a `prefers-reduced-motion` rule. Swap `HERO_CAPABILITIES` for the real stack claims.