Ribbonlab Open the editor

How to add an animated 3D background in Framer

Design a flowing 3D ribbon in Ribbonlab, then show it in Framer with the built-in Embed component. It takes about two minutes and costs nothing.

1. Make the ribbon

  1. Open Ribbonlab. Flip through the presets with ← → or start from the default ribbon.
  2. Tune it in the panel: shape, colors, texture, effects and motion. Drag the ribbon to turn it, scroll or pinch to zoom.
  3. Press Export (or E), choose Code, then pick what your site takes under Code for.
  4. Set Background to Hide to keep the ribbon see-through over your own section color, or Show to bring the background color along.

For Framer, pick URL and press Copy link.

2. Add it to Framer

  1. In your Framer project, open Insert and add an Embed component to the hero section.
  2. In the Embed's properties set the type to URL and paste the link.
  3. Set the Embed to fill the section: position Absolute, pinned to all four sides, width and height at 100%.
  4. Move the Embed to the bottom of the section's layers so headings and buttons sit on top of it.
  5. Publish. The ribbon plays on the live site and in the preview.

The URL embed is the most reliable option in Framer. The HTML option (Code for: HTML, then an Embed set to HTML) works too and gives you the same frame.

A video background instead

If you prefer a file, export MP4 from Ribbonlab with a seamless loop, then drop it into a Framer Video component set to autoplay, loop and muted. A live embed stays sharp at any size and weighs less than a long video.

Questions

Is it free?
Yes. Ribbonlab and the embed are free to use on any site, personal or commercial. No account, no sign-up.
Will it slow the page down?
The ribbon renders with WebGL on the visitor's GPU. It pauses while it is off screen and stays still for visitors who turn on reduced motion. The embed loads three.js (about 170 KB) from jsDelivr.
Can I change the ribbon later?
The code points to the ribbon you exported. Make your changes in Ribbonlab, export again and replace the code.
Can I use a video instead?
Yes. Export MP4, or WebM to keep transparency, and turn on a seamless loop so it repeats without a jump.