Hero Matrix Configuration Coverage
This page maps runtime keys to nested showcase pages.
API authority is centralized in one page:
Hero Root
| Key | Showcase |
|---|---|
hero.name / hero.text / hero.tagline | |
hero.layout.viewport | |
hero.actions[] | |
page-level cssVars |
Background Single Mode
| Key | Showcase |
|---|---|
hero.background.type: color | |
hero.background.type: image | |
hero.background.type: video | |
hero.background.type: shader | |
hero.background.type: particles | |
global controls (opacity/brightness/contrast/saturation/filter/cssVars/style) |
Background Layer Mode
| Key | Showcase |
|---|---|
hero.background.layers[] basic composition | |
layers[].zIndex/opacity/blend | |
layers[].shader + layers[].particles | |
| theme-synced layered composition | |
layers[].style/cssVars with root style/cssVars |
Waves
| Key | Showcase |
|---|---|
| default wave bridge | |
| shape + opacity + layer tuning | |
| mobile tuning | |
| color/reversed/outline/zIndex | |
unsupported background.type: waves behavior |
Hero Image Types
| Key | Showcase |
|---|---|
hero.image.type: image | |
hero.image.type: gif | |
hero.image.type: video | |
hero.image.type: lottie | |
hero.image.type: model3d | |
frame controls (shape/width/height/maxWidth/maxHeight/padding/radius) |
Floating Elements
| Key | Showcase |
|---|---|
hero.floating.enabled + text baseline | |
| card-focused surface controls | |
| mixed element types | |
| motion/density/blur/gradient controls |
Buttons and Features
| Key | Showcase |
|---|---|
| action themes and button layout | |
| feature card scrolling | |
full feature config (featuresConfig) |