Components
Falling leaves
Falling leaves
Decorative eucalyptus-leaf animation used on the error / 404 / forbidden / account-not-found pages to soften the empty space. Extracted from NotFound.cshtml so the keyframes + leaf grid live in one helper instead of being copy-pasted across error pages.
Canonical
Page content sits at
z-10 above the leaves.
Drop inside any relative overflow-hidden wrapper. Honours
prefers-reduced-motion — no animation for users who've requested it.
Variants
Use
count to dial the density.
Props
| Attribute | Values | Notes |
|---|---|---|
| count | int (1–8) | Number of leaves. Default 8, capped at the size of the internal layout table. |
Do & don't
8 eucalyptus leaves drifting behind a 404 hero
Do
Use only on error / 404 / empty-state hero pages. The motion is brand decoration, not content.
Falling leaves on a dashboard tile
Don't
Don't sprinkle decoration on functional surfaces. The animation pulls focus from the data and the constant motion is distracting in long sessions.