How it works

Atelier UI is a motion and React Three Fiber component system, built for React and Next.js.

You paste one prompt into your coding agent and it installs the component with everything it depends on. Nothing on this page needs to be set up by hand.

Install with your agent

Copy the prompt under any component preview and paste it into your coding agent:

Prompt

Add Atelier's Lens Media to my app.

If there is no components.json, run: npx shadcn@latest init -d
Then run: npx shadcn@latest add @atelier/lens-media
That writes the atelier-ui skill under .agents/skills and .claude/skills. Follow it.

Props: type="image" size={0.12} softness={0.5} aberration={0.18}

The prompt includes the props you set on the live preview.
SKILL.md tells your agent how to set up the component, and every component installs it.
It installs to .agents/skills and .claude/skills, so Claude Code, Codex, Cursor, Copilot and Gemini CLI all pick it up. The two files are identical.
Missing Tailwind CSS v4 stops the install, and your agent asks before adding it.
Pro components install the same way once your key is in .env.local, see license.

What the agent wires

Every component plugs into three shared systems, mounted once in your root layout:

app/layout.tsx

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <SmoothScroll>
                    <WebglProvider>
                        <ClipTransition>
                            <TransitionPage>{children}</TransitionPage>
                        </ClipTransition>
                    </WebglProvider>
                </SmoothScroll>
            </body>
        </html>
    )
}

One WebGL provider

Every WebGL component renders into a single <Canvas>.

One WebGL context, not one per effect
Textures, shaders, and post-processing are shared
Adding an effect doesn't add a context

For canvas options, see the WebGL Provider reference.

One Smooth Scroll provider

Smooth Scroll runs Lenis on the same Motion loop that renders the canvas.

Each frame updates the scroll position, then the page, then the canvas
WebGL effects synchronize with the DOM at any scroll speed

For scroll options, see the Smooth Scroll reference.

One transition system

TransitionPage wraps the route content and TransitionLink triggers the change.

Back and forward keep the previous scroll position
Page transitions are compatible with WebGL components

For transition options, see the Page Transition reference.

Not using AI?

The prompt is one of three install paths on every component page. The other two are folded underneath it:

CLI install runs a single npx shadcn@latest add command that pulls the component and its dependencies
Copy files manually lists every file the component uses, so you install the dependencies and copy the source yourself