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.
