What it does
Type what people see above the waterline, then add the hidden layers below it. Iceberg Diagram draws the whole iceberg for you: it splits itself to fit the number of layers, with a small peak on top and wider layers as you go deeper. The edges are naturally uneven, and every layer gets its own shade of your base color automatically.
Hover or tap any layer and it lights up, while a detail panel shows its name, items and a short explanation. Labels can sit inside the iceberg or on either side with dotted leader lines. Add gentle waves on the waterline if you like.
Great for brand icebergs, "iceberg of success" stories, culture models, customer-journey service blueprints, pricing and cost breakdowns, and any "visible vs hidden" explainer.
Customizable properties
- Above Items — what's visible above the water
- Levels — title, items (one per line) and a note for every layer below
- Labels — Inside, Side-left or Side-right
- Above Water — how much of the height sits above the waterline
- Roughness and Shape Seed — jagged or smooth edges, plus a new random shape with one click
- Gap — spacing between layers
- Base Color, Deep Color and Depth Shade — deeper layers darken automatically
- Water color, wave height and optional wave animation
- Interactive on/off, Detail Panel on/off, and Open Layer (pre-select a layer)
- Stack Below — on narrow screens the labels move into a tappable layer list
- Colors, radius, padding, spacing and fonts
Why this component
- Add or remove a layer and the iceberg re-splits itself. No shapes to redraw.
- Explains itself: hover, tap or use the keyboard (Tab, Enter, arrow keys) to open any layer's details.
- Mobile-ready: switches to a compact layout automatically.
- Waves play only while visible, and pause on the canvas and for visitors who prefer reduced motion.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
