How it works

Atelier UI is a motion and WebGL component system for React that mainly targets Next.js.

Part of the catalog is free and open source, developed in a separate repository on GitHub. To contribute to it, see the contribution guide. The rest requires a one-time license.

One shared WebGL canvas

WebGL components are built with React Three Fiber. They all render into a single <Canvas> mounted by the WebGL Provider, so the application runs one WebGL context instead of one per effect.

Without it, each effect would mount its own <Canvas> and create its own context. Contexts cannot share textures, shaders, or post-processing, so every effect would carry its own GPU cost. One shared context lets every effect reuse the same resources.

The provider ships with any WebGL component and must wrap the application at the root layout:

import { WebglProvider } from "@/components/webgl-provider";

export default function RootLayout({ children }) {
  return <WebglProvider>{children}</WebglProvider>;
}

For canvas options and the full API, see the WebGL Provider reference.

Smooth scrolling

Smooth Scroll adds Lenis smooth scrolling to the page. Every frame moves the scroll, then the page, then renders the canvas, all on one Motion loop. WebGL elements stay exactly on top of the elements they follow.

Smooth Scroll installs automatically with any scroll component. It sits next to the WebGL Provider at the root, and since both run on the same loop, nesting order does not matter:

<SmoothScroll>
  <WebglProvider>{children}</WebglProvider>
</SmoothScroll>

For scroll options and the full API, see the Smooth Scroll reference.