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