Atelier UI^®

Docs Catalog Shader Studio Pricing Github

Docs 1.0.0

tools

Browse Catalog
Shader Studio
pro
Collage
new

Documentation

How it works
License
MCP

Page Transition (04)

Clip Transition
Stripe Transition
Pixel Transition
Band Transition

Components (36)

Orbit Gallery
Sphere Gallery
Spiral Gallery
Glowing Fog
Gradient Flow
Halftone Glow
Scattered Grid
Tag Cloud

Edge Bounce
Fluid Distortion
Image Trail
Lens Media
Liquid Media
Magnetic Dot Grid
Pixel Media
Pixel Trail
Dither Cursor
Hover Burst
Image Bloom

Curve Media
Infinite Gallery
Infinite Parallax
Infinite Zoom
Pixel Scroll
Scattered Scroll
Elastic Stick
Letter Swarm
Magnify Trail
Stacking Grid
Wavy Scroll

Pixelated Text
Text Bounce
Text Fluid
Text Scramble
Falling Text
Text Roll

Foundation Blocks (07)

Smooth Scroll
Text Split
WebGL Image
WebGL Provider
WebGL Scene
WebGL Text
WebGL Video

Atelier UI 1.0.0 ©2026

Star on github Buy me a coffee llms.txt

Docs
/
Page Transition
/
Clip Transition

Clip Transition

A covered route transition that clips and scales the page, WebGL compatible.

https://atelier-ui.com/clip-transition

background

ffffff

cover-color

FFD23F

clip-color

121212

clip-x

20

clip-y

10

scale

0.80

duration

1.3

background

ffffff

cover-color

FFD23F

clip-color

121212

clip-x

20

clip-y

10

scale

0.80

duration

1.3

Unlock component

One license unlocks every pro feature for life, including the ones we haven't built yet.

Already have an account? Sign in

Motion
React animation library.

Star on github Buy me a coffee llms.txt