01 / Scalability
A real WebGL system.
Most UI libraries give you isolated components dropped here and there. Atelier components share a single canvas and stay aligned to the DOM, so everything scales as one system.
See the componentPremiumhandcraftedReact animations
Atelier UI is a growing collection of quality web animations and creative tools, built with React, TypeScript, Tailwind CSS, Motion, and React Three Fiber.
https://atelier-ui.com/fluid-distortion
Interactive live preview of the Fluid Distortion shader, an Atelier UI component built with React Three Fiber.
motion
react
react-three-fiber
tailwindcss
typescript
Component showcase
unslop your app.
AI offers you speed,Atelier brings taste.
Built for the modern AI workflow. Every animation is set by hand for you to integrate into your project as your own code and to customize however you want.
02 / Performance
Fast and well tested.
Built on Motion and React Three Fiber, in strict TypeScript. Nothing ships until it's thoroughly tested in a real build.
See the component03 / AI integration
Made for agents (too).
Copy a ready-made prompt and your agent integrates the component for you. The source still lands in your codebase, yours to edit. Our AI integration will grow over time.
See the componentno subscription.
One payment.Followed by endless motion.
A growing catalog of scroll scenes, text effects, WebGL shaders, and cursor interactions. Production-ready React code, set by hand. Install them with the CLI, prompt your agent, or copy the source.
plan / 01
Free catalog.
$0
- 25+ open-source components
- Production-ready, typed React code
- Shared WebGL canvas system
- CLI install, code you own
- MIT licensed, yours forever
- Community support
plan / 02
Get everything, forever.
$79.99
- Shader Studio, live editing and export
- Every future pro release included
- Everything in the free catalog
- 20 pro-only components, and counting
- One payment, no subscription
- Page transitions
assembled with care