Skip to content
Complete Layer Stack
Combines image, color, shader, and particles in one layered background.
Model3D Foreground
Hero media slot uses a framed 3D model with auto-rotate interaction.
Floating Overlay
Cards, badges, code, and status elements float above all render layers.
rgba-First Particle Colors
Particle palette and base colors use rgba format for direct tuning.
Complete Layer Stack
Combines image, color, shader, and particles in one layered background.
Model3D Foreground
Hero media slot uses a framed 3D model with auto-rotate interaction.
Floating Overlay
Cards, badges, code, and status elements float above all render layers.
rgba-First Particle Colors
Particle palette and base colors use rgba format for direct tuning.
Complete Layer Stack
Combines image, color, shader, and particles in one layered background.
Model3D Foreground
Hero media slot uses a framed 3D model with auto-rotate interaction.
Floating Overlay
Cards, badges, code, and status elements float above all render layers.
rgba-First Particle Colors
Particle palette and base colors use rgba format for direct tuning.
Complete Layer Stack
Combines image, color, shader, and particles in one layered background.
Model3D Foreground
Hero media slot uses a framed 3D model with auto-rotate interaction.
Floating Overlay
Cards, badges, code, and status elements float above all render layers.
rgba-First Particle Colors
Particle palette and base colors use rgba format for direct tuning.
Complete Layer Stack
Combines image, color, shader, and particles in one layered background.
Model3D Foreground
Hero media slot uses a framed 3D model with auto-rotate interaction.
Floating Overlay
Cards, badges, code, and status elements float above all render layers.
rgba-First Particle Colors
Particle palette and base colors use rgba format for direct tuning.
Complete Layer Stack
Combines image, color, shader, and particles in one layered background.
Model3D Foreground
Hero media slot uses a framed 3D model with auto-rotate interaction.
Floating Overlay
Cards, badges, code, and status elements float above all render layers.
rgba-First Particle Colors
Particle palette and base colors use rgba format for direct tuning.
Layers Level 6: Full Fusion Showcase
Primary focus: a single page that combines all major hero surfaces in one composition.
Surfaces Included
| Surface | Config path |
|---|---|
| Image background layer | hero.background.layers[].type: image |
| Color overlay layer | hero.background.layers[].type: color |
| Shader animation layer | hero.background.layers[].type: shader |
| Particle layer | hero.background.layers[].type: particles |
| Model hero image | hero.image.type: model3d |
| Floating overlay elements | hero.floating.* |
API Keys Demonstrated
| Key | All Config |
|---|---|
hero.background.layers[] | |
layers[].zIndex/opacity/blend | |
layers[].image/color/shader/particles | |
hero.image.model3d | |
hero.floating.* |
Notes
- This page is intentionally dense to validate cross-system compatibility.
- Particle colors use
rgba(...)strings to match the new color-editing convention. movement.tiltVarianceis set for better small-particle directional variety.