Hero compositions
The hero register decides composition — viewport division, copy hierarchy, visual slot, motion entry. Seven families, three variants each. Every card below links to a real generated page, not a mockup.
Centered
content stacks down the vertical axis; symmetric composition
single column centred horizontally, content occupies top ~70% of viewport
copy block centred top, visual centred below, totalling full viewport height
full viewport, content centred, atmospheric background fills the entire viewport
Split
viewport divided horizontally into copy and visual halves
copy left (40-50%), product visual right (50-60%), full viewport height
copy column (~40%) next to a full-bleed photography panel (~60%)
copy left (~40%), interactive element right (~60%)
Full-bleed
image, video, or 3D fills the viewport; copy overlays
full-viewport photograph as background, content overlaid, soft scrim
full-viewport silent video loop as background, content overlaid
full-viewport interactive 3D scene or WebGL canvas, content overlaid
Composed
asymmetric editorial layout with layered text and image
magazine-spread composition on a 12-col grid with intentional negative space
display type fragments scattered or layered across the viewport
a grid of 4-8 panels filling the viewport, one larger panel carries the headline
Type
display type IS the hero; minimal else
a single massive headline filling 80-100% of viewport width
one or two horizontal strips of moving display type running edge to edge
3-5 lines of display type stacked vertically, each a different scale or weight
Product
the product or artifact leads; copy supports
copy in the upper portion, large product screenshot floating below at a tilt
copy on one side, product shown inside a device frame on the other
copy compact at the top, an actual functioning product surface below
Utility
conversion or function leads; marketing copy is secondary
minimal headline, a single large input centred and dominant in the viewport
copy block, signup form prominent within the hero, social proof beneath
short headline, a wall of customer logos occupying the lower hero