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.

<koala-falling-leaves>

Canonical

Page content sits at z-10 above the leaves.

<div class="relative overflow-hidden">
    <koala-falling-leaves />
    <div class="relative z-10">
        @* page content sits above the leaves *@
    </div>
</div>

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.

<koala-falling-leaves count="4" />

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.