Atelier UI®

Read the docsGithub
Docs 1.0.0

Getting started

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

Components (28)

  • Clip Reveal
  • Stripe Wipe
  • Sweep Exit
  • Dither Flow
    pro
  • Glowing Fog
    pro
  • Halftone Glow
    pro
  • Fluid Distortion
  • Image Trail
  • Lens Media
  • Liquid Media
  • Magnetic Dot Grid
  • Pixel Media
  • Pixel Trail
  • Pixelated Text
  • Text Bounce
  • Text Fluid
  • Text Roll
  • Text Scramble
  • Curve Media
  • Elastic Stick
    pro
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Scattered Scroll
  • Text Split
  • WebGL Image
  • WebGL Text
  • WebGL Video
Atelier UI 1.0.0 ©2026
Star on githubBuy me a coffeellms.txt
ComponentsCollage

Components (28)

Showing 28 of 28

Transition effect

Clip Reveal

A clip-path reveal that scales the content from a starting inset to fullscreen.

Motion
Tailwind CSS

Stripe Wipe

A staggered stripe wipe that reveals the page beneath an overlay.

Motion
Tailwind CSS

Sweep Exit

A staggered clip-path sweep that reveals the page beneath an overlay.

Motion
Tailwind CSS

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

Image Trail

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

Motion
Tailwind CSS

Lens Media

An SEO-friendly WebGL image or video with a cursor-following circular lens and chromatic aberration

React Three Fiber
Drei

Liquid Media

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

React Three Fiber
Drei

Magnetic Dot Grid

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

Canvas
Tailwind CSS

Pixel Media

A WebGL image or video that breaks into pixel blocks under the cursor, then falls back when you stop

React Three Fiber
Drei

Pixel Trail

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

Canvas
Tailwind CSS

Text Effect

Pixelated Text

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

Canvas
Tailwind CSS

Text Bounce

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

Motion
Tailwind CSS

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

Text Scramble

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

JS Animation
Tailwind CSS

Scroll Effect

Curve Media

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

React Three Fiber
Drei
Lenis

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

Infinite Parallax

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

Motion
Lenis
Tailwind CSS

Infinite Zoom

Mouse wheel infinite zoom effect.

Motion
Tailwind CSS

Scattered Scroll

Items that spread apart horizontally while scrolling.

Motion
Tailwind CSS
Lenis

Primitives

Text Split

A primitive that splits a string into letters or words.

Primitive
Tailwind CSS

WebGL Image

A primitive that mirrors an image onto a WebGL plane while preserving accessibility.

Primitive
React Three Fiber

WebGL Text

A primitive that mirrors an text element onto a WebGL plane while preserving accessibility.

Primitive
React Three Fiber

WebGL Video

A primitive that mirrors a video onto a WebGL plane while preserving the DOM element.

Primitive
React Three Fiber
Star on githubBuy me a coffeellms.txt