Atelier UI®

Read the docsGithub
Docs 0.7.0

Getting started

  • Browse Catalog
  • Installation
  • How to contribute
  • Code of conduct

Components (19)

  • Dither Flow
    pro
  • Glowing Fog
    pro
  • Halftone Glow
    pro
  • Fluid Distortion
    new
  • Image Trail
    new
  • Liquid Image
    new
  • Magnetic Dot Grid
    new
  • Pixel Trail
    new
  • Pixelated Text
    new
  • Simple Scramble
    new
  • Text Bounce
    new
  • Text Fluid
    pro
  • Text Roll
    new
  • Curve Image
    new
  • Elastic Stick
    pro
  • Infinite Gallery
    new
  • Infinite Parallax
    new
  • Infinite Zoom
    new
  • Scattered Scroll
    new
Atelier UI 0.7.0 ©2026
Star on githubBuy me a coffeellms.txt
Components

Components (19)

Showing 19 of 19

Background Effect

Dither Flow

A dithered WebGL flow field background.

React Three Fiber
Drei
Postprocessing

Glowing Fog

Dynamic fog and light beam cursor follow effect.

React Three Fiber
Drei
Postprocessing

Halftone Glow

A WebGL pulsing glow effect with halftone rendering.

React Three Fiber
Drei
Postprocessing

Cursor Effect

Fluid Distortion

A GPU-accelerated fluid distortion effect that reacts to cursor movement

React Three Fiber
Drei
Postprocessing
new

Image Trail

Cursor trail effect that spawns images along it's path.

Motion
Tailwind CSS
new

Liquid Image

An SEO-friendly WebGL image with a cursor-driven liquid ripple effect

React Three Fiber
Drei
new

Magnetic Dot Grid

A 2D canvas-based interactive dot grid with magnetic cursor effect

Canvas
Tailwind CSS
new

Pixel Trail

A 2D canvas-based pixelated cursor trail that can sample colors from images.

Canvas
Tailwind CSS
new

Text Effect

Pixelated Text

A 2D canvas-based animated pixelated SEO friendly text effect.

Canvas
Tailwind CSS
new

Simple Scramble

A simple text scramble effect that reveals characters from left to right.

JS Animation
Tailwind CSS
new

Text Bounce

Letters bounce away from the cursor on hover and spring back into place.

motion
Tailwind CSS
new

Text Fluid

SEO-friendly text with an animated WebGL shimmer and distortion effect.

React Three Fiber
Drei

Text Roll

Interactive rolling text effect on hover, mount and scroll.

Tailwind CSS
Motion
new

Scroll Effect

Curve Image

An SEO-friendly WebGL image with scroll-velocity driven bend and chromatic aberration.

React Three Fiber
Drei
Lenis
new

Elastic Stick

Items that bounce and stick to the center while scrolling.

Motion
Lenis
Tailwind CSS

Infinite Gallery

Zero-dependency infinite horizontal gallery with drag/wheel input, and transform modes.

JS Animation
Tailwind CSS
new

Infinite Parallax

Composable infinite parallax column effect with auto-scroll and repeating content.

Motion
Lenis
Tailwind CSS
new

Infinite Zoom

Mouse wheel infinite zoom effect.

Motion
Tailwind CSS
new

Scattered Scroll

Items that spread apart horizontally while scrolling.

Motion
Tailwind CSS
Lenis
new
Star on githubBuy me a coffeellms.txt