05 Pyramid Diagram

■ What it does

Type your levels from top to bottom and Pyramid Diagram draws the layers for you — evenly split, with a note beside each level connected by a dotted line. Pick two colors and every layer gets its own shade, with text color adjusting automatically for contrast.

Great for brand pyramids, marketing funnels, Maslow-style hierarchies, pricing tiers and learning paths.

■ Customizable properties

• Layers — label, note and (optional) custom color for each level

• Shape — Pyramid or Funnel, with a Pointed or Flat tip

• Colors — Gradient (Top → Bottom, auto-blended) or Custom per layer

• Gap — spacing between layers

• Side Notes — show or hide, adjustable notes width

• Compact Below — on narrow screens, notes move into a caption under the pyramid (tap a layer to read it)

• Hover Highlight — focus one layer and its note

• Entrance — layers stack in once when scrolled into view

• Style & Fonts — note, line and light/dark text colors; layer and note fonts

■ Why this component

• No drawing: change the list, the shapes follow.

• Readable on every layer: text flips between light and dark based on the layer color.

• Mobile-ready: switches to a compact layout with a tap-to-read caption.

Built with code but fully customizable via property controls — no coding needed. Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component.