Skip to content
Alea0.1
Pro
  1. Alea
  2. Components
  3. Effects
  4. Image effects

EffectsAlea Pro

Image effects

Compare before and after with a handle, magnify details with a lens, reveal a generated image out of noise, and shred a deleted one into smoke.

import { ImageCompare, Lens, ImageReveal, Disintegrate } from '@alea/pro';

Examples

Before and after

Drag the handle, or focus it and use the arrows, Home and End.

After: in color
Before: in gray

Lens

A magnifier follows the pointer over a product image.

Mountains at sunset

Reveal and dissolve

A generated image resolves out of noise; a removed one shreds into smoke.

Generated landscape
A photo you can delete

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

  • --alea-focus…

Radius

  • --alea-radius-md…

Shadow

  • --alea-shadow-pop…

Component

  • --alea-compare…

Other

  • --alea-control-thumb…
  • --alea-media-scrim…

Props

ImageCompare props

Two images, one over the other, with a handle to compare them (before and after). The handle is a slider: arrows move it.

PropTypeDefaultDescription
afterrequiredReactNode-
beforerequiredReactNode-
classNamestring-
labelstring'Compare the images'

Lens props

A magnifier that follows the pointer over an image: for product details. Keyboard users get the full image.

PropTypeDefaultDescription
altrequiredstring-
srcrequiredstring-
classNamestring-
sizenumber140
zoomnumber2

ImageReveal props

An image that resolves out of dot noise when it comes into view: for generated images or a dramatic reveal.

PropTypeDefaultDescription
altrequiredstring-
srcrequiredstring-
classNamestring-
durationnumber1400

Disintegrate props

Content that shreds into smoke and disappears (for deleting something visual, like an image). Keeps it mounted until it's gone; calls onGone.

PropTypeDefaultDescription
showrequiredboolean-
classNamestring-
onGone(() => void)-

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

ImageCompare

States
Keyboard focus
Dark and light
Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks
.alea-compare.alea-compare-layer.alea-compare-handle
Data attributes
data-before

Lens

Dark and light
Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks
.alea-lens.alea-lens-glass

ImageReveal

Dark and light
Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks
.alea-image-reveal.alea-fx-defs
Data attributes
data-in

Disintegrate

Dark and light
Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks
.alea-disintegrate.alea-fx-defs

Accessibility

  • ImageCompare's handle is a slider with a name and a value: arrows move it 5%, Home and End jump to the ends.
  • Lens is for the pointer; the full image is always there for keyboard and screen reader users.
  • Reveal and dissolve skip their animation with reduced motion.

Keyboard

KeyDoes
Left or Right arrowImageCompare: move the handle
Home or EndImageCompare: to the start or the end

Do and don't

Do

  • Give ImageCompare's two images alt text that says what changed.
  • Keep Disintegrate for a deleted item, not for every removal.

Don't

  • Don't put details only under the lens.
  • Don't reveal an image people are waiting to use: show it.
Image Glass and LiquidGlass
Tested with axe, keyboard and screen reader roles