shadcn.io is not affiliated with official shadcn/ui
Split 3D Viewer Hero Block for React
A split hero for a browser-based 3D editor: a headline, a Shine Button, a second action and three ticks on one side of a divider, and on the other a dark editor viewport in a hairline frame with plus marks on its corners.
Installation
Overview
A split-layout hero with a 3D editor's viewport beside the copy, for React with Base UI. The section sits on the page's drafting lines: two solid rails at the edges of the page column that continue into the blocks above and below, and a rule along its top edge that runs to the page's edges, with a plus mark on each crossing. Every line is the theme's border colour, so it follows any preset. A divider splits the column, with a plus mark where it meets the top rule. On the start side an announcement pill links to Plinth 3.0, a browser-based 3D editor, then a headline, a subtitle, a primary ShineButton and an outline Button, both links, and three ticks. On the other side a window titled scene.gltf sits in a hairline frame with plus marks on its corners: an isometric cube on a faint GridPattern floor, a vertex and face count, three view tools, a mode chip and an XYZ axis gizmo. The page follows the theme; only the viewport is dark, as 3D editors are, drawn in your theme's own dark tokens so it follows your preset. Each part fades in once with CSS transitions that stay still under reduced motion. Made for 3D modelling tools, CAD apps, game engines and WebGL product pages.
FAQ
How do I change the object in the viewport?
The cube is a small SVG drawn from CUBE at the top of the file: an outline, three faces and a highlighted ridge, in a 200 by 200 box. Change the path data for another shape, keeping the opaque outline first so the grid doesn't show through the faces. The faces are shaded with the foreground colour at three strengths, so they light correctly in any preset. SCENE holds the stats in the corner and FILE the window's title.
How do I put a real 3D canvas in the window?
Replace the cube's svg with the canvas your 3D engine draws into, sized to fill the GridPattern box, which keeps a 4:3 ratio at every width. The stats, the view tools, the mode chip and the gizmo are positioned absolutely over it, so they stay as a heads-up display on top of a live scene. Once the viewport is interactive, take aria-hidden and inert off the window and give the canvas a label and real, named buttons for its tools.
Why is the viewport dark in the light theme?
3D viewports are dark in almost every editor, because shaded models read best on a dark ground. Only the window carries the dark class, never the section, so the copy, the lines and the frame follow the page theme while everything inside the window uses your theme's dark tokens even on a light page. A comment in the file says so.
How are the lines and the frame drawn?
With the Guides component, an aria-hidden layer that draws the lines of the box it sits in. The page column has Guides bleed marks="top" rules="top": two side rails and one top rule with a plus on each crossing. The divider is the second column's lg:border-s plus Guides marks="start" rules="none" sides={false}. The frame around the window is Guides extend="sm" marks="corners" on its box. On a phone the divider becomes a ruled line between the text and the viewport.
Where do the gizmo's colours come from?
From the theme's status roles: the X axis is destructive, Y is success and Z is info, the red, green and blue every 3D tool uses for its axes. They're kept in a small AXIS_TONES table, so a preset that shifts those hues shifts the gizmo with it. Each axis is also lettered, so the colours aren't the only clue.
How do screen readers read the hero?
They read the copy and skip the viewport. The window is an illustration with nothing to operate, so it's aria-hidden and inert: its view tools look like buttons but are out of the tab order. The headline is the block's one h1, the ticks are a list whose check icons are hidden, and the pill and both calls to action are links named by their text. On a phone the Shine Button is on the first screen.
Related
- Pro
Split Image Editor Hero
Product windowsA split hero for a browser photo editor: the headline, three checks and a Shine Button beside a divider and a wide editor window that runs off the end rail, with a photo being cropped, adjustments and layers.
- Pro
Split Map Canvas Hero
Diagrams and mapsA split hero beside a wide map canvas that runs flush to the end rail: eight pulsing office pins and routes between them, with a closing band of three stats.
- Pro
Split Architecture Diagram Hero
Diagrams and mapsA reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.
- Pro
Perspective Grid Hero
BackdropsA showcase hero for a browser racing engine: one panel between solid page rails where a perspective floor grid rolls toward you under a beta pill, a headline, a Shine Button and an outline button.
- Pro
Phone Trio App Download Hero
Mobile and mediaA centered showcase hero for a mobile app: a headline, a Shine Button to the App Store with Google Play beside it and a proof line over a hairline band of three phones that run off the bottom.