# The Effects library

> Browse every effect uxdeck plays, then click one onto the selected layer or drag it onto any layer or empty canvas.

Source: https://uxdeck.app/guide/effects-library (checked against uxdeck on 16 October 2026)

Effects are live finishes that play on your published site: a picture that breaks into cells under the pointer, words that roll on a button, a field of dots that follows the mouse. The **Effects** library holds all of them, each card a still that comes alive while you point at it.

Use it when a layer should react to the visitor rather than simply move. For motion tied to scrolling, see [While scrolling](/guide/while-scrolling) and [Appear on scroll](/guide/appear-on-scroll).

## Open the library

- Select a layer and open the **Prototype** tab. Press **+** next to **Effects** (**Browse effects**).
- With nothing selected, the **Prototype** tab shows four effects under **Effects**. Click one, or press **+**, to open the full library.

The library is filed in three groups: **Generative**, **Distort** and **Hover**. Type in **Search effects** to find one by name or by what it does. Cards marked New arrived recently.

| Effect | Group | Goes on |
| --- | --- | --- |
| Dither | Generative | Anything but text, lines, arrows and notes |
| Glitch | Distort | A picture: an image, or a layer with an image fill |
| Pixel distortion | Distort | A picture |
| Bulge | Distort | A text or a picture |
| Letter roll | Hover | A text, or a button with words |
| Scramble | Hover | A text, or a button with words |
| Fill wipe | Hover | A button, a frame, a stack or a rectangle |

## Add an effect

There are three ways:

1. **Click a card** to add the effect to every selected layer that can take it. The toast says which layers got it, and how many could not.
2. **Drag a card onto a layer** on the canvas. It goes on the innermost layer under the pointer that can take it.
3. **Drag a card onto empty canvas**, or the empty space of a frame, to start from nothing. Dither makes a new 480 by 320 rectangle to fill; Glitch, Pixel distortion and Bulge place a sample picture with the effect on it. Replace the picture whenever you like.

Letter roll and Scramble dropped on a button built as a frame go on the button's one text. A card the selection cannot take is dimmed, and says why.

The library stays open while you work on the canvas, so you can select the next layer and click the next card.

## Change or remove an effect

Every effect a layer has is a row in **Effects** in the **Prototype** tab. The row's strip of small cards switches it to another effect of the same family (one hover effect for another, one picture effect for another), with that effect's own settings.

Press **−** on a row to remove the effect. Nothing asks: <kbd>⌘</kbd><kbd>Z</kbd> brings it back.

Select several layers and **Effects** shows the effects they all share. A change there is made on every one of them, in one Undo. An effect only some of them have is edited one layer at a time.

## Watch it on the canvas

The canvas shows each effect's first frame, as it looks the moment the page opens. To see it move, select the layer and press play at the top right of the selection; a chip with the effect's name stops it. Every effect plays in **Preview** and on your published site.

## Catches

- **A layer takes each effect once.** Adding a second Glitch to the same picture says "It already has Glitch".
- **Letter roll and Scramble move the same letters**, so a layer takes one of them. Remove the other first.
- **Fill wipe needs a fill.** It goes on the button, not on its text.
- **Without WebGL, or for people who ask for less motion,** the picture shows as it is and nothing moves.
- **A hover effect never plays on a touch screen.** There is no pointer to hover with.

Effects are on every plan. To take them outside uxdeck as code, use the site export (Pro): see [Export code, PNG and SVG](/guide/export).