Foundations

ThinkingTree

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.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

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

Use

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

Source: components/src/ · Guidelines: components/catalog/ThinkingTree/README.md