← Volumine

Framer

3D charts in Framer

Framer sites are usually built by people who care what things look like, and most chart embeds look like a spreadsheet took a holiday. This one is a lit, bevelled object with a real shadow — and it is still a chart, with the numbers next to each piece. It sits in an Embed component and behaves like any other layer.

Live, running in Framer the same way it runs here. Drag it.

Open this chart in the editorChange the numbers, copy your link. No account needed.

How to put it in Framer

  1. 1

    Copy the link from the editor

    Make the chart at volumine.app/crear and press Copy link. Pick a transparent background in the editor if you want it to sit directly on your page colour.

  2. 2

    Insert an Embed component

    In Framer, Insert → Utility → Embed. Choose URL and paste the link, or choose HTML and paste the iframe tag if you want to control the attributes yourself.

  3. 3

    Set the frame, not the chart

    Resize the Embed layer like any other layer. The chart measures its container and redraws, so it follows your breakpoints without a second version.

The chart above, ready to paste

This is the exact tag for the chart you just dragged. It works anywhere that accepts HTML; the steps above are for editors that want a URL instead.

<iframe
  src="https://volumine.app/embed?c=N4IgbiBcCMA0IBcCeAHAplEAjAhgJxHgQAs0BbDSEHAVzwHs8dCQATHBZyUAGxyzQ8AzlADaIAEpohafAGNiLAML0AdnLQoEypgDNt8ABI5Vrert0gAuvBl4AltLGgwOHjSeRRAJm+wAzHD+ACyw0P5WAL5RthqqlKC4cgDWAOYMNKZQoMn2WVQITKpCKPhoqtqRkfB8AsLZIELE9ADuUIUe8GT0rJQg9DQIQva9LE2tAGpuHiKQHWi2zS0ACmh4cdpzeB7VIN0I9moNtAj0EvScCJTztuhorFD+u0LIPAkgpPapxJsADAB0AFYqkA"
  width="100%"
  height="420"
  style="border:0"
  loading="lazy"
  title="Design time by phase"
></iframe>

Height is the only thing worth changing: the chart fits the width on its own, but it cannot guess how tall you want it.

What it costs the page

This is usually what decides whether you are allowed to embed something, so here are the numbers rather than adjectives:

Weight

148 KBThe whole 3D viewer, compressed.

Requests

1One file. Nothing else.

Cookies

0It does not track whoever sees it.

Third parties

0It calls no external server.

That is why an embedded chart adds no obligations to the privacy policy of the page you put it on. It is a constraint of the design, measured on every build — not a marketing promise.

What it will not do

  • Framer previews embeds only on the published site in some plans; in the canvas you may see a placeholder.
  • A transparent chart takes the colour of whatever is behind it. On a busy background the labels get harder to read — the editor has a solid label style for exactly that.
  • Framer page transitions can remount the embed, which restarts the entrance animation. Turn the entrance off in the editor if that bothers you.

Somewhere else?

If it accepts a link or an <iframe>, it accepts this.

Make yours

Paste your own numbers, pick a theme, copy the link. It takes about a minute and you do not need an account for any of it.

Open the editor

How it works · All integrations · Pricing