Atelier

Overview

Atelier UI is a Motion and React Three Fiber component system for React and Next.js, designed and built by Jérémie Nallet in Paris. Components are copied into the project with the shadcn CLI and stay fully customizable, covering backgrounds, text animations, cursor interactions, scroll effects, 3D galleries and page transitions.

What sets it apart is a shared WebGL system: every WebGL component renders into a single canvas with shared textures, shaders and post-processing, and Lenis smooth scroll runs on the same Motion loop so effects stay aligned to the DOM. The free catalog has 25+ MIT-licensed components; a one-time Pro license adds 14 pro-only components, installed with the same command and a license key.

Features

• Shader effects: Fluid distortion, gradient flow, glowing fog, halftone glow and liquid, lens and pixel media.
• 3D galleries: Orbit, sphere and spiral galleries plus infinite gallery, parallax and zoom.
• Text effects: Text scramble, split, bounce, roll, fluid WebGL text, letter swarm and falling text.
• Cursor interactions: Pixel trail, image trail, magnify trail, dither cursor, magnetic dot grid and hover burst.
• Scroll effects: Scattered scroll, pixel scroll, wavy scroll and stacking grid.
• Page transitions: Clip, band, stripe and pixel transitions via TransitionPage and TransitionLink (Next.js 15.3+).
• Agent skill file: Each install writes a skill file that tells coding agents how to wire the component.

Tech stack

• React 19, Next.js, TypeScript
• Tailwind CSS v4
• Three.js, React Three Fiber, Drei, Postprocessing
• Motion, Lenis

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @atelier/component-name