How to use Ribbonlab

Ribbonlab is a free browser tool for designing animated 3D ribbon backgrounds for hero sections. Make a ribbon, then export it as an image or video, or embed the live ribbon in your site.

Add it to your site

• FramerAdd a moving 3D ribbon behind a Framer hero with an Embed.
• WebflowPut the ribbon in a Code Embed behind your hero section.
• React and Next.jsOne div and one script tag, next/script in Next.js.
• WordPressA Custom HTML block in the block editor.

Wix and Notion take the link too: in Ribbonlab pick Code for: URL, then use Embed a site in Wix or /embed in Notion. In Shopify, paste the HTML code into a Custom Liquid section.

Make a ribbon

• Presets: ten finished ribbons, flipped with ← →.
• Turn and zoom: drag the ribbon to turn it, scroll or pinch to zoom, hold Space and drag to move it, 0 resets the view.
• Shape: a single or folded ribbon with its own width, length, thickness, twist and wave. R gives a new random seed.
• Color: palettes of 2 to 6 colors, then saturation, contrast, hue and shadow warmth.
• Texture: silk, satin, velvet, brushed metal, glitter, pearl, holographic, fibre optic and more.
• Effects: bloom, chromatic aberration, depth of field, pixelation, dithering, CRT and vignette.
• Motion: speed, auto-turn, and a seamless loop of 2 to 20 seconds. P pauses.

Your work stays in your browser. Save versions with Save, and Share settings in the menu copies a link that opens Ribbonlab with the same ribbon.

Export

• Image: PNG, JPG or WebP at 1×, 2× or 3×.
• Video: MP4, or WebM that keeps transparency. A seamless loop exports exactly one loop.
• GIF: a seamless loop, 480, 800 or 1200 px wide.
• Code: an HTML iframe, a React snippet, or a link, free to use on any site.