Tree Background Mode

This page demonstrates the ambient tree visualization background. The botanical markers represent trees from the yard inventory, rendered as subtle watermarks behind the content.

Scroll down to see the parallax effect - the background moves slower than the foreground content, creating depth.

Botanical Markers

Trees are represented using field-guide style symbols:

• Deciduous - Sun-burst pattern (circle with radiating lines)
• Conifer - Stylized pine triangle with branch lines
• Fruit - Target symbol (concentric circles)

Marker size and opacity vary based on tree age - older trees appear larger and more prominent.

Technical Details

The background uses a canvas element sized to 3x the viewport height, allowing for extended scrolling. Grid lines are drawn at very low opacity (5%) to provide subtle structure without competing with content.

Parallax is achieved by translating the wrapper element on scroll, with the background moving at a configurable fraction of the scroll speed (default: 0.5x).

Usage

Include in any page with:

{% include "tree-bg.njk" %}

Options can be customized by setting treeBgOptions before the include with properties like opacity, parallax, and color.