Primary focus: complete wave visual API while preserving hero-content boundary semantics.
---
layout: home
hero:
name: "Waves"
text: "Level 4"
tagline: "Color, outline, speed, reverse, and custom layers in one page."
waves:
enabled: true
animated: true
height: 112
opacity: 0.96
speed: 1.08
color: "rgba(223, 231, 245, 1)"
reversed: false
outline: true
zIndex: 2
layers:
- amplitude: 12
frequency: 0.011
speed: 0.72
direction: -1
opacity: 0.26
color: "rgba(232, 238, 249, 1)"
- amplitude: 18
frequency: 0.0072
speed: 0.88
direction: 1
opacity: 0.54
color: "rgba(225, 234, 248, 1)"
- amplitude: 24
frequency: 0.0052
speed: 1.12
direction: 1
opacity: 0.98
color: "rgba(218, 229, 247, 1)"
actions:
- theme: brand
text: "Buttons and Features"
link: /en-US/hero/matrix/buttonsFeatures/featuresFullConfig
- theme: outline
text: "Waves API"
link: /en-US/hero/AllConfig
---| Key | All Config |
|---|---|
hero.waves.height | |
hero.waves.opacity | |
hero.waves.speed | |
hero.waves.color | |
hero.waves.reversed | |
hero.waves.outline | |
hero.waves.layers[] |