# Ribbonlab

> Free browser tool for designing animated 3D ribbon backgrounds. Pick a preset, tune color, texture and motion, then export MP4, WebM, GIF or PNG, or embed the live ribbon in any site with one snippet. No account, no sign-up.

Ribbonlab runs in desktop and mobile browsers with WebGL. It is made by Andriy Yurchenko, an AI product architect and designer who builds his own tools.

## Use

- [Editor](https://ribbonlab.ayurchenko.xyz/): the whole tool on one page. Drag the ribbon to turn it, scroll or pinch to zoom, use the panel on the right for every setting.

## Guides

- [How to use Ribbonlab](https://ribbonlab.ayurchenko.xyz/guides/): presets, controls, export formats.
- [Animated 3D background in Framer](https://ribbonlab.ayurchenko.xyz/guides/framer/): Embed component set to URL.
- [Animated 3D background in Webflow](https://ribbonlab.ayurchenko.xyz/guides/webflow/): Code Embed element behind the hero.
- [Animated 3D background in React and Next.js](https://ribbonlab.ayurchenko.xyz/guides/react/): one div and one script, next/script in Next.js.
- [Animated 3D background in WordPress](https://ribbonlab.ayurchenko.xyz/guides/wordpress/): Custom HTML block, no plugin.

## What you can change

- Presets: 10 finished ribbons, flipped with the left and right arrow keys.
- Shape: single or folded ribbon, width, length, thickness, twist, wave, seed.
- Color: palettes of 2 to 6 colors, accent mix, shadow tint, saturation, contrast, hue.
- Texture: silk, satin, velvet, brushed metal, matte, glitter, pearl, holographic, fibre optic and more, with strength and density.
- Effects: bloom, chromatic aberration, depth of field, pixelation, dithering, CRT, vignette.
- Motion: speed, auto-turn, seamless loop of 2 to 20 seconds.
- Background: light, dark or any color.

## Export

- Image: PNG.
- Video: MP4 (H.264) or WebM (VP9, keeps transparency). Seamless loops export exactly one loop.
- GIF: seamless loops at 25 fps, 480, 800 or 1200 px wide.
- Code: an HTML iframe, a React snippet, or a plain URL for Framer, Webflow, Wix and Notion. The embed is free to use on any site.

## Keyboard

- Left and right arrows: previous or next preset
- P: pause or play
- R: new seed
- X: reset the view
- H: show or hide the panel
- Space and drag: move the ribbon

## Author

- [Andriy Yurchenko](https://ayurchenko.xyz/): AI product architect and designer, 14 years of designing software across AI infrastructure, developer tools and fintech. Ribbonlab is his own product.