Atelier UI®

Read the docsGithub
Docs 1.0.0

Getting started

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

Components (34)

  • Clip Reveal
  • Stripe Wipe
  • Sweep Exit
  • Dither Flow
    pro
  • Glowing Fog
    pro
  • Halftone Glow
    pro
  • Orbit Gallery
  • Sphere Gallery
  • Edge Bounce
  • 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
  • Pixel Scroll
  • Scattered Scroll
  • Text Split
  • WebGL Image
  • WebGL Provider
  • WebGL Scene
  • WebGL Text
  • WebGL Video
Atelier UI 1.0.0 ©2026
Star on githubBuy me a coffeellms.txt
ComponentsCollage

Components (34)

Showing 34 of 34

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

Orbit Gallery

A WebGL gallery that places images on rotating rings. Scroll to spin them, click an image to zoom in...

React Three Fiber
Drei
Motion
Tailwind CSS

Sphere Gallery

A WebGL gallery that maps images onto a sphere. Drag to look around, click an image to zoom in.

React Three Fiber
Drei
Tailwind CSS

Cursor Effect

Edge Bounce

A wrapper that bounces away from the cursor on hover and springs back into place.

Motion
Tailwind CSS

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

Pixel Scroll

A grid of pixels that fill in or clear out as you scroll, with optional color hints.

Motion
Canvas
Lenis
Tailwind CSS

Scattered Scroll

Items that spread apart horizontally while scrolling.

Motion
Tailwind CSS
Lenis

Foundation Blocks

Text Split

A foundation block that splits a string into letters or words.

Foundation Block
Tailwind CSS

WebGL Image

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

Foundation Block
React Three Fiber

WebGL Provider

The root that runs one shared WebGL canvas for the whole page.

Foundation Block
React Three Fiber

WebGL Scene

A foundation block with its own Three.js scene and camera, rendered into a tracked DOM rect on the s...

Foundation Block
React Three Fiber

WebGL Text

A foundation block that mirrors a text element onto a WebGL plane while preserving accessibility.

Foundation Block
React Three Fiber

WebGL Video

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

Foundation Block
React Three Fiber
Star on githubBuy me a coffeellms.txt