# ThinkingTree

Group: Foundations

Visualli's loader: the logo's tree, drawn small. The trunk rises and the branches grow in once; then the crown twinkles — every light glows on its own rhythm (fixed, pseudo-random durations and offsets), so it never reads as a sweep or a circle, yet the crown always keeps the logo's shape (lights dim to 55%, never off). Larger trees add a soft halo to each glowing light.
- Drawn after the logo, with the tree kept quiet so the lights lead: a solid trunk, fine wavy branches (plus two straight circuit branches), faint hairline roots and two circuit roots, under a dense, round crown of 28 lights in the logo's color arrangement (teal and harbor left, iris and berry on top, coral, amber and sun right).
- Provide `label` describing the work ("Reading your PDF…"); `showLabel={false}` keeps it for screen readers only.
- Any `size`: under 36px the lines thicken slightly so they survive in the chat dock and halos are left out; over 80px lines thin out to stay delicate. Trunk and branches use `ink`, so they turn light in dark themes.
- Reduce motion shows the grown tree with every light on, without animation.
- Lives in the chat dock, an empty state or a loading panel — never on top of the canvas. It is not the logo: use the `visualli-tree-color.png` file for the brand mark.


## Props

```ts
export interface ThinkingTreeProps { label?: string; size?: number; showLabel?: boolean }
```

## Use

```ts
import { ThinkingTree } from '@visualli/design-system/components';
```