---
name: "@atelier"
slug: "atelier"
description: "A WebGL and Motion system for React that runs many effects on one shared canvas. Shader, cursor, scroll and text effects, 3D galleries, plus page transitions for Next.js. Built with Three.js, React Three Fiber, Motion, and Lenis smooth scroll."
category: "Animated components"
tags: ["3d", "ai", "animation", "backgrounds", "glassmorphism", "media", "payments", "retro", "text-effects"]
framework: "react"
license: "MIT"
author: "whatisjery"
website: "https://www.atelier-ui.com"
github: "https://github.com/whatisjery/atelier-ui"
registry: "https://www.atelier-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 17
component_count: 51
generated_at: "2026-09-05T09:50:59.044Z"
---

# @atelier

A WebGL and Motion system for React that runs many effects on one shared canvas. Shader, cursor, scroll and text effects, 3D galleries, plus page transitions for Next.js. Built with Three.js, React Three Fiber, Motion, and Lenis smooth scroll.

## Links

- Website: https://www.atelier-ui.com
- GitHub: https://github.com/whatisjery/atelier-ui
- Registry JSON: https://www.atelier-ui.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/atelier
- This file: https://sh4dcn.vercel.app/md/atelier.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.atelier-ui.com/r/registry.json
pnpm dlx shadcn@latest add https://www.atelier-ui.com/r/registry.json
bunx shadcn@latest add https://www.atelier-ui.com/r/registry.json
# clone the source repo
git clone https://github.com/whatisjery/atelier-ui.git
# fetch the raw registry index
curl -s https://www.atelier-ui.com/r/registry.json
```

## Components (51)

| name | type | description | install |
| --- | --- | --- | --- |
| fluid-distortion | registry:component | A fluid distortion effect that follows the cursor. | `npx shadcn@latest add https://www.atelier-ui.com/r/fluid-distortion.json` |
| pixel-trail | registry:component | A trail of pixels that follows the cursor. | `npx shadcn@latest add https://www.atelier-ui.com/r/pixel-trail.json` |
| magnetic-dot-grid | registry:component | A grid of dots that reacts to the cursor. | `npx shadcn@latest add https://www.atelier-ui.com/r/magnetic-dot-grid.json` |
| pixelated-text | registry:component | Text that pixelates in and out. | `npx shadcn@latest add https://www.atelier-ui.com/r/pixelated-text.json` |
| image-trail | registry:component | A trail of images that follows the cursor. | `npx shadcn@latest add https://www.atelier-ui.com/r/image-trail.json` |
| infinite-gallery | registry:component | A gallery that loops forever. | `npx shadcn@latest add https://www.atelier-ui.com/r/infinite-gallery.json` |
| text-scramble | registry:component | Text that scrambles into place. | `npx shadcn@latest add https://www.atelier-ui.com/r/text-scramble.json` |
| liquid-media | registry:component | An image or video that ripples under the cursor. | `npx shadcn@latest add https://www.atelier-ui.com/r/liquid-media.json` |
| infinite-parallax | registry:component | Infinite scrolling columns with parallax. | `npx shadcn@latest add https://www.atelier-ui.com/r/infinite-parallax.json` |
| infinite-zoom | registry:component | An infinite zoom through images. | `npx shadcn@latest add https://www.atelier-ui.com/r/infinite-zoom.json` |
| scattered-scroll | registry:component | Items that spread apart while scrolling. | `npx shadcn@latest add https://www.atelier-ui.com/r/scattered-scroll.json` |
| text-split | registry:component | A utility that splits text for animation. | `npx shadcn@latest add https://www.atelier-ui.com/r/text-split.json` |
| text-bounce | registry:component | Text that bounces away on hover. | `npx shadcn@latest add https://www.atelier-ui.com/r/text-bounce.json` |
| webgl-portal | registry:component | A shared portal between the DOM and the canvas. | `npx shadcn@latest add https://www.atelier-ui.com/r/webgl-portal.json` |
| webgl-provider | registry:component | A single shared WebGL canvas for the whole app. | `npx shadcn@latest add https://www.atelier-ui.com/r/webgl-provider.json` |
| smooth-scroll | registry:component | Smooth scrolling for the whole page. | `npx shadcn@latest add https://www.atelier-ui.com/r/smooth-scroll.json` |
| webgl-image | registry:component | A WebGL plane that mirrors an image. | `npx shadcn@latest add https://www.atelier-ui.com/r/webgl-image.json` |
| webgl-video | registry:component | A WebGL plane that mirrors a video. | `npx shadcn@latest add https://www.atelier-ui.com/r/webgl-video.json` |
| webgl-text | registry:component | A WebGL plane that mirrors text. | `npx shadcn@latest add https://www.atelier-ui.com/r/webgl-text.json` |
| curve-media | registry:component | An image or video that bends as you scroll. | `npx shadcn@latest add https://www.atelier-ui.com/r/curve-media.json` |
| lens-media | registry:component | An image or video with a cursor-following lens. | `npx shadcn@latest add https://www.atelier-ui.com/r/lens-media.json` |
| text-fluid | registry:component | Text with an animated shimmer and distortion. | `npx shadcn@latest add https://www.atelier-ui.com/r/text-fluid.json` |
| pixel-media | registry:component | An image or video that breaks into pixels under the cursor. | `npx shadcn@latest add https://www.atelier-ui.com/r/pixel-media.json` |
| webgl-scene | registry:component | A viewport with its own scene and camera on the shared canvas. | `npx shadcn@latest add https://www.atelier-ui.com/r/webgl-scene.json` |
| sphere-gallery | registry:component | A gallery of images mapped onto a sphere. | `npx shadcn@latest add https://www.atelier-ui.com/r/sphere-gallery.json` |
| spiral-gallery | registry:component | An infinite carousel of images staggered along a spiraling tube that scrolls indefinitely. | `npx shadcn@latest add https://www.atelier-ui.com/r/spiral-gallery.json` |
| pixel-scroll | registry:component | A grid of pixels that fills in as you scroll. | `npx shadcn@latest add https://www.atelier-ui.com/r/pixel-scroll.json` |
| orbit-gallery | registry:component | A gallery of images on rotating rings. | `npx shadcn@latest add https://www.atelier-ui.com/r/orbit-gallery.json` |
| edge-bounce | registry:component | A wrapper that bounces away from the cursor on hover. | `npx shadcn@latest add https://www.atelier-ui.com/r/edge-bounce.json` |
| agent-rules | registry:component | Wiring rules an AI agent reads before using Atelier components. | `npx shadcn@latest add https://www.atelier-ui.com/r/agent-rules.json` |
| base | registry:component | The Atelier system: one shared canvas, smooth scroll, and the agent rules. | `npx shadcn@latest add https://www.atelier-ui.com/r/base.json` |
| text-roll | registry:component | Text that rolls through its letters. | `npx shadcn@latest add https://www.atelier-ui.com/r/text-roll.json` |
| halftone-glow | registry:component | A glowing halftone background. | `npx shadcn@latest add https://www.atelier-ui.com/r/halftone-glow.json` |
| elastic-stick | registry:component | Items that bounce and stick to the center while scrolling. | `npx shadcn@latest add https://www.atelier-ui.com/r/elastic-stick.json` |
| glowing-fog | registry:component | A glowing fog background. | `npx shadcn@latest add https://www.atelier-ui.com/r/glowing-fog.json` |
| gradient-flow | registry:component | An animated flowing gradient background. | `npx shadcn@latest add https://www.atelier-ui.com/r/gradient-flow.json` |
| wavy-scroll | registry:component | Text and images that wave across the screen while scrolling. | `npx shadcn@latest add https://www.atelier-ui.com/r/wavy-scroll.json` |
| letter-swarm | registry:component | Letters that come together into readable text as you scroll, then scatter again. | `npx shadcn@latest add https://www.atelier-ui.com/r/letter-swarm.json` |
| magnify-trail | registry:component | Images that traverse the screen, magnifying and rising to the top of the stack as they pass the center. | `npx shadcn@latest add https://www.atelier-ui.com/r/magnify-trail.json` |
| stacking-grid | registry:component | A configurable grid of cards that stacks to the center while scrolling. | `npx shadcn@latest add https://www.atelier-ui.com/r/stacking-grid.json` |
| scattered-grid | registry:component | A grid that scatters away from the hovered item. | `npx shadcn@latest add https://www.atelier-ui.com/r/scattered-grid.json` |
| hover-burst | registry:component | Images or items that burst around the cursor when it enters an element. | `npx shadcn@latest add https://www.atelier-ui.com/r/hover-burst.json` |
| tag-cloud | registry:component | Flat images scattered over a draggable sphere, where depth is only a change of scale. | `npx shadcn@latest add https://www.atelier-ui.com/r/tag-cloud.json` |
| falling-text | registry:component | Text that falls and bounces when the cursor moves over it. | `npx shadcn@latest add https://www.atelier-ui.com/r/falling-text.json` |
| image-bloom | registry:component | Images that pop up along the cursor's path and fade out behind it. | `npx shadcn@latest add https://www.atelier-ui.com/r/image-bloom.json` |
| dither-cursor | registry:component | A trail of dithered dots that follows the cursor and bends the scene behind it. | `npx shadcn@latest add https://www.atelier-ui.com/r/dither-cursor.json` |
| page-transition | registry:component | A route transition engine that covers the page during navigation. | `npx shadcn@latest add https://www.atelier-ui.com/r/page-transition.json` |
| clip-transition | registry:component | A page transition that clips and scales the page behind a cover. | `npx shadcn@latest add https://www.atelier-ui.com/r/clip-transition.json` |
| band-transition | registry:component | A page transition that sweeps staggered bands across the page. | `npx shadcn@latest add https://www.atelier-ui.com/r/band-transition.json` |
| stripe-transition | registry:component | A page transition that wipes a staggered grid of stripes across the page. | `npx shadcn@latest add https://www.atelier-ui.com/r/stripe-transition.json` |
| pixel-transition | registry:component | A page transition that pixelates the screen with a fixed grid of squares. | `npx shadcn@latest add https://www.atelier-ui.com/r/pixel-transition.json` |

## For AI agents

```text
You are adding components from @atelier to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/atelier.md) for the component list.
2. Fetch the machine-readable index: https://www.atelier-ui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: atelier).
```