Ribbonlab Open the editor

How to add an animated 3D background in React and Next.js

Ribbonlab gives you a div that marks where the ribbon goes and a script that draws it. No package to install, no WebGL code to write.

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 React, pick React and press Copy code.

2. Add it to your app

Put the div where the ribbon should be. It fills its own box, so give it a height:

{/* Ribbon made with Ribbonlab */}
<div data-ribbonlab="your-ribbon-id" style={{ height: '100vh' }} />

Load the script once per site. In a plain React app, add it to index.html:

<script src="https://ribbonlab.ayurchenko.xyz/embed/0.1.5.js" defer></script>

In Next.js, load it in the root layout with next/script:

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://ribbonlab.ayurchenko.xyz/embed/0.1.5.js" />
      </body>
    </html>
  );
}

The script also finds ribbons that mount later, so the div can live inside any component and any route.

Behind a hero

<section style={{ position: 'relative', minHeight: '100vh' }}>
  <div data-ribbonlab="your-ribbon-id"
    style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }} />
  <div style={{ position: 'relative', zIndex: 1 }}>
    <h1>Your headline</h1>
  </div>
</section>

The ribbon's own background is transparent, so the section color shows through.

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.